Chartjs 最初对隐藏的 LegendItems 做出反应

Question

如何在所有

{hidden:true}

上设置

LegendItem

？如果我将隐藏属性设置为 true，图例项只会被删除线，但图表仍会显示。有任何想法吗？ 谢谢！

我已经尝试过这个：

const options = {
    responsive: true,
    plugins: {
        legend: {
            display: datasets.length > 1, // display legend if multiple datasets provided
            labels: {
                generateLabels: (chart) => {
                    return datasets.map((dataset, i) => {
                        return {
                            text: dataset.label,
                            hidden: true,
                        };
                    })
                }
            }
        },
        annotation: {
            annotations: []
        }
    },
    scale: {
        ticks: {
            precision: 0
        }
    }
};

Answer 1

在 Chart.js 中隐藏（或显示）数据集的标准方法是使用

chart.setDatasetVisibility

。 要隐藏所有数据集，您可以使用：

chart.data.datasets.forEach((_, i) => chart.setDatasetVisibility(i, false));
chart.update();

现场片段：

const data = {
    labels: ['2024', '2025', '2026', '2027'],
    datasets: [
        {
            label: 'Dataset 1',
            data: Array.from({length: 4}, () => 10 +  Math.random() * 10)
        },
        {
            label: 'Dataset 2',
            data: Array.from({length: 4}, () => 10 + Math.random() * 10)
        }
    ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: data.datasets.length > 1, // display legend if multiple datasets provided
            }
        },
    },
};

const chart = new Chart(document.querySelector('#myChart'), config);
chart.data.datasets.forEach((_, i) => chart.setDatasetVisibility(i, false));
chart.update();

<div style="min-height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

除了没有做你期望的事情之外，

generateLabels

还有一个缺点，那就是它需要 其他属性 被定义为;仅使用

text

和

hidden

，它不会显示数据集的颜色和样式，也不会 除非您定义自定义 onclick 处理程序，否则它会隐藏/显示数据集吗？