我正在尝试实现 ChartJS Datalabels与 chartjs-node-canvas在 Node 中。 这是我当前的代码
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，尽管我已经在不使用该插件的情况下生成了 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>)
变量类型、数据、选项与接下来的代码相同。
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbcb7beadabb5acf2afb3aab8b6b1f2bbbeabbeb3bebdbab3ac9feff1e8f1ef" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
</body>最佳答案
显然3.X.X版本有几个添加插件的bug，我按照这个Issues完成了解决
import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
const canvas = new ChartJSNodeCanvas({
width: 700,
height: 400,
chartCallback: (ChartJS) => {
/** Add plugins here **/
ChartJS.register(require('chartjs-plugin-datalabels'))
}
});
关于javascript - 我怎样才能在chartjs-node-canvas中实现chartjs-plugin-datalabels？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68306594/