1

下の画像のような縦棒グラフがあります。エクセレント バー グリーンをスタイリングしたいのは、平均を超えているためです。非常に良い色から青まで、フェアから赤までの色です。これは可能ですか?

バー/セルの値に基づいて、縦棒グラフの背景色を変更したい

ここに画像の説明を入力

4

1 に答える 1

3

すべてのバーはデータ シリーズによって色分けされているため、バーを別のシリーズに分割して別の色にする必要があります。これを実現するために、DataView で計算列を使用できます。

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Foo', 2],
        ['Bar', 4],
        ['Baz', -3],
        ['Cud', 6],
        ['Waq', -8],
        ['Bat', -2],
        ['Cad', 5],
        ['Giv', 3],
        ['Muj', 9],
        ['Lof', -7],
        ['Duq', 5],
        ['Kaf', 1],
        ['Zij', 4]
    ]);

    var view = new google.visualization.DataView(data);
    // add as many different series as needed
    // make sure all possible values are covered, so you don't have any gaps where a data point can't be assigned to a series
    view.setColumns([0, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is less than 0, add to the red series
            return (dt.getValue(row, 1) < 0) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is greater than or equal to 0, add to the green series
            return (dt.getValue(row, 1) >= 0) ? dt.getValue(row, 1) : null;
        }
    }]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, {
        legend: 'none',
        isStacked: true,
        height: 300,
        width: 800,
        // set the colors to use for the series (in the same order as the columns in the view)
        colors: ['red', 'green']
        /* or you can use the series.<series index>.color option to assign colors to specific series:
        series: {
            0: {
                color: 'red'
            },
            1: {
                color: 'green'
            }
        }
        */
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

ここで動作することを確認してください:http://jsfiddle.net/asgallant/dMWWk/

于 2013-09-13T22:08:50.890 に答える