Customize the bar colors in Google Gantt Charts

问题

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?

Here is what I have:

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

回答1:

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.

This is the default palette that the chart uses:

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

回答2:

I figured out a hacky way of doing it. You basically have to listen to every single event fired by the chart and override them with a function that colors the chart.

回答3:

This is pretty old, but just in case anyone needs to do this... Not a super elegant solution, but it works.

function changeColors() {
$("text[fill='#5e97f6']").attr('fill',"#0099D8"); // Left Text
$("rect[fill='#5e97f6']").attr('fill',"#0099D8"); // Full bar
$("path[fill='#2a56c6']").attr('fill', '#006B99'); // Percentage completed
$("rect[fill='#2a56c6']").attr('fill', '#0099D8'); // Hover Full Bar
$("path[fill='#204195']").attr('fill', '#006B99'); // Hover Percentage

// Change Old red to new Red
$("text[fill='#db4437']").attr('fill',"#D41647");
$("rect[fill='#db4437']").attr('fill',"#D41647");
$("path[fill='#a52714']").attr('fill', '#A21135');
$("rect[fill='#a52714']").attr('fill', '#D41647');
$("path[fill='#7c1d0f']").attr('fill', '#A21135');

// Change Old Yellow to new Yellow
$("text[fill='#f2a600']").attr('fill',"#FCB813");
$("rect[fill='#f2a600']").attr('fill',"#FCB813");
$("path[fill='#ee8100']").attr('fill', '#C98e03');
$("rect[fill='#ee8100']").attr('fill', '#FCB813');
$("path[fill='#b36100']").attr('fill', '#C98e03');

}

...and then after you draw the chart, add a "ready" and these other event listeners to run changeColors any time anything happens.

chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', changeColors);
google.visualization.events.addListener(chart, 'onmouseover', changeColors);
google.visualization.events.addListener(chart, 'onmouseout', changeColors);
google.visualization.events.addListener(chart, 'select', changeColors);
google.visualization.events.addListener(chart, 'error', changeColors);
google.visualization.events.addListener(chart, 'click', changeColors);
google.visualization.events.addListener(chart, 'animationfinish', changeColors);

Issues:

There seems to be some switching of the colors in certain situations, as you mouse around on it.

来源：https://stackoverflow.com/questions/35165271/customize-the-bar-colors-in-google-gantt-charts