使用Chart.js上的垂直线更新折线图

Question

我试图在多折线图上画一条垂直线，但是我的功能无法更新该图，除非鼠标悬停在该图的刻度上。我使用了另一个问题的答案，用户希望在悬停时添加更新滴答的功能。这是另一个问题的链接：

Moving vertical line when hovering over the chart using 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();
     }});