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