Javascript 谷歌折线图：拖动以调整值

我最近放弃了使用and和扩展包。我认为它仍然是一个很棒的库，它只是需要更好的文档和适当的API才能被广泛采用

我已经将带有图表的区域转换为使用谷歌图表，但似乎找不到一种方法来实现我使用graphael的一个特定功能：拖动支持。我的其中一个需要是可编辑的，这意味着线上的单个点可以上下拖动以调整值

我一直在试图找到一个事件或一种在API中附加事件的方法，但没有取得多大成功。有人做过这样的事吗

据推测，可以制作自定义图表-可以这样做吗

编辑：看起来这不太可能，或者很难连接到GoogleAPI或输出的SVG。它位于iframe中，并且没有可用的源代码，这使得它越来越没有吸引力

从那时起，我就开始尝试。我能够做谷歌引擎所做的一切，并能在图表渲染后摆弄它。因为提供了源代码，所以更容易理解某些事情。它似乎也比Google解决方案快一点，因为它在绘制折线图时使用路径，而不是单个SVG圆元素

我现在面临的问题与SVG路径元素有关——没有单点设置拖拽。因此，为了使用jQuery.draggable，必须在与要拖动的SVG路径片段相同的位置注入一个SVG圆或另一个元素。因此，必须解决以下问题： -如何将创建的元素放置到正确的位置？ -缩放图表时如何移动元素（任一轴上的最小值或最大值发生变化）？ -如何将新位置转换回一个值，根据提供的系列数据进行缩放

---

有没有人对海图有足够的深入经验来处理这些问题？如果可能的话，我将尝试提供JSFIDLE示例。

可拖动点不是内置在Highcharts中的，而是使用API中的事件和方法，可以实现可编辑的线/列/散点/面积图（目前为止只处理在y方向移动点）。下面的示例使用

mousemove

、

mousedown

和

mouseup

事件来处理交互

• 在

  mousedown

  处，如果点被聚焦，则记录开始y值。这里的关键是y-axis.translate方法，它将鼠标位置转换到数据域
• 在

  mousemove

  处，焦点和工具提示将用新值更新
• 在

  mouseup

  点被更新，并触发一个新事件

  drop

  ，更新状态消息中的文本

完整的例子。

---

另请参见功能请求

这现在是Highcharts上可用的插件：

---

我尝试使用jQuery，并在保存图表但包含Google图表的容器（div）上侦听mousedown/mouseup，以抑制事件冒泡。。。也许有一种方法可以允许事件在图表上冒泡？如果只有一个人能够告诉Google Charts来呈现而不是chart，那么这种方法可能会起作用。您可以提供一个链接，指向Raphael中可拖动图表行为的API或演示吗？您还知道有哪个库支持可拖动/可调整大小的饼图吗？关系到伟大！这正是我想要的。我们是否可以在饼图中添加拖动山墙点，我有一个要求，即通过拖动山墙来调整饼图的大小！如果可行的话，将考虑使用插件更新实现。