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

Question

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

我该怎么做？还是已经有一个插件？

Answer 1

我能够使用名为 .getValueForPixel() 的未记录的时间比例原型(prototype)方法实现此功能，该方法返回被单击的比例区域的比例值。

此方法返回一个用于生成刻度刻度标签的时刻对象，因此您可以在显示此值时使用为时间刻度配置的相同格式字符串(如果您希望它们在视觉上相等)。我将其与通用 onClick option config property 相结合对于您想做的事情来说，这是一种非常简单的方法。

这是如何做到的。在您的 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 example看看它的实际效果。