charts - 自定义 Google 甘特图中的条形颜色

Question

这应该很简单。如何为 Google Gantt Charts 中的条指定我自己的颜色?甘特图忽略我的颜色并自动为条形分配蓝色、红色和黄色(按此顺序)，我似乎无法弄清楚问题所在。有人可以指出我是否在这里遗漏了某些东西，或者目前根本不支持它吗？

这是我所拥有的:

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

Answer 1

有一个选项 gantt.palette它需要一个对象数组。

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

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

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

[
  {
    "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"
  }
]