Линейная диаграмма Google: перетащите, чтобы настроить значение - PullRequest
8 голосов
/ 13 января 2012

Я недавно отказался от использования Graphael и пакета расширений Ico . Я думаю, что это все еще отличная библиотека, ей просто нужна лучшая документация и надлежащий API, прежде чем она сможет получить широкое распространение.

Я преобразовал области с диаграммами в Google Charts и, похоже, не могу найти способ сделать одну особенность, для которой я использовал graphael: поддержку перетаскивания. Один из моих линейных графиков должен быть редактируемым, это означает, что отдельные точки на линии можно перетаскивать вверх и вниз для регулировки значения.

Я безуспешно пытался найти событие или способ прикрепить событие в API. Кому-нибудь удалось сделать что-то подобное?

Предположительно возможно создание пользовательских графиков - возможно ли это сделать таким образом?

РЕДАКТИРОВАТЬ: Похоже, что на самом деле это невозможно или невероятно сложно подключиться к API Google или выводить SVG. Он находится в iframe и не имеет исходного кода, что делает его все менее привлекательным вариантом.

С тех пор я начал экспериментировать с Highcharts . Я смог сделать все, что делает движок Google, и могу возиться с графиком после его рендеринга. Поскольку предоставляется исходный код, это облегчает понимание определенных вещей. Похоже, что он работает немного быстрее, чем решение Google, поскольку он использует путь при построении линейной диаграммы вместо отдельных элементов круга SVG.

Проблема, с которой я сталкиваюсь сейчас, связана с элементом SVG Path - нет единой точки для настройки перетаскивания. Таким образом, чтобы использовать jQuery.draggable, нужно вставить кружок SVG или другой элемент в ту же позицию, что и фрагмент пути SVG, привязанный к перетаскиванию. Таким образом, следующее должно быть решено: Как разместить созданный элемент в правильное положение? Как переместить элемент, когда график масштабируется (изменение минимального или максимального значения по любой оси)? преобразовать новую позицию обратно в значение, масштабированное для данных серии?

У кого-нибудь есть достаточно глубокий опыт работы с Highcharts, чтобы возиться с ними? Я постараюсь привести пример JSfiddle, когда это возможно.

Ответы [ 2 ]

15 голосов
/ 22 января 2012

Перетаскиваемые точки не встроены в Highcharts, но используя события и методы в API, можно реализовать редактируемую диаграмму line / column / scatter / area (пока будет обрабатываться только перемещение точки в направлении y). ). В следующем примере для обработки взаимодействия используются события mousemove, mousedown и mouseup.

  • При mousedown начальное значение y записывается, если точка сфокусирована. Ключевым здесь является метод y-axis.translate, он переводит положение мыши в область данных.
  • В mousemove точка фокуса и всплывающая подсказка обновляются новым значением.
  • В mouseup точка обновляется, и запускается новое событие drop, которое обновляет текст в сообщении о состоянии.

Полный пример по jsfiddle . См. Также запрос функции перетаскиваемые точки

2 голосов
/ 09 февраля 2016

Теперь это доступный плагин на Highcharts: http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points

...