ChartJS加载时默认仅显示1条折线，其余隐藏的实现方法

这问题我之前也碰到过，ChartJS官方文档里确实没专门把这个场景拎出来讲，但其实有两种非常直接的方式可以实现，而且完全保留图例点击切换显示/隐藏的原生功能：

方法一：在数据集配置中直接设置hidden属性 #

ChartJS的数据集配置里自带了hidden属性，默认是false（显示状态），你只需要把需要默认隐藏的数据集的这个属性设为true即可。初始化完成后，这些数据集会处于隐藏状态，点击对应的图例就能切换显示。

示例代码：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            // 第一个数据集默认显示
            {
                label: '折线1',
                data: [12, 19, 3, 5, 2],
                borderColor: '#FF6384',
                tension: 0.1
            },
            // 以下数据集默认隐藏
            {
                label: '折线2',
                data: [6, 11, 8, 14, 9],
                borderColor: '#36A2EB',
                tension: 0.1,
                hidden: true // 关键配置
            },
            {
                label: '折线3',
                data: [23, 15, 17, 9, 12],
                borderColor: '#FFCE56',
                tension: 0.1,
                hidden: true
            },
            {
                label: '折线4',
                data: [8, 13, 21, 16, 7],
                borderColor: '#4BC0C0',
                tension: 0.1,
                hidden: true
            },
            {
                label: '折线5',
                data: [15, 7, 19, 11, 22],
                borderColor: '#9966FF',
                tension: 0.1,
                hidden: true
            }
        ]
    },
    options: {
        // 你的其他图表配置
    }
});

方法二：初始化后通过API动态设置隐藏状态 #

如果你的数据集是动态生成的，没法提前在配置里写hidden属性，可以在图表初始化完成后，通过ChartJS的实例API来修改数据集的显示状态，然后调用update()方法更新图表。

示例代码：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            // 这里是你的5个数据集，都不设置hidden
            { label: '折线1', data: [12,19,3,5,2], borderColor: '#FF6384' },
            { label: '折线2', data: [6,11,8,14,9], borderColor: '#36A2EB' },
            { label: '折线3', data: [23,15,17,9,12], borderColor: '#FFCE56' },
            { label: '折线4', data: [8,13,21,16,7], borderColor: '#4BC0C0' },
            { label: '折线5', data: [15,7,19,11,22], borderColor: '#9966FF' }
        ]
    },
    options: {
        // 你的其他图表配置
    }
});

// 初始化完成后，隐藏除了第一个（索引0）之外的所有数据集
for (let i = 1; i < myChart.data.datasets.length; i++) {
    myChart.getDatasetMeta(i).hidden = true;
}
// 更新图表使设置生效
myChart.update();

注意事项 #

• 这两种方法都完全兼容ChartJS的图例点击交互，点击隐藏的图例时，数据集会正常显示，再次点击会重新隐藏。
• 该功能在ChartJS v2.x及以上版本都支持，如果你用的是非常老旧的版本，建议先升级到稳定版。

内容的提问来源于stack exchange，提问作者Adders