如何使所选数据在图表js上突出显示？

Question

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
        }
      }]
    }
  }
});

<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

这显示了如何强调选定的数据点并将标签及其值放置在其顶部。要找到也突出显示相应的xAxis标签的解决方案，请查看此answer。

在图表选项中，我定义了一个onClick事件处理程序，该事件处理程序记录所选数据点（selIndex）的索引并更新图表。

onClick: event => {
  var element = lineChart.getElementAtEvent(event);      
  if (element.length > 0) {
    selIndex = element[0]._index;
    lineChart.update(data);
  }
}, 

selIndex Plugin Core API挂钩内使用记录的afterDraw在所选数据点的顶部绘制文本并在其周围绘制圆弧。

if (index == selIndex) {

  // draw text
  ctx.textAlign = 'center';
  ctx.font = "18px Arial";
  ctx.fillStyle = "gray";
  ctx.fillText(data[index] + 'k', x, yTop - 15);

  // draw circle
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.arc(x, yTop, 8, 0, 2 * Math.PI);
  ctx.stroke();
}

请在下面运行您修改后的代码，然后单击各个数据点以查看其工作原理。

const data = [65, 0, 80, 81, 56, 85, 40];
let selIndex = -1;

const lineChart = 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();        
        if (index == selIndex) {
        
          // draw text
          ctx.textAlign = 'center';
          ctx.font = "18px Arial";
          ctx.fillStyle = "gray";
          ctx.fillText(data[index] + 'k', x, yTop - 15);
        
          // draw circle
          ctx.beginPath();
          ctx.lineWidth = 3;
          ctx.arc(x, yTop, 8, 0, 2 * Math.PI);
          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
    },
    tooltips: {
      enabled: false
    },
    onClick: event => {
      var element = lineChart.getElementAtEvent(event);      
      if (element.length > 0) {
        selIndex = element[0]._index;
        lineChart.update(data);
      }
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          max: 100
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        }
      }]
    }
  }
});

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