错误参考:未定义canvasgradient



我正在尝试使用ChartJS节点软件包创建线路图。以下是代码。当我将数据集的数据作为一个小集合(例如数据(时:[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,
    };

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

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

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

最新更新