我试图制作一个如图所示的图形。我已经在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
}
}
});
}