javascript - ChartJS：鼠标悬停时在图表上的数据点绘制垂直线

Question

当使用 Chart JS 将鼠标悬停在数据点上时，我无法弄清楚如何在折线图上绘制垂直线。我希望这条线保持在图表矩形的范围内，这样它就不会延伸到刻度区域。任何帮助，将不胜感激！

Answer 1

Answer 2

即使有一个公认的答案，我想我可能会贡献一个我写的插件来专门解决这个问题。

chartjs 行高注释插件

https://www.npmjs.com/package/chartjs-plugin-lineheight-annotation

如果需要，有一些可导出的类可以帮助您计算到数据点的顶部。此外，还有一个简单的 API，您可以将其添加到图表的选项对象中

/// default values
lineHeightAnnotation: {
  // defaults to have line to the highest data point on every tick
  always: true,
  // optionally, only have line draw to the highest datapoint nearest the user's hover position
  hover: false,
  // colors of the line
  color: '#000',
  // name of yAxis
  yAxis: 'y-axis-0',
  // weight of the line
  lineWeight: 1.5,
   /// sets shadow for ALL lines on the canvas
  shadow: {
    // color of the shadow
    color: 'rgba(0,0,0,0.35)',
    // blur of the shadow
    blur: 10,
    /// shadow offset
    offset: {
      // x offset
      x: 0,
      // y offset
      y: 3
    }
  },
  // dash defaults at [10, 10]
  noDash: true,
}