我有一个使用 ChartJSNodeCanvas 创建图表的 nodejs 服务器函数。我用它来创建几个图表,然后放入 pdf 文件中。 我要求将值放在条形图条的顶部(如第一张图片示例所示)。为此,我正在使用 chartjs-plugin-datalabels。第一张图表完全按照预期工作,但从第二张图表开始,结果是错误的,如第二张图片示例所示。我试图改变很多选项,在网上做了很多研究,但我找不到解决方案。
这里是我的代码
const { ChartJSNodeCanvas } = require('chartjs-node-canvas')
const canvas = require('canvas'); // point
const ChartDataLabels = require('chartjs-plugin-datalabels');
export async function createPlot(dataset) {
const width = dataset.isByGroup ? 500 : 680
const height = dataset.isByGroup ? 280 : 200
const chartJSNodeCanvas = new ChartJSNodeCanvas({
width: width,
height: height,
chartCallback: (ChartJS) => {
ChartJS.defaults.font.family = 'NotoSansJP-Black';
ChartJS.register(ChartDataLabels)
}
});
chartJSNodeCanvas.registerFont(__dirname + '/fonts/NotoSansJP-Black.otf', { family: 'NotoSansJP-Black' });
....
dataset.rows.forEach((row, i) => {
let rowDatasets = {
label: row,
backgroundColor: colors[i],
borderColor: colors[i],
borderWidth: 1,
maxBarThickness: 20,
data: dataset.values[i]
}
datasets.push(rowDatasets)
})
const configuration = {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels: dataset.keywords,
datasets: datasets
},
options: {
devicePixelRatio: 3,
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
labels: {
value: {
font: {
size: 8,
lineHeight: 1
},
color: 'black'
}
}
},
title: {
display: true,
text: dataset.title,
font: {
size: 8,
}
},
legend: {
position: 'bottom',
display: !dataset.isByGroup,
labels: {
color: 'black',
boxWidth: 5,
boxHeight: 5,
font: {
size: 10
}
}
}
},
scales: {
x: {
ticks: {
color: '#2f2f2f',
font: {
size: 7
}
}
},
y: {
min: 0,
max: max,
ticks: {
stepSize: 1,
color: '#2f2f2f',
font: {
size: 7
}
}
}
}
},
}
const image = await chartJSNodeCanvas.renderToBuffer(configuration)
return `data:image/png;base64,${image.toString('base64')}`
}
有人知道吗?
第一张图表:预期结果(我只在第一张图表上做对)
第二张图表:第一次创建图表后我得到了什么