Диаграмма линии Google: перетаскивать, чтобы настроить значение

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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