DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery插件HighCharts實現的2D面積圖效果示例【附demo源碼下載】
jQuery插件HighCharts實現的2D面積圖效果示例【附demo源碼下載】
編輯：JQuery入門技巧
本文實例講述了jQuery插件HighCharts實現的2D面積圖效果。分享給大家供大家參考，具體如下：
1、實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D面積圖</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
$('#areaChart').highcharts({
chart: {
type: 'area'
},
title: {
text: '(jb51.net)統計年收入'
},
subtitle: {
text: ''
},
xAxis: {
labels: {
formatter: function() {
return this.value;
}
}
},
yAxis: {
title: {
text: '月收入'
},
labels: {
formatter: function() {
return this.value / 2000 +'k';
}
}
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>{point.x}'
},
plotOptions: {
area: {
pointStart: 1840,
marker: {
enabled: true,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '張三',
data: [784, 645, 5623, 8945, 42121, 6895 , 1451, 3212, 1100, 2359, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: '李四',
data: [9865, 7845, 1245, 9565, 4512, 5644, 1245 , 6532 , 7845 ,4512,
4512, 2589, 5000, 1920, 1520, 2600, 4026, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 4400, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
});
</script>
</head>
<body>
<div id="areaChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>
2、運行效果圖如下：
附：完整實例代碼點擊此處本站下載。
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
小編推薦
熱門推薦