ChartJS 正在取消刷新时更改颜色

qyzbxkaa 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(145)

我正在使用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>

chart.js

来源：https://stackoverflow.com/questions/73631992/canceling-changing-color-on-refresh

2条答案

按热度按时间

aiazj4mn1#

我假设colorMap是您的数组，其中包含所有颜色，您应该将该数组保存在localStorage中，但您应该先将其字符串化，然后将if语句更改为如下形式

// save into local storage use this when your array is completly generated
localStorage.setItem("colorMap", JSON.stringify(colorMap));

您的语句应该如下所示

//check if there is colors saved in localStorage 
if(!localStorage.getItem("colorMap")){
  // generate new random values
} else { 
  // retrieve your saved array from local storage
  colorMap = JSON.parse(localStorage.getItem("colorMap"));
}

赞(0）回复(0）举报 2022-11-06

50few1ms2#

如果你想在不使用服务器的情况下保持刷新时的颜色，你必须将它存储在用户的浏览器中。例如，你可以通过将它存储在localStorage中来实现这一点。使用这个函数，你的函数看起来像这样：

function getRandomRgb(colorId) {
    if (localStorage.hasOwnProperty(`randomRgb-${colorId}`)) return localStorage.getItem(`randomRgb-${colorId}`)

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

    localStorage.setItem(`randomRgb-${colorId}`, randomRgb)
    return randomRgb
}

要为示例中的某个colorId生成颜色，可以执行以下操作：

getRandomRgb(colorMap[z.Description])

另一种方法是将整个colorMap存储在localStorage中，而不是存储特定的颜色。

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 正在取消刷新时更改颜色

2条答案

相关问题

热门标签

最新问答