Question

我正在尝试使用chartjs-node包创建折线图。下面是代码。当我将数据集的数据作为一个小集合，如数据：[20,15,60,60,65,30,70]，它工作正常。但是，如果我将其更改为我想在下面的dataFirst数据集中填充的列表，我会收到错误“ReferenceError：CanvasGradient未定义”。我不明白原因。请帮忙。感谢。

public createChart(cData) {
    const chartNode = new chart(1000, 800);

    const dataFirst = {
        label: 'Heat Sink',
        data: cData,
        lineTension: 0.3,
        fill: false,
        borderColor: 'red',
        backgroundColor: 'transparent',
        pointBorderColor: 'red',
        pointBackgroundColor: 'lightgreen',
        pointRadius: 5,
        pointHoverRadius: 15,
        pointHitRadius: 30,
        pointBorderWidth: 2,
        pointStyle: 'rect',
    };

    const dataSecond = {
        label: 'TVK Channel 9',
        data: [20, 15, 60, 60, 65, 30, 70],
        lineTension: 0.3,
        fill: false,
        borderColor: 'purple',
        backgroundColor: 'transparent',
        pointBorderColor: 'purple',
        pointBackgroundColor: 'lightgreen',
        pointRadius: 5,
        pointHitRadius: 30,
        pointBorderWidth: 2,
    };

    const chartOptions = {
        legend: {
            display: true,
            position: 'top',
            labels: {
            boxWidth: 80,
            fontColor: 'black',
            },
        },
    };

    const speedData = {
        labels: ['0s', '10s', '20s', '30s', '40s', '50s', '60s'],
        datasets: [dataFirst, dataSecond],
    };

    const chartJsOptions = {
        type: 'line',
        data: speedData,
        options: chartOptions,
    };

Answer 1

我找到了解决方案。标签数量应与数据点数量相匹配。

Answer 2

在canvas中用于节点实现，您需要自己导出CanvasGradient类。根据此问题：https://github.com/Automattic/node-canvas/issues/990 您可以这样做：

["CanvasRenderingContext2D", "CanvasPattern", "CanvasGradient"].forEach(obj => {
  console.log(obj, canvas[obj])
  global[obj] = canvas[obj]
})

错误ReferenceError：未定义CanvasGradient

2 个答案: