我在Vue图表中有一个条形图,单击该位置时,我想在表格中显示背景数据。这是渲染
startPie: function(canvas, type){
let chart = new Chart(canvas, {
type: type,
data: {
labels: this.labels,
datasets: this.chart_data
},
options: {
responsive: true,
animation:{ animateScale:true },
title: { display: false },
legend: { display: false },
scales: {
yAxes: [{
gridLines: {
color: "#989898"
},
ticks: {
fontColor: "#989898",
fontSize: 16,
beginAtZero: true,
callback: function(value) {
let ranges = [
{ divider: 1e6, suffix: 'M' },
{ divider: 1e3, suffix: 'k' }
];
function formatNumber(n) {
for (let i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
return (n / ranges[i].divider).toString() + ranges[i].suffix;
}
}
return n;
}
return '$' + formatNumber(value);
}
}
}],
xAxes: [{
ticks: {
fontColor: "#989898",
fontSize: 12
}
}]
},
plugins: {
datalabels: {
anchor: 'center',
font: {
size: 16,
weight: 'bold'
},
formatter: function(value, context) {
return '$' + Number(value).toLocaleString();
},
color: 'white'
}
},
'onClick':(evt, item) => {
console.log('CLICK', item[0]);
}
}
})
}
在控制台的onClick事件中,我可以看到索引
CLICK ChartElement。{_ chart:图表,_datasetIndex:0,_index:4,隐藏:false,_xScale:ChartElement,…}
尽管没有错误,我仍然无法访问它。我试过了item[0]._index
,item[0]['_index']
,item[0]['ChartElement']._index
,item[0]['ChartElement']['_index']
感谢您的任何帮助。
[不幸的是,onClick
事件处理程序的文档不多。您可以尝试以下操作:
onClick