繪制多個chart.js圖表​​（nodejs）

Question

我正在實現一個后端應用程序，該應用程序使用chart.js庫創建多個圖表，然后將其存儲為PNG格式。 我正在為在for循環中創建多個圖表而解決一個問題。 在for循環內，應用程序首先創建一個新圖表，然后設置其屬性，然后調用createChart（）函數繪制該圖表。 該過程完成后，我將調用chartNode.destroy（）來清理新圖表的所有引用。

我原本希望繪制12個不同的圖表，但是卻繪制了12個相同的圖表。 應用程序僅繪制一個圖表，該圖表位於textData.charts數組的最后一個索引處。

任何意見，將不勝感激。

function createCharts() {
  let i = 0;
  textData.charts.forEach(graf => {
    const chartNode = new ChartjsNode(600, 600);
    setChartProperties(graf, dataResult[i]);
    createChart(graf, chartNode).then(() => {
        chartNode.destroy();
    });
    i++;
  })
}

function createChart(graf, chartNode) {
    return chartNode.drawChart(graph).then(() => {
      return chartNode.getImageBuffer('image/png');
    }).then(buffer => {
      Array.isArray(buffer)
      return chartNode.getImageStream('image/png');
    }).then(streamResult => {
      streamResult.stream
      streamResult.length
      return chartNode.writeImageToFile('image/png', './results/' + graf.filename);
    });
}

 function setChartProperties(graf, data) { graph.data.datasets[0].data = data; graph.options.title.text = graf.name; graph.data.labels = graf.labels; graph.data.datasets[1].data = graf.limits; graph.data.datasets[2].data = graf.limits; graph.data.datasets[1].backgroundColor = graf.color1; graph.data.datasets[2].backgroundColor = graf.color2; graph.data.datasets[1].borderColor = graf.color1; graph.data.datasets[2].borderColor = graf.color2; graph.data.datasets[1].label = graf.label1; graph.data.datasets[2].label = graf.label2; } 

Answer 1

你可以用一個淺拷貝試圖graph每個圖表構造。 如果那不起作用，請告訴我，我們將嘗試其他方法。

我添加了稱為graph參數，以使更改的內容盡可能少。

function createCharts() {
  let i = 0;
  textData.charts.forEach(graf => {
    const chartNode = new ChartjsNode(600, 600);
    const chartGraph = Object.assign({}, graph);
    setChartProperties(chartGraph, graf, dataResult[i]);
    createChart(chartGraph, graf, chartNode).then(() => {
        chartNode.destroy();
    });
    i++;
  })
}

function createChart(graph, graf, chartNode) {
    return chartNode.drawChart(graph).then(() => {
      return chartNode.getImageBuffer('image/png');
    }).then(buffer => {
      Array.isArray(buffer)
      return chartNode.getImageStream('image/png');
    }).then(streamResult => {
      streamResult.stream
      streamResult.length
      return chartNode.writeImageToFile('image/png', './results/' + graf.filename);
    });
}

function setChartProperties(graph, graf, data) {
  graph.data.datasets[0].data = data;
  graph.options.title.text = graf.name;
  graph.data.labels = graf.labels;
  graph.data.datasets[1].data = graf.limits;
  graph.data.datasets[2].data = graf.limits;
  graph.data.datasets[1].backgroundColor = graf.color1;
  graph.data.datasets[2].backgroundColor = graf.color2;
  graph.data.datasets[1].borderColor = graf.color1;
  graph.data.datasets[2].borderColor = graf.color2;
  graph.data.datasets[1].label = graf.label1;
  graph.data.datasets[2].label = graf.label2;
}