Chart.js - 折线图中的垂直十字准线（随鼠标移动的垂直注释）[关闭]答案

【问题标题】：Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph [closed]Chart.js - 折线图中的垂直十字准线（随鼠标移动的垂直注释）[关闭]
【发布时间】：2017-08-24 03:19:27
【问题描述】：

我正在使用 Chart.js，并且一直在寻找一种在我的图表中添加垂直注释/十字准线的方法。

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

如何使用 Chart.js 创建一个根据光标移动改变其水平位置的垂直十字准线？

【问题讨论】：

在 Stack Overflow 上完全允许甚至鼓励发布自我回答的问题以提供对社区有用的解决方案。然而，目前所说的问题不是很清楚/解释性，所以它的用处是有限的。如果您能更好地描述要解决的问题，那肯定会有所帮助。
@Pac0 我已经编辑过了，这个还不清楚吗？
这对我来说更好，但不确定它是否适用于“重新打开”审核队列中的审核者。我通常不喜欢有问题的屏幕截图/图形，但在这种情况下，我赞成这样的插图。

标签： momentjs chart.js

【解决方案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();
    };
});

【讨论】：