如何在图表js上为每个点添加垂直线

Question

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;

                var index = chart.config.data.lineAtIndex;
                if (index) {
                    var xaxis = chart.scales['x-axis-0'];
                    var yaxis = chart.scales['y-axis-0'];

                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.getPixelForValue(85));
                    ctx.strokeStyle = '#ff0000';
                    ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
                    ctx.stroke();
                    ctx.restore();
                }
            }
        });

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    data: [65, 0, 80, 81, 56, 85, 40],
                    fill: false
                }],
                lineAtIndex: 5
            }
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        new Chart(ctx, config);

<div style="width: 75%">
        <canvas id="myChart"></canvas>
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js'></script>

请参阅附件

如何为每个点添加一条垂直线，以及如何使选择的数据像屏幕截图一样以顶部标签（5.5k）突出显示？

提前感谢。

Answer 1

您可以使用canvas直接在Plugin Core API上绘制自己的线条。它提供了可用于执行自定义代码的不同钩子。在下面的代码片段中，我使用afterDraw钩子绘制到数据集中各个点的垂直线。

const data = [65, 0, 80, 81, 56, 85, 40];

new Chart(document.getElementById("myChart"), {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {
        var x = xAxis.getPixelForTick(index);
        var yTop = yAxis.getPixelForValue(data[index]);
        ctx.save();
        ctx.strokeStyle = '#aaaaaa';
        ctx.beginPath();
        ctx.moveTo(x, yAxis.bottom);
        ctx.lineTo(x, yTop);
        ctx.stroke();
        ctx.restore();
      });
    }
  }],
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      data: data,
      fill: false
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        }
      }],    
      xAxes: [{
        gridLines: {
          display: false
        }
      }]    
    }
  }  
});

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js'></script>
<div style="width: 75%">
  <canvas id="myChart" height="90"></canvas>
</div>