绘制多个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;
}