Ng2-charts 条形图

Question

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

Answer 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"];

Answer 2

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

Ng2-charts 条形图

Ng2-charts Bar Chart

ng2-charts

angular