Angular Google Charts: как установить разные цвета для столбцов в столбчатой ​​диаграмме

Question

Я использую Angular 9 + Google Charts через npm: 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>

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

каждая запись в массиве colors применяется к каждой серии в таблице данных.
таблица данных в примере имеет только одну серию или столбец оси Y.

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.

Answer 2

Ну, так как прямого решения не существует, выберите разные цвета для всех столбцов в angular -google-column-chart с красивыми цветными легендами. Я придумал обходной путь, чтобы получить желаемый результат, используя для этого столбчатую диаграмму.

TypeScript:

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 и оставьте значение только для соответствующего цвета, и вы получите красивую столбчатую диаграмму с легендами. Если у вас ограниченный объем данных, это будет отличным решением для вас.