本文實例講述了jQuery插件HighCharts實現(xiàn)的2D面積圖效果。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、管城網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為管城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
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)統(tǒng)計年收入' }, 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" ></div> </body> </html>
2、運行效果圖如下:
附:完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
網(wǎng)站標(biāo)題:jQuery插件HighCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】
轉(zhuǎn)載注明:http://chinadenli.net/article20/iphpco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、App開發(fā)、網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)