柱形图中每列的 ng-谷歌图表自定义颜色

ng-google-chart custom color for each column in column chart

本文关键字:自定义 颜色 谷歌 ng- 柱形图      更新时间:2023-09-26

我正在使用ng-google-charts模块为我的角度应用程序构建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": {}
    };

添加样式列角色是为单个条形着色的最简单方法。

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

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
      }
    ]
  });
}

此答案显示了您可以使用的各种颜色定义。
仅供参考:此选项不适用于材质图表...