我正在尝试在节点中使用chartjs节点画布实现chartjs数据标签。这是我当前的代码
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartJSNodeCanvas } from 'chartjs-node-canvas'
public async generateChart(width: number, height: number, type: string = 'bar', data, options): Promise<Buffer> {
const chartCallback = (ChartJS) => {
ChartJS.plugins.register(ChartDataLabels);
};
const chartJSNodeCanvas: ChartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback})
const configuration: any =
{
type: type,
data: data,
options: options
};
const image = await chartJSNodeCanvas.renderToBuffer(configuration);
return image
}虽然我没有找到一个最佳的解决方案，但我已经尝试了各种方法
// Option 1
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
requireLegacy: ['chartjs-plugin-datalabels']
} });
// Option 2
const chartCallback = (ChartJS) => {
ChartJS.plugins.register(ChartDataLabels);
};
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback });但是我无法生成带有datalabels的pdf，尽管我没有使用插件生成它。错误是
System.Private.CoreLib: Exception while executing function: Functions.test1. System.Private.CoreLib: Result: Failure
Exception: TypeError: Cannot read property 'register' of undefined
Stack: TypeError: Cannot read property 'register' of undefined
at ChartJSNodeCanvas.initialize (C:\project\node_modules\chartjs-node-canvas\dist\new.js:172:33)
at new ChartJSNodeCanvas (C:\project\node_modules\chartjs-node-canvas\dist\new.js:27:30)
at ReportLpi.<anonymous> (C:\project\dist\src\services\report_lpi.js:1121:39)
at Generator.next (<anonymous>)变量 type, data, options 与下一个代码相同。
var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
type: "bar",
data: {
labels: ["a", "b", "c", "d", "e", "f"],
datasets: [
{
type: "bar",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
label: "promedio",
order: 1,
data: [60, 49, 72, 90, 100, 60],
datalabels: {
align: 'end',
anchor: 'end'
}
},
{
type: "bar",
backgroundColor: "orange",
borderColor: "orange",
borderWidth: 1,
label: "promedio",
order: 1,
data: [40, 5, 20, 30, 10, 6],
datalabels: {
align: 'end',
anchor: 'end'
}
},
{
type: "line",
label: "casos",
data: [25, 13, 30, 35, 25, 40],
lineTension: 0,
backgroundColor: "red",
borderColor: "red",
order: 0,
fill: false,
datalabels: {
align: 'end',
anchor: 'end'
}
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
font: {
weight: 'bold'
},
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
</body>
1条答案
按热度按时间kiayqfof1#
显然版本3.x.x有几个bug需要添加插件，我通过以下问题完成了解决