将X轴标签分组到ChartJS的多行上,并添加一个额外的维

zujrkrfu  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(158)

请帮帮我
下面的图表显示了每个用户所属的不同区域
我想知道是否有一种方法可以按“用户角色”对信息进行分组,并且在分组后,在“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
                    }
                }
            }
        }

    });

演示版

第一个

bfrts1fy

bfrts1fy1#

为了对信息进行分组,最后我所做的唯一一件事就是为我的余额分配一个AxisID,以便能够对它们进行绘制,从而使用线来分隔我的信息并添加子标签
第一个

相关问题