如何在ChartJS中增加条形图标签的可用颜色数量

方案1：修正动态颜色生成代码 #

你注释里写的动态生成逻辑本身是可行的，只需要调整为合法的字符串格式即可。用分类索引i作为颜色计算的固定参数，能保证同一分类的条形跨所有月份颜色一致，不会出现全月份颜色错乱的问题：

function build_stats_dataset() {
    var dt = []
    for (var i = 0; i < graph_data["labels"].length; i++) {
        dt.push(
            {
                label: graph_datasets["labels"][i], // column name
                data: graph_datasets["data_by_month"][i], // data in that column
                fill: false,
                // 透明度可按需调整，0.7辨识度更高
                backgroundColor: `rgba(${15 * i}, ${80 + 10 * i}, ${160 + 15 * i}, 0.7)`
            }
        )
    }
    return dt;
}

方案2：预定义配色池（颜色效果更可控） #

如果担心动态生成的颜色饱和度、明暗度不合适，可提前定义17种以上的配色数组，直接按索引取值即可，后续新增分类也能自动适配：

// 可按需增删修改配色，17种以上即可覆盖你的需求
const colorPool = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
    '#DDA0DD', '#FF8C00', '#98FB98', '#BA55D3', '#4682B4',
    '#F08080', '#3CB371', '#FFB6C1', '#20B2AA', '#87CEFA',
    '#778899', '#FFD700'
]

function build_stats_dataset() {
    var dt = []
    for (var i = 0; i < graph_data["labels"].length; i++) {
        dt.push(
            {
                label: graph_datasets["labels"][i],
                data: graph_datasets["data_by_month"][i],
                fill: false,
                backgroundColor: colorPool[i % colorPool.length]
            }
        )
    }
    return dt;
}

之前修改配置后所有月份条形颜色都变化，是因为你没有用分类索引作为固定的颜色取值依据，或是把颜色配置写到了图表全局配置而非每个dataset的独立配置中，上述两种方案都可以避免这个问题。

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