диаграмма gannt, образованная гистограммой google: разный цвет для каждого бара

Question

У меня есть следующая диаграмма gantt, закодированная с использованием графиков Google, но я бы хотел присвоить каждому цвету другой цвет. Теперь в моем случае, поскольку я назначаю прозрачный цвет разделителю, я не понимаю, как я могу назначить другой цвет для каждого оставшегося бара.

Возможно, это связано с присвоением той же серии в разных полосах разных цветов.

Может кто-нибудь помочь мне с фиксацией этого?

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

Благодаря

Answer 1

Сво неприятный способ сделать это. Желание Theyd сделать Google диаграммы Ганта

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

} 

в действии здесь-: http://jsfiddle.net/bootkick/hp2yr/9/