colors - 具有多个背景区域的 Google 柱形图

Question

FusionCharts 中似乎有一项功能阻止我迁移到 Google Charts API；趋势区（见第二个例子）。使用这些我可以在我的列后面设置水平背景颜色 - 趋势。

在我绑定值的用例中，这是一个强大的可视化。

我已经筛选了文档，只是找不到我需要的东西。有没有人一起破解了一些可以解决问题的东西？

谢谢你提供的所有帮助！

Answer 1

我写了一个 hack，它几乎完全符合您的要求：

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/