Google 图表倒挂面积图
Google Charts upside-down area chart
如何制作既有正常面积又有"upside-down"面积的面积图?
已经看过 their docs,但没有找到解决方案。
最终结果应该是这样的:
你可以在这个jsfiddle.
看到我现在的状态
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Blue', 'Red'],
['0', 0, 20],
['2', 0, 20],
['4', 0, 20],
['6', 1, 19],
['8', 2, 18],
['10', 3, 17],
['12', 4, 16],
['14', 5, 15],
['16', 6, 14],
['18', 7, 13],
['20', 8, 12],
['22', 9, 11],
['24', 10, 10]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Google 图表 AreaChart 填充从数据线向下或向上到基线的区域。但是基线(目前)只适用于轴,你实际上想要两个不同的基线,一个在一个系列的顶部,一个在另一个系列的底部,所以你必须做一些技巧才能得到你想要的。
基本上,将每个系列定位到不同的轴,每个轴都有自己的基线,并将两个轴与相同的 viewWindow 对齐。像这样:
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxes: {
0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
},
series: {
1: { targetAxisIndex: 1 }
}
};
如何制作既有正常面积又有"upside-down"面积的面积图?
已经看过 their docs,但没有找到解决方案。
最终结果应该是这样的:
你可以在这个jsfiddle.
看到我现在的状态 google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Blue', 'Red'],
['0', 0, 20],
['2', 0, 20],
['4', 0, 20],
['6', 1, 19],
['8', 2, 18],
['10', 3, 17],
['12', 4, 16],
['14', 5, 15],
['16', 6, 14],
['18', 7, 13],
['20', 8, 12],
['22', 9, 11],
['24', 10, 10]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Google 图表 AreaChart 填充从数据线向下或向上到基线的区域。但是基线(目前)只适用于轴,你实际上想要两个不同的基线,一个在一个系列的顶部,一个在另一个系列的底部,所以你必须做一些技巧才能得到你想要的。
基本上,将每个系列定位到不同的轴,每个轴都有自己的基线,并将两个轴与相同的 viewWindow 对齐。像这样:
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxes: {
0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
},
series: {
1: { targetAxisIndex: 1 }
}
};