Chart.js在线性图表上的拖动点 [英] Chart.js drag points on linear chart

问题描述

我有一个简单的线性图，它是用

也许如果没有办法将拖放操作添加到点上，将会有一种黑客将在图表上的绝对位置的滑块放在点位置上。我也没有找到任何信息：（

解决方案

更新：我之前的答案被删除了，因为它仅以解决问题的插件链接为特色，但是这里有解释它确实：

有关如何实现所需行为的一般步骤是

1. 在给定图表上截取鼠标（并检查是否为拖动手势）


2. 使用 getElementAtEvent 函数检查鼠标是否在数据点上


3. 在mousemove上，使用 axis.getValueForPixel 函数


4. 将新的Y-Pixel值转换为数据坐标，使用<$同步更新图表数据c $ c> chart.update（0）

此 Chart.js问题。

为了拦截mousedown，mousemove和mouseup事件（拖动手势），需要创建所述事件的事件侦听器。为了简化侦听器的创建，在这种情况下，可以使用 d3库，如下所示：

  d3.select（chartInstance.chart.canvas）.call（
 d3.drag（）。container（chartInstance.chart .canvas）
 .on（'start'，getElement）
 .on（'drag'，updateData）
 .on（'end'，callback）
）; 
  

在鼠标按下时（开始 事件此处），可以调用一个函数（ getElement ），该函数获取最接近指针位置的图表元素并获取Y刻度的ID

  function getElement（）{
 var e = d3.event.sourceEvent 
 element = chartInstance.getElementAtEvent（e）[0] 
 scale = element ['_ yScale']。id 
} 
  

在mousemove上（拖动 ），则应根据指针的当前Y-Pixel值更新图表数据。因此，我们可以创建一个 updateData 函数，该函数获取图表数据数组中的单击数据点的位置以及像这样的相应数据集的位置

  function updateData（）{
 var e = d3.event.sourceEvent 
 var datasetIndex = element ['_ datasetIndex'] 
 var index =元素['_index'] 
可变值= chartInstance.scales [scale] .getValueForPixel（e.clientY）
 chartInstance.data.datasets [datasetIndex] .data [index] =值
 chartInstance.update（0）
} 
  

就是这样！如果需要在拖动后存储结果值，则还可以指定回调函数，例如

 函数回调（）{
 var datasetIndex = element ['_ datasetIndex'] 
 var index = element ['_ index'] 
 var value = chartInstance.data.datasets [datasetIndex] .data [index] 
 //例如
} 
  

这是工作小提琴。该功能也是 Chart.js插件dragData 的核心。在许多情况下实施。

I have a simple linear chart built with Chart.js library.

And i want to allow user to drag points on chart for dynamically change data of it. I tied chartjs-plugin-draggable but it works for me only with annotations. I need graph exactly like this:

https://www.rgraph.net/canvas/docs/adjusting-line.html

But use new graph library in project is not good solution :(

Also i tried to play with dot event's.

UPDATE:

With angular i created something like this.

Maybe if there is no way to add drag&drop to points, there will be a hack to put "sliders" with absolute position on graph on points positions. I didn't find any info too :(

解决方案

Update: My previous answer got deleted because it only featured a link to a plugin solving the issue, however here comes the explanation to what it does:

The general procedure on how to achieve the desired behaviour is to

1. Intercept a mousedown (and check if it's a dragging gesture) on a given chart
2. Check if the mousedown was over a data point using the getElementAtEvent function
3. On mousemove, translate the new Y-Pixel value into a data coordinate using the axis.getValueForPixel function
4. Synchronously update the chart data using chart.update(0)

as pointed out in this Chart.js issue.

In order to intercept the mousedown, mousemove and mouseup events (the dragging gesture), event listeners for said events need to be created. In order to simplify the creation of the listeners one may use the d3 library in this case as follows:

d3.select(chartInstance.chart.canvas).call(
  d3.drag().container(chartInstance.chart.canvas)
    .on('start', getElement)
    .on('drag', updateData)
    .on('end', callback)
);

On mousedown (the 'start' event here), a function (getElement) may be called thatfetches the closest chart element to the pointers location and gets the ID of the Y-Scale

function getElement () {
    var e = d3.event.sourceEvent
    element = chartInstance.getElementAtEvent(e)[0]
    scale = element['_yScale'].id
}

On mousemove ('drag'), the chart data is supposed to be updated according to the current Y-Pixel value of the pointer. We can therefore create an updateData function that gets the position of the clicked data point in the charts data array and the according dataset like this

function updateData () {
  var e = d3.event.sourceEvent
  var datasetIndex = element['_datasetIndex']
  var index = element['_index']
  var value = chartInstance.scales[scale].getValueForPixel(e.clientY)
  chartInstance.data.datasets[datasetIndex].data[index] = value
  chartInstance.update(0)
}

And that's it! If you need to store the resulting value after dragging, you may also specify a callback function like this

function callback () {
  var datasetIndex = element['_datasetIndex']
  var index = element['_index']
  var value = chartInstance.data.datasets[datasetIndex].data[index]
  // e.g. store value in database
}

Here is a working fiddle of the above code. The functionality is also the core of the Chart.js Plugin dragData, which may be easier to implement in many cases.

这篇关于Chart.js在线性图表上的拖动点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！