自定义Google Gantt图表中的条形颜色 [英] Customize the bar colors in Google Gantt Charts

问题描述

这应该很简单。如何为 Google甘特图中的条形分配自己的颜色？甘特图忽略了我的颜色，并自动将蓝色，红色和黄色（按此顺序）分配给条形图，我似乎无法找出问题所在。有人可以指出我是否在这里丢失某物，或者这时根本不支持它吗？

This should be simple. How can I assign my own colors to the bars in Google Gantt Charts? The gantt is ignoring my colors and automatically assigning blue, red and yellow colors (in that order) to the bars and I can't seem to figure out the problem. Can someone please point out if I am missing something here or is it not supported at all at this time?

这里是我所拥有的：

function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn({ type: 'string', id: 'task_id' }, 'Task ID');
      data.addColumn({ type: 'string', id: 'task_name' }, 'Task Name');
      data.addColumn({ type: 'string', id: 'resource' }, 'Resource');
      data.addColumn({ type: 'date', id: 'start_date' }, 'Start Date');
      data.addColumn({ type: 'date', id: 'end_date' }, 'End Date');
      data.addColumn({ type: 'number', id: 'duration' }, 'Duration');
      data.addColumn({ type: 'number', id: 'percent_complete' }, 'Percent Complete');
      data.addColumn({ type: 'string', id: 'dependencies' }, 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);


      var colors = [];
      var colorMap = {
          write: '#e63b6f',
          complete: '#19c362'
      }
      for (var i = 0; i < data.getNumberOfRows(); i++) {
          colors.push(colorMap[data.getValue(i, 2)]);
      }

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          },
          colors: colors
        };

        var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

推荐答案

有一个选项 gantt.palette ，它接收对象数组。

There is an optiongantt.palette which takes an array of objects.

var options = {
  gantt: {
    palette: [
      {
        "color": "#cccccc",
        "dark": "#333333",
        "light": "#eeeeee"
      }
    ]
  }
}

通过提供自己的对象数组，您可以覆盖默认调色板。

By providing your own array of objects, you can override the default palette.

这是图表使用的默认调色板：

[
  {
    "color": "#5e97f6",
    "dark": "#2a56c6",
    "light": "#c6dafc"
  },
  {
    "color": "#db4437",
    "dark": "#a52714",
    "light": "#f4c7c3"
  },
  {
    "color": "#f2a600",
    "dark": "#ee8100",
    "light": "#fce8b2"
  },
  {
    "color": "#0f9d58",
    "dark": "#0b8043",
    "light": "#b7e1cd"
  },
  {
    "color": "#ab47bc",
    "dark": "#6a1b9a",
    "light": "#e1bee7"
  },
  {
    "color": "#00acc1",
    "dark": "#00838f",
    "light": "#b2ebf2"
  },
  {
    "color": "#ff7043",
    "dark": "#e64a19",
    "light": "#ffccbc"
  },
  {
    "color": "#9e9d24",
    "dark": "#827717",
    "light": "#f0f4c3"
  },
  {
    "color": "#5c6bc0",
    "dark": "#3949ab",
    "light": "#c5cae9"
  },
  {
    "color": "#f06292",
    "dark": "#e91e63",
    "light": "#f8bbd0"
  },
  {
    "color": "#00796b",
    "dark": "#004d40",
    "light": "#b2dfdb"
  },
  {
    "color": "#c2185b",
    "dark": "#880e4f",
    "light": "#f48fb1"
  }
]

这篇关于自定义Google Gantt图表中的条形颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！