角度Google图表：如何为柱形图中的列设置不同的颜色

Question

我正在通过npm使用Angular 9 + Google图表：npm install angular-google-charts

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

有人遇到过这样的问题吗，或者有没有解决办法为Google柱形图中的柱子设置不同的颜色？

HTML：

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

TypeScript：

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

data = [
   ["2012", 900],
   ["2013", 1000],
   ["2014", 1170],
   ["2015", 1250],
   ["2016", 1530]
];
columnNames = ['Year', 'Asia'];

为了使用colors选项使每个条形具有不同的颜色，每个值必须位于不同的数据表列中。

例如
data = [
   ['Asia', 900, 1000, 1170, 1250, 1530]
];
columnNames = ['Country', '2012', '2013', '2014', '2015', '2016'];

另一个选择是使用样式列角色。此选项可让您将颜色添加到数据表中，并为每个条分别上色，而无需多个系列。 
data = [
   ["2012", 900, '#5cb85c'],
   ["2013", 1000, '#f0ad4e'],
   ["2014", 1170, '#d9534f'],
   ["2015", 1250, '#5bc0de'],
   ["2016", 1530, '#f6c7b6']
];
columnNames = ['Year', 'Asia', {role: 'style', type: 'string'}];

使用样式角色的唯一缺点，图例将与颜色不匹配。它使用与colors选项相同的方法，并且只会显示一个系列，使用colors选项中的第一种颜色。