在chart.js條形圖中，如何標記類別中的每個條形圖？

Question

如何為chart.js條形圖標記類別中的每個條形圖？

我有1個類別，該類別中有2個欄。 我在條形圖上使用漸變，這些只能應用於單個類別中的條形。

options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    callback: (value, index, values) => {
                        console.log(value, index, values);
                    }
                }
            }]
        }
}

let ctx = this.bar.nativeElement.getContext('2d');

    let grad1 = ctx.createLinearGradient(0, 0, 0, 200);
    grad1.addColorStop(0, 'rgb(105,130,231)');
    grad1.addColorStop(1, 'rgb(125,222,238)');

    let grad2 = ctx.createLinearGradient(0, 0, 0, 200);
    grad2.addColorStop(0, 'rgb(233,105,210)');
    grad2.addColorStop(1, 'rgb(247,126,151)');

    this.barColors.push({backgroundColor: grad1, hoverBackgroundColor: grad1});
    this.barColors.push({backgroundColor: grad2, hoverBackgroundColor: grad2});

HTML：

<canvas #bar baseChart
        [datasets]="plotData"
        [labels]="l"
        [options]="options"
        chartType="bar"
        [colors]="barColors"
        (chartClick)="chartClicked($event)">
</canvas>

Answer 1

1）為類別中的每個條形為類別2）中的每個子類別設置2個標簽，如果它與標簽位置匹配則添加值，然后將0添加到與標簽位置不匹配的替代子類別的值

這將生成一個條形圖，其中每個類別只有1個該子類別唯一的顏色漸變。

您可能需要調整條形大小，因為我只有2個子類別，我設置

scales: {
        xAxes: [{
            barPercentage: 8,
            categoryPercentage: 0.1
        }]
    }
}

並且它與類別標簽一致，對我來說足夠緊密。