带有多个背景区域的Google列表图表 [英] Google Column Chart with multiple background zones

问题描述

FusionCharts中似乎有一项功能阻止我迁移到Google Charts API; 趋势区域（请参阅第二个示例）。使用这些，我可以设置水平的背景颜色 - 趋势 - 在我的专栏背后。

这是一个强大的可视化， b
$ b

我浏览了文档，找不到需要的东西。有没有人共同闯过一些可能会诀窍的东西？

感谢您提供任何帮助！

 函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数drawChart函数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; 
 //填充100行随机数据
 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; 
} 
 //使彩色条带每20个b $ b 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，
类型：'area'，
 visibleInLegend：false，
 enableInteractivity：false 
}，
 3：{
 lineWidth ：0，
类型：'area'，
 visibleInLegend：false，
 enableInteractivity：false 
}，
 4：{
 lineWidth：0， 
类型：'area'，
 visibleInLegend：false，
 enableInteractivity：false 
}，
 5：{
 lineWidth：0，
类型：'area'，
 visibleInLegend：false，
 enableInteractivity：false 
}，
 6：{
 lineWidth：0，
 type：'area '，
 visibleInLegend：false，
 enableInteractivity：false 
} 
} 
}）; 
 
 $ b google.load（'visualization'，'1'，{packages：['corechart']，callback：drawChart}）; 
  

看到它在这里工作： http://jsfiddle.net/asgallant/apH2B/

There seems to be one feature in FusionCharts preventing me from migrating to the Google Charts API; trend zones (see the second example). Using these I can set horizontal background colours - trends - behind my columns.

It's a powerful visualisation in my use case where I'm banding values.

I have sifted through the documentation and just can't quite find what I need. Has anyone hacked something together that might do the trick?

Thanks for any help you can give!

解决方案

I wrote a hack that does pretty much exactly what you are looking for:

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});

See it working here: http://jsfiddle.net/asgallant/apH2B/

这篇关于带有多个背景区域的Google列表图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！