就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之線圖

回答

相關問題