在一个html页面中,我有一个选择菜单(a,b,c,d)和一个条形图(条形a,b,c,d)。我想要做的是突出显示在选择菜单中选择的条形图中的相应栏。
答案 0 :(得分:2)
您可以将逻辑附加到onchange处理程序
document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect"));
并且如果您想以编程方式调用它(例如,如果您设置了初始值)
document.getElementById("mySelect").onchange();
这是突出显示条形图的逻辑。请注意,您需要考虑工具提示功能还可以处理填充颜色和笔触颜色这一事实。
function highlightBar(s) {
// this clears off any tooltip highlights
myBarChart.update();
myBarChart.activeElements = [];
// reset any coloring because of selection
myBarChart.datasets.forEach(function(dataset) {
dataset.bars.forEach(function (bar) {
if (bar.selected) {
bar.fillColor = bar.selected.fillColor;
bar.strokeColor = bar.selected.strokeColor;
delete bar.selected;
}
})
});
var index = myBarChart.scale.xLabels.indexOf(this.value);
myBarChart.datasets.forEach(function (dataset) {
var selectedBar = dataset.bars[index];
// store the current values
selectedBar.selected = {
fillColor: selectedBar.fillColor,
strokeColor: selectedBar.strokeColor
}
// now set the color
selectedBar.fillColor = "red";
selectedBar.strokeColor = "red";
});
myBarChart.update();
}
但是,如果您没有启用工具提示,则会变得更加简单,并且您不需要上述某些逻辑。