Черная диаграмма от chartjs-node-canvas - PullRequest
Новая
       23

Черная диаграмма от chartjs-node-canvas

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

Я использую библиотеку chartjs-node-canvas в тесте транспортира (в JavaScript). Но почему-то мой график полностью черный (трудно сказать черный, потому что я вижу только белую рамку квадрата без содержания). Что я сделал не так?

Все строки кода, которые я поставил после каждой детали, потому что мой .json - результат измерения. Поскольку я импортировал свой .json через fs.readFileSync, я проанализировал его для использования в моей конфигурации, например: 

 const getJson = fs.readFileSync(`file.json`);
 const json = JSON.parse(getJson);
const labels = json.map(function(item) {
        return item.a;
    });    
const data = json.map(function(item) {
        return item.b;
    });
const configuration = {
      type: 'line',
      data: {
        labels: [labels],
        datasets: [{
          label: 'AAA',
          data: [data],
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          }]
      },
    };
const chartCallback = (Chart) => {
    Chart.defaults.global.hover.mode = "nearest";
    Chart.defaults.global.defaultFontFamily = 'VTKS UNAMOUR';
  };

Мои данные в порядке, так как в качестве данных и метки я получаю массивы значений. И наконец я использовал это: 

const canvasRenderService = new CanvasRenderService(width, height, chartCallback);
const image = canvasRenderService.renderToBufferSync(configuration );
fs.writeFileSync(`chart.png`, image);

Что я сделал не так? png был создан как пустая страница с рамкой из квадрата.

PS в соответствии с https://github.com/SeanSobey/ChartjsNodeCanvas/issues/9 Я пытался с 

const chartjs = require('chart.js');
const canvasRenderService = new CanvasRenderService(width, height, undefined, undefined, () => chartjs);

Но тот же эффект.

1 Ответ

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

Я удалил массивы из наборов данных и использовал CanvasRenderService без chartCallback.Кроме того, черный фон был решен с помощью упомянутого в выпуске github.

...