我最近放弃使用Graphael和扩展包Ico,我认为它仍然是一个很棒的库,只是需要更好的文档和合适的API才能被广泛采用。
我已经将图表区域转换为使用Google图表,但似乎找不到一种方法来完成我使用graphael的一个特定功能:拖动支持。我的一个line charts需要是可编辑的,这意味着线上的单个点可以上下拖动来调整值。
我一直在尝试寻找一个事件或者在API中附加一个事件的方法,但没有太大的成功。有人成功地做了类似的事情吗?
据说可以做自定义图表-有可能这样做吗?
编辑:似乎不太可能或者很难连接到Google API或输出SVG。它在iframe中,没有可用的源代码,这使得它越来越没有吸引力。
我已经开始尝试Highcharts。我可以做谷歌引擎做的一切,并可以摆弄它被渲染后的图表。由于提供了源代码,它使某些事情更容易弄清楚。它似乎也比谷歌的解决方案快一点,因为它使用路径时,做一个线图,而不是单独的SVG圆元素。
我现在面临的问题与SVG Path元素有关-没有一个点可以设置拖动。因此,为了使用jQuery.draggable,必须在与SVG Path片段绑定拖动的位置相同的位置注入SVG Circle或其他元素。因此,必须解决以下问题:- 如何将创建的元素放置到正确的位置?-如何在图表缩放时移动元素(任一轴上的最小值或最大值更改)?-如何将新位置转换回值,为提供的系列数据缩放?
有没有人对Highcharts有足够深入的经验来摆弄这些呢?我将尽可能提供JSfiddle示例。
3条答案
按热度按时间jvidinwx1#
Highcharts中没有内置可拖动的点,但是使用API中的事件和方法可以实现可编辑的折线图/柱形图/散点图/面积图(目前只处理在y方向移动点)。以下示例使用
mousemove
、mousedown
和mouseup
事件来处理交互。mousedown
处,如果一个点被聚焦,则记录起始y值。y轴.translate方法是这里的关键,它将把鼠标位置转换到数据域。mousemove
处,焦点和工具提示使用新值更新。mouseup
处,更新该点并激发新事件drop
,以更新状态消息中的文本。jsfiddle上的完整示例。另请参见功能请求draggable points
b1zrtrql2#
这是Highcharts上的一个可用插件:http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points
zzlelutf3#
意识到这是一个相当老的问题,但它的高度参考有关谷歌图表,所以也许这会帮助一些人。
花了一段时间在这个完全相同的问题上,并在@WhiteHat的几个答案的帮助下,终于设法让这个工作。
基本上,您需要将EventListener添加到“mousemove”、“mouseup”和“mousedown”图表的容器中,然后跟踪您当前是选择了某个点还是拖动了某个点。
剩下的大部分最终都是大量的边缘和距离以及缩放计算,试图找出点在图表中的实际位置。
最终真正相关的主要部分是:
一旦您通过鼠标移动实际确定了点的位置,则可以使用以下命令调整位置:
下面包含一个工作示例,其中包含两个具有单独X值的不同线数据集。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个