我如何制作一种堆积面积图？[jQuery,Google Charts等]
Jim*_*m P 5 jquery charts google-visualization
我有一些数据需要制作图表.问题是数据的价格范围.其中一些价格在它们之间有一些重叠.此外,所有价格范围的上限和下限都不是零值.
这是一张图片来解释我想要完成的事情:
我一直试图找到符合我需求的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, 2, 2, 5,4],
['2005/06', 2, 3, 1, 1, 3,3],
['2006/07', 3, 4, 0, 2, 0,2],
['2007/08', 3, 4, -1, 2, -5,2],
['2008/09', 4, 4, -2, 3, -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>
我们在上面的代码中做的是重复系列的数量.每个系列前面都会有一个透明系列图层,其高度与前一个系列的距离.
简化解决方案的屏幕截图:
复杂解决方案的屏幕截图:
似乎您想做一些类似于可视化天气系列数据的事情，这就是我过去几个小时一直在试图弄清楚如何做的事情。
不能说我真的知道如何使用 Google Charts 做你想要的事情，但是http://dygraphs.com/上的库看起来真的很时髦。
来自网站：
