Линейный график Google: перетащите, чтобы настроить значение

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

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

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

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

EDIT: похоже, что это невозможно или невероятно сложно подключить к Google API или вывести SVG. Он находится в iframe и нет исходного кода, доступного только делает его менее привлекательным вариантом.

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

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

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

2 ответов


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

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

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


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