解决ChartJS刷新页面时图表随机颜色变更的问题

我在使用ChartJS开发时，每次刷新页面都会生成新的随机颜色。希望生成随机颜色后将其固定，确保刷新或重载页面时颜色不再变化。

当前使用的随机颜色生成函数：

getRandomRgb() {
    var num = Math.round(0xffffff * Math.random());
 
    var r = num >> 16;
    var g = (num >> 8) & 255;
    var b = num & 255;
    return "rgb(" + r + ", " + g + ", " + b + ")";
}

使用该函数的代码片段：

this.currentResponseItems.forEach((x) => {
    x.Items.forEach((z) => {
        if (!colorMap[z.Description]) {
            colorMap[z.Description] = this.getRandomColor();
        }
        console.log(z.Description, " : ", colorMap[z.Description]);
        z["phaseId"] = x.Id;
        let zData = [];

        let number = array.indexOf(z.phaseId);
        if (z.Number != 0) {
            zData[number] = z.Number;

            this.barChartData.push({
                data: zData,
                stack: x.Id,
                label: z.Description,
                fill: false,
                grouped: true,
                idStatoAffiliazione: x.Id,
                channelID: z.Id,
                backgroundColor: colorMap[z.Description],
                hoverBackgroundColor: colorMap[z.Description],
                pointBackgroundColor: colorMap[z.Description],
                pointBorderColor:colorMap[z.Description],
                pointHoverBackgroundColor:colorMap[z.Description],
                pointHoverBorderColor: colorMap[z.Description],
            }); 

HTML中的ChartJS代码：

<div class="container-chart cursor-pointer" fxLayout="row" *ngIf="barChartData.length > 0" fxLayoutGap="20px">
    <canvas baseChart fxFlex="100" [chartType]="'horizontalBar'" [datasets]="barChartData" [options]="barChartOptions" [labels]="barChartLabels" [colors]="graphColors" ></canvas>
    <!-- <graph-legend fxFlex="20" [configs]="graphLegendConfig"></graph-legend> -->
</div>

解决方案：基于本地存储固定颜色映射 #

核心思路是把生成的colorMap存储到浏览器的localStorage中，页面加载时先读取本地存储的颜色映射，没有的话再生成新的随机颜色，这样刷新页面时就能复用之前的颜色。

步骤1：修改颜色映射的初始化逻辑 #

在生成颜色映射前，先尝试从localStorage读取已有的数据：

// 初始化colorMap，优先从localStorage读取
let colorMap = JSON.parse(localStorage.getItem('chartColorMap')) || {};

this.currentResponseItems.forEach((x) => {
    x.Items.forEach((z) => {
        if (!colorMap[z.Description]) {
            colorMap[z.Description] = this.getRandomRgb(); // 注意原代码函数名不一致，需统一为getRandomRgb
        }
        // ... 原有代码逻辑
    });
});

// 每次生成/更新颜色映射后，保存到localStorage
localStorage.setItem('chartColorMap', JSON.stringify(colorMap));

步骤2：统一函数调用名称 #

原代码中调用的this.getRandomColor()与定义的函数名getRandomRgb()不一致，需要修改为相同名称，避免报错。

步骤3：可选：添加颜色重置功能 #

如果需要允许用户重置颜色（比如新增了新的Description或手动刷新颜色），可以添加重置逻辑：

resetChartColors() {
    localStorage.removeItem('chartColorMap');
    // 调用你的图表初始化函数重新生成数据和颜色
    this.initChart();
}

注意事项 #

• localStorage存储的是字符串，必须用JSON.stringify和JSON.parse处理对象。
• 新增的Description会自动生成新颜色并保存，不影响已有项的颜色。
• 清除浏览器缓存或更换浏览器会丢失本地存储的颜色映射，若需跨设备保持颜色一致，需将颜色映射存储到后端数据库并通过接口读取。

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