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

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

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

最佳答案

我能够使用称为.getValueForPixel()的未记录时间刻度原型方法来使此工作正常运行，该方法将返回被单击的刻度区域的刻度值。

此方法返回用于生成刻度刻度标签的矩对象，因此在显示此值时（如果希望它们在视觉上相等），可以使用为时间刻度配置的相同格式的字符串。我将其与通用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，可以看到它的实际效果。