Google Column Chart с несколькими фоновыми зонами

Question

Кажется, в FusionCharts есть одна особенность, которая не позволяет мне перейти на Google Charts API; трендовые зоны (см. второй пример). Используя их, я могу установить горизонтальные цвета фона - тренды - позади моих колонок.

Это мощная визуализация в моем случае использования, где я объединяю значения.

Я просмотрел документацию и просто не могу найти то, что мне нужно. Кто-нибудь взламывал что-то вместе, что могло бы помочь?

Спасибо за любую помощь, которую вы можете оказать!

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/