Googleの視覚化チャート - 色

Question

私はプロジェクトに取り組んでいました。私はグラフ上にいくつかのゾーンの間に色を変えなければなりませんでした。私はこれが私のコード

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

を使用しているこの

のような何かをしたい色が

、青、赤、黄、緑の中でこれは

私の結果でありたいです従来のチャート、の代わりにチャート

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

材料からチャートは、それが
をスタイリングのために利用可能なオプションとなると限られているオプションのためではありません参照>packages: ['bar'] + google.charts.Bar

材料素材 - >Tracking Issue for Material Chart Feature Parity

は

theme: 'material' 

が作業スニペットを次のように表示材料に類似した古典チャートのスタイルを設定するためのオプション...

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>