9

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

我已经将带有图表的区域转换为使用谷歌图表,但似乎无法找到一种方法来执行我使用 graphael 的一个特定功能:拖动支持。我的一个折线图 需要是可编辑的,这意味着可以上下拖动线条上的各个点来调整值。

我一直在尝试在 API 中找到一个事件或附加事件的方法,但没有取得多大成功。有没有人设法做这样的事情?

据说可以做自定义图表 - 可以这样做吗?

编辑:似乎不太可能,或者很难连接到 Google API 或输出的 SVG。它位于 iframe 中并且没有可用的源代码,这使得它的吸引力越来越小。

从那以后,我开始尝试使用Highcharts。我能够做谷歌引擎所做的一切,并且可以在图表被渲染后摆弄它。由于提供了源代码,因此更容易弄清楚某些事情。它似乎也比谷歌解决方案工作得快一点,因为它在做折线图而不是单个 SVG 圆形元素时使用路径。

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

有没有人对 Highcharts 有足够的深入经验来摆弄这些?如果可能,我将尝试提供 JSfiddle 示例。

4

2 回答 2

16

可拖动点不是内置在 Highcharts 中,但使用 API 中的事件和方法,可以实现可编辑的线/列/散点图/面积图(目前仅处理在 y 方向上移动点)。以下示例使用mousemove,mousedownmouseup事件来处理交互。

  • 如果一个点被聚焦,则在mousedown开始时记录 y 值。y-axis.translate 方法是这里的关键,它将鼠标位置转换到数据域。
  • mousemove焦点处,工具提示将更新为新值。
  • 此时mouseup会更新并触发一个新事件,该事件drop会更新状态消息中的文本。

jsfiddle上的完整示例。另请参阅功能请求可拖动点

于 2012-01-22T10:39:08.740 回答
2

现在这是 Highcharts 上的一个可用插件: http ://www.highcharts.com/plugin-registry/single/3/Draggable%20Points

于 2016-02-09T00:55:52.747 回答