javascript - 将事件位置映射到chartjs折线图中的y轴值(Map event position to y axis value in chartjs line chart)

Question

I am currently modifying a Chart.js line chart to be interactive.

(我目前正在将Chart.js折线图修改为交互式。)

The idea is that the user can move the points of the graph with its fingers.

(这个想法是用户可以用其手指移动图形的点。)

Here is an example how it looks like with the current mapping:

(这是当前映射的示例：)

chart-test.html

(chart-test.html)

I already managed it to read the events and get the data points which I have to modify:

(我已经设法读取事件并获取必须修改的数据点：)

// register pointer event
canvas.addEventListener('pointerdown', evt => {
    const points = interactiveChart.getElementsAtEventForMode(evt, 'index', {
        intersect: false
    });

    moveDataSetPoint(points, evt);
});

// change point relatively to y point
function moveDataSetPoint(points, evt)
{
    // read active data point
    var activePoint = points[0];
    var data = activePoint._chart.data;
    var datasetIndex = activePoint._datasetIndex;

    // read mouse position
    const helpers = Chart.helpers;
    var position = helpers.getRelativePosition(evt, interactiveChart);

    // calculate y axis value (ugly)
    // todo: map this with a chartjs method to map mouse inputs to yAxis values
    var yValue = map(position.y, window.myLine.height, 0, yMin, yMax);

    data.datasets[datasetIndex].data[activePoint._index] = yValue;
    window.myLine.update();
};

// attached the map function
function map(value, start1, stop1, start2, stop2) {
    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))
};

But the problem is that my map function is just mapping the y pointer position relatively to the canvas size and then y-axis min and max values.

(但是问题是我的地图函数只是将y指针位置相对于画布大小映射，然后再映射y轴的 最小值和最大值 。)

This is very inaccurate and I am looking for a method which gives me the correct y-axis value from the pointer event values.

(这是非常不准确的，我正在寻找一种方法，该方法可以从指针事件值中为我提供正确的y轴值。)

Is there something already implemented in chartjs?

(chartjs中已经实现了什么吗？)

Or is there a method to get just the size of the chart itself, without the legends and borders around it (currently I am mapping to the whole canvas)?

(还是有一种方法来获取图表本身的大小，而没有图例和边框（当前我正在映射到整个画布）？)

  ask by cansik translate from so

Answer 1

I found the solution for it by myself.

(我自己找到了解决方案。)

You have to use the chart bottom and top properties to map the correct size:

(您必须使用图表的bottom和top属性来映射正确的大小：)

// read chart area
var chartArea = chart.chartArea;
var yValue = map(position.y, chartArea.bottom, chartArea.top, yMin, yMax);

Then the mapping is pixel perfect.

(则映射是像素完美的。)