谷歌折线图：拖动调整值 [英] Google Line Chart: drag to adjust value

问题描述

我最近放弃使用 Graphael 和扩展程序包 Ico 。我认为它仍然是一个很好的图书馆，它只需要更好的文档和适当的API，然后才能被广泛采用。

我已将图表转换为使用Google图表，似乎无法找到一种方法来执行我使用graphael的一个特定功能：拖动支持。我的一个折线图需要可编辑，意为在线上的单个点可以上下拖动以调整值。

我一直在试图找到一个事件或一种方法来在API中附加一个事件没有太大的成功。有没有人设法做到这样的事情？

据说可以做自定义图表 - 是否可以这样做？

编辑：看起来好像不太可能，或者很难挂钩Google API或输出SVG。它在iframe中，并且没有可用的源代码，这使得它变得越来越不吸引人。

自从开始尝试使用 Highcharts 以来，我能够完成Google引擎所做的所有工作，并且在渲染完成后可以摆弄图表。由于提供了源代码，因此可以更容易地弄清某些事情。它似乎也比Google解决方案的工作速度快一些，因为它使用折线图而不是单个SVG圆圈元素。

我现在面临的问题是处理SVG Path元素 - 没有单个点设置拖动。因此，为了使用jQuery.draggable，必须在与SVG Path片段相同的位置注入SVG Circle或其他元素以绑定拖动。因此，必须解决以下问题：
- 如何将创建的元素放置到正确的位置？
- 图表缩放时如何移动元素（任一轴上的最小或最大值变化）？
- 如何将新位置转换回一个值，按照提供的系列数据进行缩放？

有没有人有足够的深度体验与Highcharts一起摆弄这些？我会尝试在可能的情况下提供JSfiddle示例。

解决方案

可拖动的点不是内置到Highcharts中，而是使用事件和API中的方法可以实现可编辑的线/列/散点图/面积图（仅处理在y方向上移动点）。以下示例使用 mousemove ， mousedown 和 mouseup 事件处理交互。

• 在 mousedown 聚焦。 y-axis.translate方法是这里的关键，它会将鼠标位置转换为数据域。


• 在 mousemove 集中在$ mouseup 点更新并且一个新事件



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

I've recently dropped use of Graphael and and extensions package Ico. I think it's still a great library, it just needs better documentation and a proper API before it can be widely adopted.

I've converted the areas with charting to use Google Charts and can't seem to find a way to do one particular feature I used graphael for: drag support. One of my line charts needs to be editable, meaning that individual dots on the line can be dragged up and down to adjust value.

I've been trying to find an event or a way to attach an event in the API without much success. Has anyone managed to do something like that?

It's supposedly possible to do custom charts - would it be possible to do it this way?

EDIT: Seems like it's not really possible or is incredibly hard to hook into Google API or outputted SVG. It being in an iframe and no source code available just makes it less and less attractive option.

I've since started experimenting with Highcharts. I was able to do everything that Google engine does and can fiddle with chart after it's been rendered. Since source code is provided it makes it easier to figure certain things out. It also seems to work a bit faster than Google solution since it uses path when doing a Line Chart instead of individual SVG circle elements.

The issue I'm facing now has to do with the SVG Path element - there is no single point to set up drag on. So in order to use jQuery.draggable one has to inject a SVG Circle or another element at the same position as the SVG Path fragment tying to drag. So the following has to be resolved: - how to place the created element to correct position? - how to move element when chart is scaled (min or max value change on either axis)? - how to convert new position back to a value, scaled for series data supplied?

Has anyone got enough in depth experience with Highcharts to fiddle with these? I'll try to provide JSfiddle example when possible.

解决方案

Draggable points is not built-in into Highcharts but using the events and methods in the API it is possible to implement an editable line/column/scatter/area-chart (will only handle moving the point in y-direction so far). The following example uses mousemove, mousedown and mouseup events to handle interaction.

• At mousedown the start y value is recorded if a point is focused. The y-axis.translate method is the key here, it will translate mouse position to the data domain.
• At mousemove the focused point and tooltip is updated with the new value.
• At mouseup the point is updated and a new event drop is fired that updates the text in a status message.

Full example on jsfiddle. See also the feature request draggable points

这篇关于谷歌折线图：拖动调整值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！