jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
本文實例講述了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(){ $('#pieChart').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '(jb51.net)2013年收入' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', name: '月收入占比', data: [ ['一月', 8956], ['二月', 5612], ['三月', 4515], ['四月', 9565], ['五月', 2356], ['六月', 4512], ['七月', 5623], ['八月', 1245], ['九月', 4578], ['十月', 8754], ['十一月',6231], ['十二月',5124] ] }] }); }); </script> </head> <body> <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></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è)計有所幫助。
- 在vue項目中引入highcharts圖表的方法(詳解)
- Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
- Vue 中使用vue2-highcharts實現(xiàn)曲線數(shù)據(jù)展示的方法
- 在Vue中使用highCharts繪制3d餅圖的方法
- highcharts 在angular中的使用示例代碼
- 通過php動態(tài)傳數(shù)據(jù)到highcharts
- jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
- jQuery插件HighCharts繪制簡單2D折線圖效果示例【附demo源碼】
- jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
- highCharts提示框中顯示當(dāng)前時間的方法
相關(guān)文章
jQuery常用事件方法mouseenter+mouseleave+hover
這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文內(nèi)容介紹詳細,需要的小伙伴可以參考一下2022-03-03S2SH整合JQuery+Ajax實現(xiàn)登錄驗證功能實現(xiàn)代碼
登錄驗證,在項目開發(fā)中很常用的,尤其是這一塊非常有利于用戶體驗,感興趣的朋友可以參考下,或許對你學(xué)習(xí)登陸驗證有所幫助,好了閑話不多說了,看代碼2013-01-01Jquery實現(xiàn)$.fn.extend和$.extend函數(shù)
這篇文章主要介紹了Jquery實現(xiàn)$.fn.extend和$.extend函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-04-04jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09jQuery實現(xiàn)的個性化返回底部與返回頂部特效代碼
這篇文章主要介紹了jQuery實現(xiàn)的個性化返回底部與返回頂部特效代碼,涉及jQuery結(jié)合動畫函數(shù)響應(yīng)鼠標事件動態(tài)改變頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10