Daess 14 сен 2011 в 12:00

График «мастер-детали» средствами Highcharts и jQuery UI

4 мин

7.1K

JavaScript*

Из песочницы

+33

Комментарии 22

Morozov 14 сен 2011 в 13:20

Все симпатично, но у меня в Firefox 7 — очень тормозит :( В Chrome и Opera — нормально.

popikyardo 14 сен 2011 в 13:34

в Chrome 6.0 демка не работает:

popikyardo 14 сен 2011 в 13:36

черт, зафейлил комент.
Успешно загрузились «детали», «мастер», и скролл
не заработал отображаемый период, и при попытке поскроллить хром нашел критическую ошибку в странице и решил ее схлопнуть

Daess 14 сен 2011 в 13:37

к сожалению, таким браузером не располагаю, из доступной «архаики» нашелся только IE9 в режиме IE7 — там работает

novoselov 14 сен 2011 в 14:19

GIum 14 сен 2011 в 14:21

где ты такой браузер старый откопал? =)

xana4ok 14 сен 2011 в 23:25

МАСТЕРСКИ

-1

karellen 14 сен 2011 в 14:01

А это не то? highcharts.com/demo/dynamic-master-detail

Daess 14 сен 2011 в 14:05

Не совсем, данный пример не позволяет прокручивать выбранный диапазон, только выбирать область на «мастер»-графике

Imposeren 14 сен 2011 в 14:37

Зато видимых тормозов меньше. У вас почему-то даже выделение области «тяжело» происходит. А тут шустренько

Daess 14 сен 2011 в 14:41

Вынужден согласиться, видимо оттого, что в примере все действия реализованы при помощи встроенных в HighCharts фич (plotBands и эвенты графика). Есть смысл попробовать увязать их со слайдерами, как вариант.

1x1 15 сен 2011 в 11:55

Обратите внимание на пример прямо на главной странице (USD to EUR).

Daess 15 сен 2011 в 11:56

Обратите внимание, что это и есть тот самый HighStock, о котором сказано в начале статьи

vick 14 сен 2011 в 14:04

А на narod.ru рекламку в уголке уже не вставляют?

Daess 14 сен 2011 в 14:07

По-видимому, да. На родном index.html есть какая-то панель наверху, но мой index.htm не пострадал)

Ghost_nsk 14 сен 2011 в 14:40

В Chrome Speed Tracer эта шутка классно сделана.
code.google.com/webtoolkit/speedtracer/

spmbt 14 сен 2011 в 17:41

HighCharts — вообще программа с хорошими возможностями и более чем отличной документацией.
Насчёт «внешний вид можно сделать практически каким угодно» — не совсем так. Содержимое графика отображается в SVG, а у него — очень ограниченные возможности управления всплывающими подсказками. Если им нужна кастомизация, придётся делать искусственные подсказки сверху.

Daess 14 сен 2011 в 17:45

Насколько я помню, у HighCharts чуть ли не каждому лейблу можно навесить по форматтеру, за счет чего можно поменять не только все надписи, но и внешний вид тултипов, а они вообще форматятся обычным HTML внутри. Или вы не тултипы имели в виду?

legato_di 14 сен 2011 в 21:24

Почему вы используете платный и достаточно тяжелый highcharts? Есть же достаточно много открытых canvas библиотек.

Daess 14 сен 2011 в 21:31

Ни одна из них не имеет столько функциональных возможностей; в статье использовались HighCharts, потому что методика изначально была опробована именно на них, в общем данный метод применим, как я считаю, вообще к любой чартинговой библиотеке

knekrasov 14 сен 2011 в 22:51

Если я правильно понимаю, HC это не просто canvas-библиотека. В качестве целевой платформы там служат SVG и VML, что позволяет абстрагироваться от конкретного браузера. В частности, в IE6 оно тоже будет работать)

ezj 27 сен 2011 в 21:26

Не подскажите какие?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

График «мастер-детали» средствами Highcharts и jQuery UI

Комментарии 22

Публикации

Истории