javascript 谷歌折线图:拖动以调整值

s6fujrry  于 2022-12-21  发布在  Java
关注(0)|答案(3)|浏览(177)

我最近放弃使用Graphael和扩展包Ico,我认为它仍然是一个很棒的库,只是需要更好的文档和合适的API才能被广泛采用。
我已经将图表区域转换为使用Google图表,但似乎找不到一种方法来完成我使用graphael的一个特定功能:拖动支持。我的一个line charts需要是可编辑的,这意味着线上的单个点可以上下拖动来调整值。
我一直在尝试寻找一个事件或者在API中附加一个事件的方法,但没有太大的成功。有人成功地做了类似的事情吗?
据说可以做自定义图表-有可能这样做吗?
编辑:似乎不太可能或者很难连接到Google API或输出SVG。它在iframe中,没有可用的源代码,这使得它越来越没有吸引力。
我已经开始尝试Highcharts。我可以做谷歌引擎做的一切,并可以摆弄它被渲染后的图表。由于提供了源代码,它使某些事情更容易弄清楚。它似乎也比谷歌的解决方案快一点,因为它使用路径时,做一个线图,而不是单独的SVG圆元素。
我现在面临的问题与SVG Path元素有关-没有一个点可以设置拖动。因此,为了使用jQuery.draggable,必须在与SVG Path片段绑定拖动的位置相同的位置注入SVG Circle或其他元素。因此,必须解决以下问题:- 如何将创建的元素放置到正确的位置?-如何在图表缩放时移动元素(任一轴上的最小值或最大值更改)?-如何将新位置转换回值,为提供的系列数据缩放?
有没有人对Highcharts有足够深入的经验来摆弄这些呢?我将尽可能提供JSfiddle示例。

jvidinwx

jvidinwx1#

Highcharts中没有内置可拖动的点,但是使用API中的事件和方法可以实现可编辑的折线图/柱形图/散点图/面积图(目前只处理在y方向移动点)。以下示例使用mousemovemousedownmouseup事件来处理交互。

  • mousedown处,如果一个点被聚焦,则记录起始y值。y轴.translate方法是这里的关键,它将把鼠标位置转换到数据域。
  • mousemove处,焦点和工具提示使用新值更新。
  • mouseup处,更新该点并激发新事件drop,以更新状态消息中的文本。

jsfiddle上的完整示例。另请参见功能请求draggable points

zzlelutf

zzlelutf3#

意识到这是一个相当老的问题,但它的高度参考有关谷歌图表,所以也许这会帮助一些人。
花了一段时间在这个完全相同的问题上,并在@WhiteHat的几个答案的帮助下,终于设法让这个工作。
基本上,您需要将EventListener添加到“mousemove”、“mouseup”和“mousedown”图表的容器中,然后跟踪您当前是选择了某个点还是拖动了某个点。
剩下的大部分最终都是大量的边缘和距离以及缩放计算,试图找出点在图表中的实际位置。
最终真正相关的主要部分是:

// Get layout object for the chart (mostly for bounding boxes)
var chartLayout     = myLineChart.getChart().getChartLayoutInterface();
// Get the actual chart container (has all the chart properties as sub-variables)
var chartContainer  = document.getElementById( myLineChart.getContainerId() );
// Find the outer (beyond title and axes labels) limits of chart
// Varies with screen scrolling
var chartBounds     = chartContainer.getBoundingClientRect();
// Find the actual drawn region where your lines are (offset relative to chart)
var chartAreaBounds = chartLayout.getChartAreaBoundingBox();

一旦您通过鼠标移动实际确定了点的位置,则可以使用以下命令调整位置:

var dataTable = myLineChart.getDataTable();
var spX = ( x - chartBounds.left - chartAreaBounds.left ) / chartAreaBounds.width  * ( chartMaxX - chartMinX );
var spY = ( chartAreaBounds.height - ( y - chartBounds.top  - chartAreaBounds.top ) ) / chartAreaBounds.height * ( chartMaxY - chartMinY );
dataTable.setValue( selectedPoint.row, 0, spX );
dataTable.setValue( selectedPoint.row, selectedPoint.column, spY );

下面包含一个工作示例,其中包含两个具有单独X值的不同线数据集。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

相关问题