就chart.js之线图

我与chart.js之创造a line chart在x轴上点击个月。我的x轴是基于时间的，并显示几个月。
每个“一个月列”应该可以点击/选择，但我不能找到一种方法来管理这一点。方法如getElementAtEvent()返回数据，所以我可以找出哪个月被选中。但是，只有当用户点击某个点时，才能正常工作，而不是“列”中的任何地方。就chart.js之线图

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

来源

2017-03-27 DoeTheFourth

我能够使用一种名为.getValueForPixel()的未公开时间尺度原型方法来得到这个工作，该方法返回被点击的尺度区域的尺度值。

此方法返回用于生成规模Tick标志片刻对象，所以（如果你想他们是视觉上的等），可以使用显示此值，当配置为您的时间尺度相同的格式字符串。我将它与通用的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看到它在行动。

来源

2017-03-27 14:58:02 jordanwillis

不幸的是按预期这不起作用。我[更新您的codepen示例]（http://codepen.io/anon/pen/gmdxyO），使得它更短，并使用了“真正的”时间X轴（使用[力矩]（https://github.com /此刻/力矩））。这里只有两点存在。所以你点击任何地方，你会得到0或1的索引。但是，当我点击它们的列时，即使它们没有保存数据，我也想得到几个月（格式可能是YYYY-MM）。 – DoeTheFourth

我来看看。在将来，它始终最好发布特定的chart.js配置，以便它可以用来派生一个问题。在你使用时间尺度的答案中并不清楚。 – jordanwillis

@DoeTheFourth更新了适用于时间尺度的解决方案的答案。 – jordanwillis

就chart.js之线图

回答

相关问题