Question

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

我该怎么做？或者已经有了这个插件？

Answer 1

我能够使用名为.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，可以看到它的实际效果。

在x轴上使月数可以在chart.js折线图上点击

1 个答案: