Html 如何使用Chartjs突出显示条形图中的单个条形图

在一个html页面中，我有一个选择菜单（a、b、c、d）和一个条形图（a、b、c、d）。我要做的是突出显示在“选择”菜单中选择的条形图中的相应条形图。

您可以将逻辑附加到onchange处理程序

document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect"));

如果您想以编程方式调用它（比如，如果您设置了初始值）

下面是突出显示条形图的逻辑。请注意，您需要考虑工具提示功能还处理填充颜色和笔划颜色的事实。

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();
}

但是，如果您没有启用工具提示，它会变得简单得多，并且您不需要上面的一些逻辑

---

---

工作小提琴-

突出显示是指使其颜色与其他颜色不同吗？如果是这样的话，你可以这样做：这取决于你是如何生成图表的，如果你共享了一些有用的代码。但我会将图表中标签的位置与菜单匹配，然后单击，找到菜单项在单击时的位置，然后在相同位置的条形图上填充颜色。请更新到Chartjs库的链接（JSFIDLE上的404）。我猜一定是这样

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();
}