Ng2-charts 条形图答案

【问题标题】：Ng2-charts Bar ChartNg2-charts 条形图
【发布时间】：2021-04-25 03:49:00
【问题描述】：

我用 ng2 图表创建了一个条形图。 A1 内的每一列。我怎么能分开？你可以到这里https://stackblitz.com/edit/ng2-charts-bar-chart?file=src/app/app.component.ts

【问题讨论】：

【解决方案1】：

有两个选项，取决于您要显示的内容

选项 1 (working stackblitz)：数据点属于不同的元素（苹果、橙子、甜瓜）：

this.barChartData = [
  {
    data: [4900, 0, 0],
    label: "A1",
    backgroundColor: "rgba(180, 0, 0, 1)"
  },
  {
    data: [0, 5500, 0],
    label: "A2",
    backgroundColor: "rgba(33, 81, 255, 1)"
  },
  {
    data: [0, 0, 4800],
    label: "A3",
    backgroundColor: "rgba(255, 166, 0, 1)"
  }
];

this.barChartLabels = ["A1", "A2", "A3"];

选项 2 (working stackblitz)：所有三个数据点都属于同一类型的元素（苹果）：它们都应该出现在同一个数据数组中：

this.barChartData = [
    {
      data: [4900, 5500, 4800],
      backgroundColor: ["green", "pink", "yellow"]
    }
];

this.barChartLabels = ["A1", "A2", "A3"];

【讨论】：

我想做选项 1 你给了 0 我不想给 0 还有其他要显示吗？在我使用 chartJS 相同的图表和相同的方法之前，但我无法使用 ng2 获得相同的图表
只是想组团
有未定义的标签可以在标签上显示A1、A2和A3
不可能在同一组下
我明白了，谢谢还有其他方法吗？

【解决方案2】：

选项 2 有效，但我想解决一个标签问题，例如

【讨论】：