首页 > 解决方案 > Angular:如何自定义 Canvas 条形图标签?

问题描述

我在底部尝试了短名称,在标签中尝试了全名

截屏

这是画布 .html 视图

<canvas baseChart
            [datasets]="chartDataSet"
            [labels]="shortName"
            [chartType]="chartType"
            [options]="options"
            [colors]="chartColors"
    >
    </canvas>

价值观

chartType = 'bar';

chartColors = [
        {backgroundColor: "#4CAF50"},{backgroundColor: "#A9D18E"},{backgroundColor: "#F48E95"}, 
        {backgroundColor: "#FCC400"}, {backgroundColor: "#FF5252"},{ backgroundColor: "#FFEB3B"}
 ];

shortName = ['HOD', 'CEO'];

fullName = ['Head of Department', 'Chief Executive Officer'];

chartDataSet = [
{data: [1, 4], label: 'Closed', stack: 'a'}
{data: [5, 7], label: 'Not Due', stack: 'a'}
{data: [6, 8], label: 'Target Date Revised', stack: 'a'}
{data: [9, 4], label: 'Due', stack: 'a'}
{data: [2, 5], label: 'Overdue', stack: 'a'}
{data: [1, 7], label: 'Under IA Review', stack: 'a'}
];

options = {
             responsive: true,
             scales: {xAxes: [{}], yAxes: [{}]},
             plugins: {
             datalabels: {
                 anchor: 'end',
                 align: 'end',
                }
            }
                

我们如何在 x 路径中使用短名称并在工具提示中使用全名?

标签: angularcanvas

解决方案


推荐阅读