colors - 複数の背景ゾーンを持つ Google 縦棒グラフ

Question

FusionCharts には、Google Charts API への移行を妨げている機能が 1 つあります。トレンド ゾーン(2 番目の例を参照)。これらを使用して、列の背後に水平方向の背景色 (傾向) を設定できます。

これは、値をバンド化する私のユースケースでは強力な視覚化です。

ドキュメントをふるいにかけましたが、必要なものがまったく見つかりません。トリックを実行する可能性のある何かを一緒にハッキングした人はいますか?

あなたが与えることができるどんな助けにも感謝します!

Answer 1

私はあなたが探していることをほぼ正確に行うハックを書きました:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addColumn('number', 'color band 1');
    data.addColumn('number', 'color band 2');
    data.addColumn('number', 'color band 3');
    data.addColumn('number', 'color band 4');
    data.addColumn('number', 'color band 5');

    var y = 50;
    // fill with 100 rows of random data
    for (var i = 0; i < 100; i++) {
        y += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 2));
        if (y < 0) {
            y = 10;
        }
        if (y > 100) {
            y = 90;
        }
        // make the colored bands appear every 20
        data.addRow([i, y, 20, 20, 20, 20, 20]);
    }

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        isStacked: true,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        series: {
            0: {
                type: 'line'
            },
            1: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            2: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            3: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            4: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            5: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            6: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            }
        }
    });
}

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

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