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));

有关深度克隆 javascript对象的不同可能性，请参阅this question。

Answer 2

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

Chartjs图表在更新后以相同的颜色绘制

2 个答案: