Angular Google Charts：如何为柱形图中的列设置不同的颜色

Question

我通过 npm 使用 Angular 9 + Google Charts：npm install angular-google-charts

我想为柱形图中的所有列设置不同的颜色，但它为所有列设置第一种颜色。

有人遇到过这样的问题或者有任何解决方案来为谷歌柱形图中的列设置不同的颜色吗？

HTML：

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columns]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

打字稿：

export class ColumnChartComponent[![enter image description here][1]][1] {
  title = 'Population (in millions)';
  type = 'ColumnChart';
  data = [
     ["2012", 900],
     ["2013", 1000],
     ["2014", 1170],
     ["2015", 1250],
     ["2016", 1530]
  ];
  columnNames = ['Year', 'Asia'];

  // chart options in which I am setting colors
  options = {
    colors: ['#5cb85c', '#f0ad4e', '#d9534f', '#5bc0de', '#f6c7b6'],
  };

  width = 550;
  height = 400;
}

Answer 1

好吧，由于没有直接的解决方案，因此可以为 angular-google-column-chart 中的所有列获取不同的颜色，并带有漂亮的彩色图例。我想出了一个技巧兼解决方法，使用堆积柱形图来获得所需的结果来实现这一点。

打字稿：

title = 'Resources Status Overview';
  type = 'ColumnChart';

// => here is the trick. set single colored value for the column and rest to 0.
  data = [
    ["Ready", 500, 0, 0, 0],
    ["Pending", 0, 360, 0, 0],
    ["Deployed", 0, 0, 410, 0],
    ["Other", 0, 0, 0, 200],
  ];

  columnNames = ['Status', 'Ready', 'Pending', 'Deployed', 'Other'];

  options = {
    hAxis: {
      title: 'Status'
    },
    vAxis: {
      minValue: 0
    },
    isStacked: true,
    colors: ['#5cb85c', '#f0ad4e', '#d9534f', '#5bc0de']
  };

  width = 600;
  height = 400;

这是数据集的一个技巧。在堆叠列中，将其余颜色设置为 0，并仅保留匹配颜色的值，您将获得带有图例的漂亮柱形图。如果您的数据有限，那么这对您来说将是一个不错的解决方案。