在Google图表中使用两个或多个区域

时间:2019-04-26 10:05:01

标签: javascript html5 pygooglechart

我试图制作一个如图所示的图形。我已经在stackoverflow的another post的帮助下完成了此操作。我发现,这个api是旧的用法,我想使用google的新组合图。有人可以帮我设计一个像picture这样的图形吗?

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Abverkauf');
data.addColumn('number', 'max');
data.addColumn('number', 'min');
data.addRows([
    [0, 0, null, null],
    [1, 1.5, null, null],
    [2, 2.5, null, null],
    [3, 3, null, null],
    [4, 3.5, null, null],
    [5, 4, null, null],
    [6, 4.2, null, null],
    [7, 4.6, null, null],
    [8, 5.8, null, null],
    [9, 8, null, null],
    [10, 8.5, null, null],
    // add data for the area background
    // start of area:
    [0, null, 0, null], // make sure the bottom value here is as low or lower than the min value you want your chart's y-axis to show
    [0, null, 10, null], // make sure the top value here is as high or higher than the max value you want your chart's y-axis to show
    // end of area:
    [9.5, null, 10, null], // use the same max value as the start
    [0, null, .5, null], // use the same min value as the start
    // start of area:

    [0, null, -.5, null], // use the same min value as the area
    [10, null, 9.5, null],
    // end of area:
    [10, null, 9.5, null],
    [10, null, 0, null],// use the same max value as the area
   // add data for the area background
]);

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
    height: 400,
    width: 600,
    series: {
        0: {
            type: 'line'
        },
        1: {
            // area series
            type: 'area',
            enableInteractivity: false,
            lineWidth: 0
        },
        3: {
            // area series
            type: 'area',
            enableInteractivity: false,
            lineWidth: 0
        },

    },
    vAxis: {
        viewWindow: {
            // you may want to set min/max here, depending on your data and the min/max used for your area and vertical line series
        }
    }
});
}

0 个答案:

没有答案