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