谷歌圖表 - 更改欄顏色

Question

我有一個圖表作爲波紋管的例子：

 google.charts.load('current', {'packages':['corechart']}); 
 
      
 
     google.charts.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['C', 0.03, 0.03, 0.06, 0.06, 0.02, 0.02, 0.035, 0.035], 
 
      ['Mn', 1.1, 1.1, 1.4, 1.4, 1, 1, 1.3, 1.3], 
 
      ['Si', 0.3, 0.3, 0.7, 0.7, 0.35, 0.35, 0.7, 0.7] 
 
     ], true); 
 

 
     var options = { 
 
      legend: 'none', 
 
      bar: { groupWidth: '100%' }, // Remove space between bars. 
 
      //colors: ['#fcb441', 'red', 'black'] 
 
      series: { 
 
      0:{color:'red'}, 
 
      1:{color:'black'}, 
 
      } 
 
     }; 
 

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
     <div id="chart_div" style="width: 900px; height: 500px;"></div>

我需要改變第二欄的顏色爲依據的值的每個元素。

例如：以「C」元素時，有必要設置黃顏色，但「錳」的元素，有必要樹立綠色作爲酒吧的顏色...

Answer 1

的series...color選項受讓人根據列
的顏色，以便將相同的顏色分配給所有的行，根據列（系列）

分配特定顏色的每一行/元件，
使用'style'column role

見下工作片斷......

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Label', 'Low 0', 'Open 0', 'Close 0', 'High 0', {role: 'style'}, 'Low 1', 'Open 1', 'Close 1', 'High 1', {role: 'style'}], 
 
    ['C', 0.03, 0.03, 0.06, 0.06, 'black', 0.02, 0.02, 0.035, 0.035, 'yellow'], 
 
    ['Mn', 1.1, 1.1, 1.4, 1.4, 'black', 1, 1, 1.3, 1.3, 'lime'], 
 
    ['Si', 0.3, 0.3, 0.7, 0.7, 'black', 0.35, 0.35, 0.7, 0.7, 'magenta'] 
 
    ]); 
 

 
    var options = { 
 
    legend: 'none', 
 
    bar: { 
 
     groupWidth: '100%' 
 
    } 
 
    }; 
 

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

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