时间戳

首页 > 解决方案 > 来自 chartjs-node-canvas 的黑色图表

javascript - 来自 chartjs-node-canvas 的黑色图表

问题描述

我在量角器测试（在 JavaScript 中）中使用 chartjs-node-canvas 库。但不知何故，我的图表完全是黑色的（很难说是黑色的，因为我只能看到正方形的白框，没有内容）。我做错了什么？

我把所有代码行都放在了 t afterAll 部分，因为我的 .json 是测量的结果。因为我通过 fs.readFileSync 导入了我的 .json，所以我将其解析为在我的配置下使用，例如：

 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);

但是效果一样。

标签： javascriptnode.jscanvaschartschart.js

解决方案

我从数据集中删除了数组并使用了没有 chartCallback 的 CanvasRenderService。此外，在 github 问题中提到黑色背景已得到解决。

推荐阅读