javascript - ng-google-chart 柱形图中每列的自定义颜色

Question

我正在使用 ng-google-charts 模块为我的 Angular 应用程序构建 google 图表，我想做的是绘制柱形图。

代码工作正常，图表似乎绘制正确，但我不知道如何在生成的行中添加颜色，以便每列的颜色不同。

这是我的代码，查看谷歌图表文档，似乎我应该能够为每一列分配一个十六进制代码，但我见过的所有示例都没有使用 Angular ，并且没有一个将其行构建为文字对象，例如我需要做。

var collsArray = [];
    var rowsArray = [];

    for (var i = 0; i < vm.projects.length ; i++) {
        //this is where I build each data row and where I think I need to add the color
        rowsArray.push({
             "c": [
                {
                    "v": vm.projects[i].name
                },
                {
                    "v": vm.projects[i].developers,
                    "f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name
                }]
        });

    }
    collsArray = [{id: 'project', label: 'Project', type: 'string'},
           {id: 'developers', label: 'Developers working', type: 'number'}];

    vm.chartProjects = {
          "type": "ColumnChart",
          "displayed": false,
          "data": {
            "cols": collsArray,
            "rows": rowsArray
          },
          "options": {
            "isStacked": "true",
            "fill": 0,
            "width": '100%',
            "height": '100%',
            "displayExactValues": true,
            "chartArea": {
                "left": "1%",
                "top": "1%",
                "height": "98%",
                "width": "98%"
            }
          },
          "formatters": {},
          "view": {}
    };

Answer 1

添加Style Column Role是为单个条形着色的最简单方法。

你可以尝试这样的事情......

var colorPallette = [
  '#7B241C', '#CB4335', '#FF9900', 'Gold', '#28B463',
  '#196F3D', '#0D47A1', '#29B6F6', 'Indigo', 'Violet'
];

var collsArray = [];
var rowsArray = [];

collsArray = [
  {id: 'project', label: 'Project', type: 'string'},
  {id: 'developers', label: 'Developers working', type: 'number'},
  {role: 'style', type: 'string'}  // style column
];

var colorIndex = -1;
for (var i = 0; i < vm.projects.length ; i++) {
  // manage color pallette
  colorIndex++;
  if (colorIndex === colorPallette.length) {
    colorIndex = 0;
  }
  rowsArray.push({
    "c": [
      {
        "v": vm.projects[i].name
      },
      {
        "v": vm.projects[i].developers,
        "f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name
      },
      {
        "v": colorPallette[colorIndex]  // style column
      }
    ]
  });
}

This answer显示您可以使用的各种颜色定义。
仅供引用:此选项不适用于 Material 图表...