gannt chart formed by google bar chart: different color to each bar

问题:

I have the following sort of gantt chart coded up using Google Charts, but I would like to assign different color to each bar. Now in my case since I am assigning a transparent color to spacer , I dont understand how I can assign a different color to each remaining bar.

This probably comes down to assigning the same series in different bars different colors.

Can someone help me out with fixing this?

http://jsfiddle.net/bootkick/hp2yr/

 google.load('visualization', '1', {     packages: ['corechart'] }); google.setOnLoadCallback(drawChart);  function drawChart() {     var data = new google.visualization.DataTable();     data.addColumn('string', 'Name');     data.addColumn('timeofday', 'spacer');     data.addColumn('timeofday', 'Runtume');     data.addRows([         ['PIPE', [5, 0, 0, 0],             [7, 30, 0, 0]         ],         ['CNI', [6, 0, 0, 0],             [12, 30, 0, 0]         ],         ['PEVC', [11, 0, 0, 0],             [17, 30, 0, 0]         ]     ]);      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));     chart.draw(data, {         isStacked: true,         width: 900,         height: data.getNumberOfRows() * 80,         title: 'Host Runtimes',         vAxis: {             title: 'Content',             titleTextStyle: {                 color: 'black'             }         },         series: {             0: {                 visibleInLegend: false,                 color: 'transparent'             }         }     });      /*chart.draw(data, {isStacked: true,                        series: [                                {color: 'blue', visibleInLegend: false},                                {color: 'red', visibleInLegend: false}                               ]                              });*/ } 

Thanks

回答1:

Its a nasty way of doing it. Wish theyd make a google gantt chart

google.load('visualization', '1', { packages: ['corechart'] }); google.setOnLoadCallback(drawChart);  function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('timeofday', 'spacer'); data.addColumn('timeofday', 'Runtime'); data.addColumn('timeofday', 'Runtime'); data.addColumn('timeofday', 'Runtime'); data.addColumn('timeofday', 'Runtime');  data.addRow(['PIPE', [3, 0, 0],     [4, 30, 0],     [0, 0, 0],              [0, 0, 0],     [0, 0, 0] ]); data.addRow(['CNI', [1, 0, 0],     [0, 0, 0],     [7, 30, 0],              [0, 0, 0],     [0, 0, 0] ]); data.addRow(['PEVC', [7, 0, 0],     [0, 0, 0],     [0, 0, 0],     [1, 0, 0],     [0, 0, 0] ]);  data.addRow(['MA', [7, 0, 0],     [0, 0, 0],     [0, 0, 0],              [0, 0, 0],     [1, 0, 0] ]);  var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, {     isStacked: true,     width: 900,     height: data.getNumberOfRows() * 60,     title: 'Host Runtimes',     vAxis: {         title: 'Content',         titleTextStyle: {             color: 'black'         }     },     series: {         0: {             visibleInLegend: false,             color: 'transparent'         },         1: {             visibleInLegend: false,             color: 'red'         },         2: {             visibleInLegend: false,             color: 'green'         },         3: {             visibleInLegend: false,             color: 'blue'         },         4: {             visibleInLegend: false,             color: 'yellow'         },         5: {             visibleInLegend: false,             color: 'cyan'         },         6: {             visibleInLegend: false,             color: 'pink'         },         7: {             visibleInLegend: false,             color: 'silver'         }     } });  } 

See it in action here-: http://jsfiddle.net/bootkick/hp2yr/9/

文章来源: gannt chart formed by google bar chart: different color to each bar