Chart.js - 使用工具提示绘制任意点

Question

我已经实现了this question 中描述的技术，在我的图表上呈现垂直线，以显示重要事件发生时的关键日期。

但是，描述这些事件的文本可能会很长，因此仅在画布上绘制文本并不是一个好的解决方案。

有什么方法可以使用 chart.js API 在图表上绘制一个不可见的点（在行的顶部），当鼠标悬停在图表上时，该点将变为交互式并显示一个工具提示？

据我所知，只有数据点会显示工具提示。我试图添加另一个系列来包含线条数据，但没有太大成功 - 它还为这个系列创建了一个我不想要的图例。我将值设置为 9999 以尝试让它们出现在画布的顶部，但这不起作用，看起来像是一个 hack。

Answer 1

您可以在应绘制垂直线的 x 位置添加包含单个值的第二个数据集，其值应对应于第一个数据集的最大值。要使该点不可见，请使用'rgba(0,0,0,0)' 定义透明背景和边框颜色。

 {
   data: [null, null, 12],
   pointRadius: 10,
   backgroundColor: 'rgba(0,0,0,0)',
   borderColor: 'rgba(0,0,0,0)'
 }

要只显示相关数据集的图例标签，需要定义一个legend.labels.filter函数。

legend: {
  labels: {
    filter: legendItem => legendItem.datasetIndex == 0
  }
},

我们还需要定义一些tooltip.callback 函数以在工具提示中显示所需的数据。

请看下面的可运行代码 sn-p 看看它是如何工作的。此代码使用 Chart.js 的最新稳定版本（当前为 2.9.3）。

new Chart('canvas', {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      ctx.save();
      var lineAtIndex = chart.data.datasets[0].lineAtIndex;
      var x = xAxis.getPixelForTick(lineAtIndex);
      ctx.strokeStyle = '#ff0000';
      ctx.beginPath();
      ctx.moveTo(x, yAxis.bottom);
      ctx.lineTo(x, yAxis.top);
      ctx.stroke();
      ctx.restore();
    }
  }],
  data: {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        label: 'My Dataset',
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1],
        lineAtIndex: 2,
        lineTooltip: ['This is', 'a multi-line', 'tooltip']
      },
      {
        data: [null, null, 12],
        pointRadius: 10,
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: 'rgba(0,0,0,0)'
      }
    ]
  },
  options: {
    legend: {
      labels: {
        filter: legendItem => legendItem.datasetIndex == 0
      }
    },
    tooltips: {
      callbacks: {
        title: (tooltipItems, data) => {
          if (tooltipItems[0].datasetIndex == 0) {     
            return data.labels[tooltipItems[0].index];
          }
          return data.datasets[0].lineTooltip;
        },
        label: (tooltipItems, data) => {
          if (tooltipItems.datasetIndex == 0) {     
            return data.datasets[0].label + ': ' +  data.datasets[0].data[tooltipItems.index];
          }
          return null;
        }
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>