Graphiques de visualisation Google - couleurs

Question

Je travaille sur un projet où je dois mettre différentes couleurs sur le graphique, entre certaines zones. Je veux la couleur en bleu, rouge, jaune, vert

Ceci est mon résultat

Je veux quelque chose comme ça

Ceci est mon code

google.charts.load('current', { 'packages': ['bar'] }); 
google.charts.setOnLoadCallback(drawStuff); 

function drawStuff() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'], 
     ['W45', 10, 24, 20, 32, 18], 
     ['W46', 16, 22, 23, 30, 16], 
     ['W47', 28, 19, 29, 30, 12], 
     ['W48', 26, 25, 23, 10, 16], 
     ['W49', 28, 19, 29, 40, 12], 
     ['W50', 16, 22, 23, 30, 16], 
     ['W60', 28, 19, 29, 30, 12], 
     ['W61', 26, 25, 23, 10, 16], 
     ['W62', 28, 19, 29, 40, 12], 
     ['W63', 16, 22, 23, 30, 16], 
     ['W64', 28, 19, 29, 30, 12], 
     ['W65', 26, 25, 23, 10, 16], 
     ['W66', 28, 19, 29, 40, 12], 
     ['W67', 28, 19, 29, 30, 12], 
     ['W68', 26, 25, 23, 10, 16], 
     ['W69', 28, 19, 29, 40, 12], 
     ['W70', 16, 22, 23, 30, 16], 
     ['W71', 28, 19, 29, 30, 12], 
     ['W72', 26, 25, 23, 10, 16], 
     ['W73', 28, 19, 29, 40, 12] 
    ]); 

    var options = { 
     width: '100%', 
     height: '100%', 
     chartArea: { 
      width: '90%', 
      height: '80%', 
     }, 
     bar: { groupWidth: '75%' }, 
     isStacked: true 
    }; 

    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
    // Convert the Classic options to Material options. 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 

Answer 1

utiliser un classique graphique, au lieu d'un matériau graphique

classique ->packages: ['corechart'] + google.visualization.ColumnChart

matériel ->packages: ['bar'] + google.charts.Bar

matériel graphiques sont limitées en ce qui concerne les options disponibles pour le style
voir les options non disponible pour matériau ->Tracking Issue for Material Chart Feature Parity

il y a une option pour le style d'un classique graphique similaire à matériau

theme: 'material' 

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: drawStuff, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawStuff() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'], 
 
     ['W45', 10, 24, 20, 32, 18], 
 
     ['W46', 16, 22, 23, 30, 16], 
 
     ['W47', 28, 19, 29, 30, 12], 
 
     ['W48', 26, 25, 23, 10, 16], 
 
     ['W49', 28, 19, 29, 40, 12], 
 
     ['W50', 16, 22, 23, 30, 16], 
 
     ['W60', 28, 19, 29, 30, 12], 
 
     ['W61', 26, 25, 23, 10, 16], 
 
     ['W62', 28, 19, 29, 40, 12], 
 
     ['W63', 16, 22, 23, 30, 16], 
 
     ['W64', 28, 19, 29, 30, 12], 
 
     ['W65', 26, 25, 23, 10, 16], 
 
     ['W66', 28, 19, 29, 40, 12], 
 
     ['W67', 28, 19, 29, 30, 12], 
 
     ['W68', 26, 25, 23, 10, 16], 
 
     ['W69', 28, 19, 29, 40, 12], 
 
     ['W70', 16, 22, 23, 30, 16], 
 
     ['W71', 28, 19, 29, 30, 12], 
 
     ['W72', 26, 25, 23, 10, 16], 
 
     ['W73', 28, 19, 29, 40, 12] 
 
    ]); 
 

 
    var options = { 
 
     width: '100%', 
 
     height: '100%', 
 
     chartArea: { 
 
      width: '90%', 
 
      height: '80%', 
 
      top: 48 
 
     }, 
 
     bar: { groupWidth: '75%' }, 
 
     isStacked: true, 
 
     theme: 'material', 
 
     legend: { 
 
      maxLines: 2, 
 
      position: 'top' 
 
     } 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="top_x_div"></div>