Chartjs图表更新后使用相同颜色绘制

Question

当前我正在尝试以编程方式为股票报告网站创建多个图表。我有一个配置是这样定义的..

let chartConfig = { 
     // The type of chart we want to create 
     type: "line", 
     // The data for our dataset 
     data: { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [{ 
       label: "Test", 
       //default colour 
       borderColor: "rgb(255, 99, 132)", 
       data: [], 
       fill: false 
      }] 
     }, 
     // Configuration options go here 
     options: { 
      responsive: true, 
      //Don't want to be able to remove the data. 
      legend: {onClick: (e) => e.stopPropagation()} 
     } 
    }; 

然后我创建一个图表数组，然后可以稍后更新。

let chartArray = []; 
let chartIds = []; 
for(let context of document.getElementsByTagName("canvas")){ 
    let drawingContext = context.getContext("2d"); 
    let ticker = drawingContext.canvas.id; 
    let localConfig = chartConfig; 
    localConfig.data.datasets[0].borderColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
    chartArray.push({ticker: ticker, chart: new Chart(drawingContext, localConfig)}); 
    chartIds.push(ticker); 
} 

每个图表应该具有与它相关联的随机颜色，但是图表最终被完全相同的颜色。

这里也是图表的更新代码。

socket.on("my_response", function(msg) { 
    for(let packet of msg){ 
     addData(chartArray.find(chart => chart.ticker === packet.ticker).chart, packet.ticker, packet.data) 
    } 
}); 

function addData(chart, label, data) { 
    console.log(chart); 
    chart.data.datasets[0].label = label; 
    chart.data.datasets.forEach((dataset) => { 
     dataset.data = data 
    }); 
    chart.update(); 
} 

Answer 1

当您使用

let localConfig = chartConfig; 

在JavaScript中你没有得到的对象的副本。这两个值都将指向相同的参考。当你改变一个原始的也会发生变异。

尝试

let localConfig = JSON.parse(JSON.stringify(chartConfig)); 

为不同的可能性见this question到深克隆一个JavaScript对象。

Answer 2

您可以尝试动态地创建一组颜色。 检查它chartjs creating data array dynamically