Рисование нескольких диаграмм chart.js (nodejs) - PullRequest
1 голос
/ 21 июня 2019

Я реализую внутреннее приложение, которое создает несколько диаграмм с помощью библиотеки 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;
}

1 Ответ

0 голосов
/ 21 июня 2019

Вы можете попробовать с мелкой копией 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...