如何在ChartJS中突出显示在图例中选中的条形图?

vu8f3i0k  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(218)

我需要改变条形图的背景颜色,当我在图例中选择它时。当我用ci.update()更新图表时,颜色重置。

options: {
        plugins: {
            legend: {
                display: true,
                position: 'right',
                onClick: function (e, legendItem, legend) {
                    const index = legendItem.datasetIndex;
                    const ci = legend.chart;
                    const meta = ci.getDatasetMeta(index);
                    const element = meta.data[0];

                    if (!legendItem.checked) {
                        element.options.backgroundColor = 'rgba(255, 159, 64, 1)';
                        legendItem.lineWidth = 2;
                        legendItem.strokeStyle = 'rgba(0,0,0, 1)';
                        legendItem.checked = true;
                    } else {
                        legendItem.checked = false;
                    }

                    ci.update();
                }
            }
        }
    }
ulmd4ohb

ulmd4ohb1#

当调用chart.update()时,图表将从chart.data.datasets开始重新配置自身,所有元素选项(同时更改)都将丢失。必须更改chart.data.datasets。必须存储原始的backgroundColor,否则它们将丢失。
第一个

相关问题