如何基于标签为Chartist.js饼图设置固定颜色？

要实现按标签为饼图扇区绑定固定颜色，你需要修改两个核心部分：定义标签与颜色的映射规则，以及在Chartist的配置中添加动态匹配颜色的回调逻辑。

具体修改步骤 #

1. 先创建一个标签-颜色映射对象，为每个需要固定颜色的标签指定对应的颜色值（支持十六进制、RGB、标准颜色名称）
2. 在options配置项中添加series.color回调函数，通过系列索引关联标签，从映射表中取出对应颜色

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Chartist.js 自定义标签饼图</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>
<body>
    <div class="ct-chart ct-perfect-fourth" id="pie-chart"></div>

    <script>
        // 定义标签与固定颜色的映射表
        const labelColorMap = {
            'Label 1': '#ff4757',
            'Label 2': '#2ed573',
            'Label 3': '#1e90ff'
        };

        // 原始数据保持不变
        var data = {
            labels: ['Label 1', 'Label 2', 'Label 3'],
            series: [20, 30, 50]
        };

        // 配置项新增颜色匹配逻辑
        var options = {
            width: 300,
            height: 300,
            // 通过回调根据标签匹配对应颜色
            series: {
                color: function(series, seriesIndex) {
                    const currentLabel = data.labels[seriesIndex];
                    // 匹配不到颜色时用默认灰色兜底
                    return labelColorMap[currentLabel] || '#95a5a6';
                }
            }
        };

        // 初始化饼图
        new Chartist.Pie('#pie-chart', data, options);
    </script>
</body>
</html>

关键说明 #

• labelColorMap：可根据实际需求自由修改标签对应的颜色值，确保每个标签与颜色一一对应
• series.color回调：通过系列索引关联到对应的标签，再从映射表中获取颜色，即使后续数据顺序调整，标签对应的颜色也不会改变
• 兜底颜色：如果出现未在映射表中定义的标签，会自动使用默认灰色，避免样式异常

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