具有多个级别或类别的 Chart Js 堆叠条形图

如何解决具有多个级别或类别的 Chart Js 堆叠条形图

我正在尝试在 ng2-charts 中创建一个具有多个标签的图表，因此例如 x 访问将具有所有月份的类别，在此之上它将细分为每周，然后是条形部分可能是雨天、旱天和下雪天。

我在 https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html 处找到了他们的文档，并且他们的示例可以工作，但需要对其进行扩展以添加另一个级别，这可能吗？

解决方法

以下是我能够弄清楚的。此代码将允许创建一个图表，在 x 轴上有 3 个类别，每个类别分为 4 个类别。这不是完整的代码集，但应该希望让其他人知道如果他们被卡住了如何继续。

<canvas baseChart
  *ngIf="!loading"
  [datasets]="myChartData.chartData"
  [options]="barChartOptions"
  [legend]="barChartLegend"
  [chartType]="barChartType"
>
</canvas>

以下是用于根据api返回的数据设置条形图选项的代码

this.barChartOptions = {
      responsive: true,scales: {
        xAxes: [
          {
            id: 'xAxis1',type: 'category',labels: this.myChartData.xAxis1Labels,},{
            id: 'xAxis2',labels: this.myChartData.xAxis2Labels,offset: true
          },],yAxes: [
          {
            ticks: {
              beginAtZero: true,callback: function(value: number) {if (value % 1 === 0) {return value;}}
            }
          }
        ]
      },title: {
        display: true,text: this.myChartData.title,legend: {
        labels: {
          filter: function (item,chart) {
            return item.text !== undefined && item.text !== null;
          },tooltips: { enabled: false },hover: { mode: null },};

这是api返回的模型：

import { ChartData } from "chart.js";

export class myChartData {
  chartData: Array<ChartData>;
  rankXAxisLabels: Array<string>;
  namcXAxisLabels: Array<string>;
  title: string;
}

最后，这是 api 正在构建的 chartData 数组的格式：

[
  {
    "data": [1,9,4,5,8,0],"label": "firstPartOfBar","stack": "dataStack","backgroundColor": "red","hoverBackgroundColor": "red","xAxisID": "xAxis1"
  },{
    "data": [1,6,7],"label": "Second Part of Bar","backgroundColor": "blue","hoverBackgroundColor": "blue",{
    "data": [4,2,1,12,14,16,"label": "Third Part of stack","backgroundColor": "green","hoverBackgroundColor": "green","xAxisID": "xAxis1"
  }
]