在 Chart.js 折线图上使 x 轴上的月份可点击

Question

我正在使用 Chart.js创建折线图。我的 x 轴基于时间并显示月份。
每个“月份列”应该是可点击/可选择的，但我找不到管理它的方法。方法就像getElementAtEvent()返回数据，这样我就可以找出选择的是哪个月份。但它们仅在用户单击某个点而不是“列”中的任何位置时才起作用。

我怎样才能做到这一点？或者已经有这个插件了？

Answer 1

我能够使用名为 的未记录的时间刻度原型方法来实现此工作.getValueForPixel()，该方法返回单击的刻度区域的刻度值。

此方法返回一个用于生成刻度刻度标签的矩对象，因此您可以在显示此值时使用为时间刻度配置的相同格式字符串（如果您希望它们在视觉上相等）。我将其与通用onClick选项配置属性结合起来，为您想要做的事情提供了一种非常简单的方法。

以下是具体操作方法。在您的options对象中，使用此函数添加onClick属性。

onClick: function(e) {
  var xLabel = this.scales['x-axis-0'].getValueForPixel(e.x);
  console.log(xLabel.format('MMM YYYY'));
  alert("clicked x-axis area: " + xLabel.format('MMM YYYY'));
},

这是一个codepen 示例，可以查看它的实际效果。