Google Chartのカラーバーを値段で

Question

私はGoogle Chartsの棒グラフでその値で色付けしようとしています。私はドキュメントから、特定の色に特定の色を指定するスタイルロールを指定できることは知っていますが、色の値で色を付けることができるかどうかを示す例は見つかりませんでした。

私はチャートの構造を示すフィドルを作成しました。私のデータは連続した一連の整数です。

var data = google.visualization.arrayToDataTable([ 
    ['Asset','Days in Stock'], 
    ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147], 
    ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41], 
    ['4990/590',25],['4990/592',20],['4990/593',5], 
]); 

実際にバーの色を設定するためのしきい値範囲を設定できるかどうかはドキュメントから判断できませんでした。理想的には、範囲フォーマッタを使用できるようにしたいと思っていますが、棒グラフ型では機能しないようです。だから、そこではない場合は、私はプログラム的に自分のデータを使用してバーごとに色を設定するために解決し、理想的であるフォーマット機能を使用してこれを行う方法があるかどう

https://jsfiddle.net/dL997yv6/

var formatter = new google.visualization.TableColorFormat(); 
formatter.addRange(0, 60, 'green', '#00ff00'); 
formatter.format(data, 1); 

私のスクリプト言語の値。

Answer 1

色フォーマッタは、値によってバーの色を設定されたデータビューに計算された列を追加し、注釈カラム

作業スニペット次の参照に類似
する表チャート

で動作します。 ..

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Asset','Days in Stock'], 
 
    ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147], 
 
    ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41], 
 
    ['4990/590',25],['4990/592',20],['4990/593',5], 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
    // style column 
 
    { 
 
     calc: function (dt, row) { 
 
     if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 60)) { 
 
      return 'green'; 
 
     } else if ((dt.getValue(row, 1) > 60) && (dt.getValue(row, 1) <= 100)) { 
 
      return 'yellow'; 
 
     } else { 
 
      return 'red'; 
 
     } 
 
     }, 
 
     type: 'string', 
 
     role: 'style' 
 
    }, 
 
    // annotation column 
 
    { 
 
     calc: 'stringify', 
 
     sourceColumn: 1, 
 
     type: 'string', 
 
     role: 'annotation' 
 
    } 
 
    ]); 
 

 
    var options = { 
 
    title: '', 
 
    titleTextStyle: { 
 
     fontSize: 16, 
 
     bold: true 
 
    }, 
 
    backgroundColor: 'transparent', 
 
    chartArea: { 
 
     left:80, 
 
     top:30, 
 
     bottom:60, 
 
     right:10 
 
    }, 
 
    legend: { 
 
     textStyle: { 
 
     fontSize: 11 
 
     } 
 
    }, 
 
    vAxis: { 
 
     title: 'Asset', 
 
     textStyle: { 
 
     fontName: 'Arial', 
 
     fontSize: 10 
 
     }, 
 
     titleTextStyle: { 
 
     fontSize: 12, 
 
     italic: false, 
 
     bold:true 
 
     } 
 
    }, 
 
    hAxis: { 
 
     title: 'Days in Stock', 
 
     gridlines: { 
 
     count: 22 
 
     }, 
 
     textStyle: { 
 
     fontName: 'Arial', 
 
     fontSize: 11 
 
     }, 
 
     titleTextStyle: { 
 
     fontSize: 12, 
 
     italic: false , 
 
     bold:true 
 
     } 
 
    }, 
 
    pointSize: 3, 
 
    pointShape: 'circle', 
 
    annotations: { 
 
     alwaysOutside: true, 
 
     textStyle: { 
 
     fontName: 'Arial', 
 
     fontSize: 9, 
 
     color: '#000000', 
 
     opacity: 1 
 
     } 
 
    } 
 
    }; 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.BarChart(chartDiv); 
 
    chart.draw(view, options); 
 
}

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