将事件位置映射到chartjs折线图中的y轴值

Question

我目前正在修改Chart.js折线图以使其具有交互性。这个想法是用户可以用手指移动图形的点。

以下是当前映射的示例：

图表测试.html

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

// 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))
};

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

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

chartjs 中是否已经实现了一些东西？或者是否有一种方法可以获得图表本身的大小，而没有图例和边框（目前我正在映射到整个画布）？

Answer 1

我自己找到了解决方案。您必须使用图表bottom和top属性来映射正确的尺寸：

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

那么映射就是像素完美的。