Googleの列グラフは条件付きで色を設定します

Question

Googleのグラフの欄の値に応じて、指定した列の色を条件付きで設定できるようにします。例えば、バーが< 50の場合、それを黄色または70以上の色に着色し、緑色にします。 API自体の中で解決策を達成するのはすばらしいことですが、それはおそらくそうではありません。あなたは色したい場合

Answer 1

は、あなたはそれが

スタイルべきで
シリーズの列に従うべきであること、特定の列

スタイルの役割は、データテーブルのちょうど列での着色に'style' column roleを使用することができます条件付きで色を割り当てる例えば緑色の列...

['A', 100, 'green'] 

、
我々はDataViewを使用することができます、私たちは作業スニペット以下参照、算出カラム

を追加することができsetColumns method
、
配列は値の範囲を格納するために使用され、そして関連する色...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    ['A', 9], 
 
    ['B', 30], 
 
    ['C', 50], 
 
    ['D', 70], 
 
    ['E', 90] 
 
    ]); 
 

 
    var ranges = [ 
 
    [0, 10, '#e53935'], // red 
 
    [10, 50, '#fdd835'], // yellow 
 
    [50, 90, '#43a047'], // green 
 
    [90, null, '#1e88e5'] // blue 
 
    ]; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: function (dt, row) { 
 
     var rowValue = dt.getValue(row, 1); 
 
     var color; 
 
     ranges.forEach(function (range, index) { 
 
     if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) { 
 
      color = range[2]; 
 
     } 
 
     }); 
 
     return color; 
 
    }, 
 
    role: 'style', 
 
    type: 'string' 
 
    }]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
    legend: 'none' 
 
    }); 
 
});

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