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

如何解决Chart.js-使用工具提示绘制任意点

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

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

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

据我所知，只有数据点会显示工具提示。我试图添加另一个系列来包含行数据，但是没有成功-它也为该系列创建了一个图例，我不想这样做。我将值设置为9999，试图使它们出现在画布的顶部，但这没有用，看起来像是hack。

解决方法

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

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

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

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

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

请查看下面的可运行代码段，并查看其工作方式。该代码使用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,5,7,1],lineAtIndex: 2,lineTooltip: ['This is','a multi-line','tooltip']
      },{
        data: [null,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>