我正在尝试使用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]
})