使用chart.js将鼠标悬停在图表上时移动垂直线

我一直在尝试添加一条垂直线，当鼠标悬停在图表上时会显示工具提示。但是我使用的是chart.js2.6，1.x中的语法似乎已经过时了

我已经为1.x编写了以下代码

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", 
"OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

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

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

任何人都知道如何让它在2.6上运行吗？ChartJS 2.6.0的解决方案 ꜱᴄʀɪᴘᴛ(ᴇxᴛᴇɴᴅɪɴɢ ʟɪɴᴇ ᴄʜᴀʀᴛ)

您还需要为工具提示设置

相交：false

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.defaults.LineWithLine=Chart.defaults.line；
Chart.controllers.LineWithLine=Chart.controllers.line.extend({
绘图：功能（轻松）{
图表.控制器.线条.原型.绘图.调用（此，ease）；
if（this.chart.tooltip.\u活动（&this.chart.tooltip.\u活动.length））{
var activePoint=this.chart.tooltip.\u active[0]，
ctx=this.chart.ctx，
x=activePoint.tooltipPosition（）.x，
topY=this.chart.legend.bottom，
bottomY=this.chart.chartArea.bottom；
//划线
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（x，topY）；
ctx.lineTo（x，底部）；
ctx.lineWidth=2；
ctx.strokeStyle='#07C'；
ctx.stroke（）；
ctx.restore（）；
}
}
});
var图表=新图表（ctx{
键入：“LineWithLine”，
数据：{
标签：[一月、二月、三月、四月、五月、六月、七月]，
数据集：[{
标签：'统计'，
数据：[3,1,2,5,4,7,6]，
背景颜色：“rgba（0，119，204，0.8）”，
边框颜色：“rgba（0，119，204，0.3）”，
填充：假
}]
},
选项：{
回答：错，
工具提示：{
交集：错
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
})；

试试这个：

var ctx = this.$refs.canvas.getContext("2d");
      // new Chart(ctx, config);
      var originalLineDraw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype, {
        draw: function() {
          originalLineDraw.apply(this, arguments);

          var chart = this.chart;
          var ctx = chart.chart.ctx;

        if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
          var activePoint = this.chart.tooltip._active[0];
          var ctx = this.chart.ctx;
          var x = activePoint.tooltipPosition().x;
          var topY = this.chart.scales['y-axis-0'].top;
          var bottomY = this.chart.scales['y-axis-0'].bottom;

         // draw line
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(x, topY);
          ctx.lineTo(x, bottomY);
          ctx.lineWidth = 0.5;
          ctx.strokeStyle = '#eeeeee';
          ctx.stroke();
          ctx.restore();
       }
      }});

---

这肯定会对你有帮助。

你介意让它在JSFIDLE上工作吗？然后我会批准它。如果线条堆叠在Y轴上，似乎会有问题。回答很好，谢谢。复制粘贴，效果很好。颜色/笔划权重也很容易自定义。为什么它会显示（x，Y）最近点的工具提示距离，而不是x值的最近垂直线？例如，如果您将鼠标悬停在图形顶部，工具提示将从

Jan

跳到

Apr

@Atav32。v2.7.0中引入了一个设置来解决此问题。您可以在

选项处设置
轴：“x'
。tooltips.axis

。这是一个使用v2.8.0并具有该设置的小提琴丁集:ɢᴜɴᴛ 如果您可以更新答案，我建议您这样做：）

var ctx = this.$refs.canvas.getContext("2d");
      // new Chart(ctx, config);
      var originalLineDraw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype, {
        draw: function() {
          originalLineDraw.apply(this, arguments);

          var chart = this.chart;
          var ctx = chart.chart.ctx;

        if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
          var activePoint = this.chart.tooltip._active[0];
          var ctx = this.chart.ctx;
          var x = activePoint.tooltipPosition().x;
          var topY = this.chart.scales['y-axis-0'].top;
          var bottomY = this.chart.scales['y-axis-0'].bottom;

         // draw line
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(x, topY);
          ctx.lineTo(x, bottomY);
          ctx.lineWidth = 0.5;
          ctx.strokeStyle = '#eeeeee';
          ctx.stroke();
          ctx.restore();
       }
      }});