我需要向数据集/标签添加一个属性,以便在单击时识别它。我试过这样的东西:
Chart.controllers.customBar = Chart.controllers.bar.extend({
code: null
});
它几乎可以工作,因为我可以看到新的属性"代码",数据与之相关,图表背景可见但为空,我的意思是数据集中没有可见的数据。
这是我的初始化:
var ctx = document.getElementById("roads-chart").getContext("2d");
window.roadsBar = new Chart(ctx, {
type: 'bar',
data: roadsChartData,
options: {
title: {
display: true,
text: "Stan dróg"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
},
onClick: function(e, d) {
console.log(d);
}
}
});
问题是,我感觉不到Chart.js,有人能帮我处理它并展示一个扩展如何工作的例子吗?:)
感谢
虽然您可以扩展图表来实现这一点,但如果您不介意依赖内部属性(在chart.js的后续版本中可能会发生变化),您可以使用_datasetIndex
和_index
属性从图表配置中检索额外的属性,如
options: {
onClick: function(e, d) {
if (d.length > 0) {
console.log(this.config.data.datasets[d[0]._datasetIndex].code[d[0]._index]);
}
}
...
和
...
datasets: [{
code: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
...
Fiddle-http://jsfiddle.net/55cdvb20/