Google Charts - Изменение цвета бар

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», то необходимо установить желтый как цвет, но к элементу «Mn», необходимо установить зеленый, как цвет бара ...

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>