谷歌可視化圖表 - 顏色

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>