使用highstock创建面积图

来源：互联网发布：asp数据库管理网页编辑：程序博客网时间：2024/05/21 02:20

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock step-line Example</title>
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script type="text/javascript">
function genSeries(seriesName) {
var series = {
type:'area',
name : seriesName,
data : []
};
var ONE_DAY = 24 * 60 * 60 * 1000;
var MAX_YEAR = 365 * 5;
var date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);

for (i = MAX_YEAR; i > 0; i--) {
series.data.push([ date - (ONE_DAY * i), Math.random() * 100 ]);
}
return series;
}

$(function() {
var seriesArray = [];
seriesArray.push(genSeries("Microsoft"));
seriesArray.push(genSeries("Google"));
seriesArray.push(genSeries("Facebook"));
seriesArray.push(genSeries("Huawei"));
seriesArray.push(genSeries("Nokia"));
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},

rangeSelector : {
selected : 1
},

title : {
text : 'AAPL Stock Price'
},

series : seriesArray

});
});
</script>
</head>
<body>

<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>