javascript - 在 Chart.js 上使用垂直线更新折线图

Question

我正在尝试在多线图表上绘制一条垂直线，但我遇到了函数不更新图表的问题，除非鼠标悬停在图表的刻度上。我使用了另一个问题的答案，用户希望在悬停时添加更新刻度的功能。这是另一个问题的链接：

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

这是我从上面的例子中理解的实现：

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        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 lineDraw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype, {
        draw: function() {
          lineDraw.apply(this, arguments);

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

          var activePoint = this.chart.tooltip._active[0];
          var ctx = this.chart.ctx;
          var x = myChart.scales["x-axis-0"].getPixelForTick(0);
          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();
     }});

标签： javascriptchartschart.js