具有多个级别或类别的图表 Js 堆积条形图答案

【问题标题】：Chart Js Stacked Bar Chart with Multiple levels or categories具有多个级别或类别的图表 Js 堆积条形图
【发布时间】：2021-07-09 11:52:27
【问题描述】：

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

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

【问题讨论】：

将要堆叠的所有datasets 的stack 选项设置为相同的值。检查您链接的示例中的“设置”选项卡
@MatthiasSchmidt 谢谢，有道理，你知道他们是否有办法显示堆栈的标签吗？

标签： chart.js stacked-chart ng2-charts

【解决方案1】：

以下是我能够弄清楚的。此代码将允许在 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',
            type: 'category',
            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,0,9,0,4,0,5,8,0,0,0,0],
    "label": "firstPartOfBar",
    "stack": "dataStack",
    "backgroundColor": "red",
    "hoverBackgroundColor": "red",
    "xAxisID": "xAxis1"
  },
  {
    "data": [1,0,8,0,5,0,0,0,0,0,6,7],
    "label": "Second Part of Bar",
    "stack": "dataStack",
    "backgroundColor": "blue",
    "hoverBackgroundColor": "blue",
    "xAxisID": "xAxis1"
  },
  {
    "data": [4,0,2,0,1,0,0,0,12,14,16,0],
    "label": "Third Part of stack",
    "stack": "dataStack",
    "backgroundColor": "green",
    "hoverBackgroundColor": "green",
    "xAxisID": "xAxis1"
  }
]

【讨论】：