祝大家一周愉快
我想知道你是否能帮助我,我正在使用Chartjs从服务器端应用图表在报告中,并从前端调用它们。
我正在使用的技术是用typescript和express开发的nodejs节点,我正在使用HTML模板的handlebar,集成Chartjs,因为除了免费之外,它在社区中也是强烈推荐的,但是现在我在实现方面遇到了一些问题
为了更好地集成来自服务器的图表,我使用chartjs-node-canvas并通过库生成图像,一旦我有了图像,我就把它传递给我的模板
所以我想添加子标签来分组信息,添加多级类别标签,但是当我想在插件中使用钩子时,它抛出了以下错误
image1 of the error
如何正确访问Chartjs插件挂钩?
最后,我想实现这样的目标:
example of the expected result
我留下的代码配置了我的图形,任何类型的帮助都将不胜感激,我是新来的社区,我希望我写的问题正确。非常感谢大家
import {
ChartJSNodeCanvas
} from "chartjs-node-canvas";
const canvasRenderService = new ChartJSNodeCanvas({
width: 1100,
height: 700,
chartCallback: (ChartJS) => {
ChartJS.register(require('chartjs-plugin-datalabels'))
}
});
const mkChart = await canvasRenderService.renderToBuffer({
type: 'bar',
data: {
labels: labels,
datasets: [{
type: 'line',
label: '% ACTIVITY',
backgroundColor: '#FF7605',
borderColor: '#FF7605',
data: lineBar,
datalabels: {
anchor: 'start',
align: 'center',
clamp: true,
backgroundColor: '#FF7605',
color: 'white',
font: {
weight: 'bold'
}
}
},
{
type: 'bar',
label: 'WEEKLY SUMMARY OF HOURS',
backgroundColor: '#222A35',
borderColor: '#222A35',
data: barHorizontal,
datalabels: {
rotation: 270,
padding: 10
}
},
{
type: 'bar',
label: 'HOURS',
backgroundColor: '#008582',
borderColor: '#008582',
data: colbWeekly,
datalabels: {
anchor: 'end',
align: 'top',
clamp: true,
backgroundColor: '#008582',
color: 'white',
font: {
weight: 'bold'
}
}
}
]
},
options: {
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
},
title: {
display: true,
text: 'AVERAGE WEEKLY HOURS'
},
afterDatasetsDraw(chart, args, pluginOptions) {
const {
ctx,
chartArea: {
left,
right,
top,
bottom,
width,
height
}
} = chart;
ctx.save();
ctx.font = 'bolder 12px sans-serif';
ctx.fillStyle = 'rgba(102, 102, 102, 1)';
ctx.textAlign = 'center';
ctx.fillText('WEEK 1', width / 4 + left, bottom + 30)
}
},
elements: {
line: {
fill: false
}
},
scales: {
xAxis: {
stacked: true,
ticks: {
minRotation: 90
},
grid: {
display: false
}
}
}
}
});
1条答案
按热度按时间sf6xfgos1#
你不能访问插件挂钩从一个特定的插件在该插件的配置,你将需要创建自己的自定义插件,并在插件本身,你可以访问所有的挂钩:
第一个