Chart.js -直线图中的垂直交叉(用鼠标移动的垂直注释)

Question

我正在使用Chart.js，并一直在寻找一种方法，在我的图表中有一个垂直的注解/十字线。

当光标在图形中时，我希望这条垂直线水平移动，跟随我的鼠标光标。

如何创建一个垂直交叉，根据光标的移动改变它的水平位置使用Chart.js？

Answer 1

我就是这样做的:我创建了一个注释，它的值随画布上的onmousemove事件而改变。

var annotation = {
    annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis',
        borderColor: '#b6fcd5',
        borderWidth: 2
    }]
};

var canvas = document.getElementById("chart");
var ctx = canvas.getContext("2d");

var myChart = new Chart(ctx,
    {
    ...
    },
        options: {
            tooltips: {
                mode: 'x',
                intersect: false
            },
            scales: {
                xAxes: [{
                    "id": 'x-axis',
                    type: 'time'
                }],
                ...
            },
            annotation: annotation
        }
    });

$(document).ready(function(){
    canvas.onmousemove = function (evt) {
        var points = myChart.getElementsAtXAxis(evt);
        annotation.annotations[0].value = new Date(myChart.config.data.labels[points[0]._index]);
        myChart.update();
    };
});