大佬教程收集整理的这篇文章主要介绍了我如何制作一种堆积面积图？ [jQuery,Google Charts等]，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是一张图片来解释我想要完成的事情：
我一直试图找到符合我需求的jQuery Chart或Google Chart,但迄今为止一直无法做到这一点.有一些东西接近我正在寻找的东西,例如阶梯图,但它们都有诸如“没有重叠值”或“从零开始”的要求.我也在考虑使用烛台图表,但你无法真正区分重叠区域,这对我的数据集非常重要.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization','1',{packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Fill data object,first row contains legend text,which in
// this example contains the calculation rules.
var data = google.visualization.arrayToDataTable([
['Month','min(Dataset1)','max(Dataset1)-min(Dataset1)','min(Dataset2)-max(Dataset1)','max(Dataset2)-min(Dataset2)','min(Dataset3)-max(Dataset2)','max(Dataset3)-min(Dataset3)'],['2004/05',1,2,5,4],['2005/06',3,3],['2006/07',4,2],['2007/08',-1,-5,['2008/09',-2,-9,1]
]);
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(
document.getElementById('visualization'));
ac.draw(data,{
isStacked: true,chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"},series: {
0:{Color: 'transparent'},2:{Color: 'transparent'},4:{Color: 'transparent'},}
});
}
google.setOnLoadCallBACk(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
我们在上面的代码中做的是重复系列的数量.每个系列前面都会有一个透明系列图层,其高度与前一个系列的距离.
简化解决方案的屏幕截图：
复杂解决方案的屏幕截图：
以上是大佬教程为你收集整理的我如何制作一种堆积面积图？ [jQuery,Google Charts等]全部内容，希望文章能够帮你解决我如何制作一种堆积面积图？ [jQuery,Google Charts等]所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。