请帮帮我
下面的图表显示了每个用户所属的不同区域
我想知道是否有一种方法可以按“用户角色”对信息进行分组,并且在分组后,在“x”轴上用一条线将其分开
我很困惑,因为根据这个问题Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension中的公认答案,假设是否有可能做到这一点
但根据社区的其他回答,这是不可能的chartj
如何使它成为可能?它被称为多级分类标签
所以我希望能够修改X-Scale中的标签网格,通过一条线分隔区域,并添加一个子标签。类似于:
我留下了json和我的图表代码,我使用charjs-node-canvas来配置它,使用chartjs-plugin-datalabels来修改我的图表标签。
const canvasRenderService = new ChartJSNodeCanvas({
width: 1000,
height: 650,
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'
}
},
elements: {
line: {
fill: false
}
},
scales: {
x: {
stacked: true,
ticks: {
minRotation: 90
},
grid: {
display: false
}
}
}
}
});
演示版
第一个
1条答案
按热度按时间bfrts1fy1#
为了对信息进行分组,最后我所做的唯一一件事就是为我的余额分配一个AxisID,以便能够对它们进行绘制,从而使用线来分隔我的信息并添加子标签
第一个