我有2个或更多的chart.js画布。目的是在多个图表上快速查看相同的条形图值。当我将鼠标悬停在第一个图表上的条形图时,例如“周四”,我想搜索并更改同一页面上不同图表的背景颜色,例如。如果条形图“周四”存在。
我设法用onClick改变了第一个图表的颜色,但我不知道如何搜索第二个图表ID来改变同一条的颜色。
<div style="width: 400px;">
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
const ctx1 = document.getElementById('myChart1');
new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [ "blue", "blue", "blue", "blue", "blue", "blue" ],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
onClick: function( evt, activeElements, chart ) {
var elementIndex = activeElements[0].index;
var horiz_value = chart.data.labels[elementIndex]; // ex Thu
var bar_bg_color_current = chart.data.datasets[0].backgroundColor[elementIndex]; // the color
this.data.datasets[0].backgroundColor[elementIndex] = "red";
this.update();
console.log( chart.data.labels );
console.log( horiz_value );
}, //onclick
}
});
const ctx2 = document.getElementById('myChart2');
new Chart(ctx2, {
type: 'bar',
data: {
labels: ['Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: '# of Votes',
data: [8, 4, 4, 4, 4, 4],
backgroundColor: [ "blue", "blue", "blue", "blue", "blue", "blue" ],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
1条答案
按热度按时间2izufjch1#
您需要在创建第二个图表时将其分配给常量或变量。
然后,您可以从
onClick
处理程序中访问它,并执行与第一个图表几乎相同的操作。请看一下下面修改后的可运行代码,看看它是如何工作的。
x一个一个一个一个x一个一个二个x