Используйте две или более области для Google Chart - PullRequest
Новая
       28

Используйте две или более области для Google Chart

0 голосов
/ 26 апреля 2019

Я попытался сделать график, как на картинке.Я уже сделал это с помощью другого сообщения из stackoverflow.Я обнаружил, что этот API-интерфейс является старым, и я хочу использовать новый комбинированный график от Google.Может кто-нибудь помочь мне создать график, как на этой картинке ? 

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