jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
本文實(shí)例講述了jQuery插件HighCharts繪制2D餅圖效果。分享給大家供大家參考,具體如下:
1、實(shí)例代碼:
<!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、運(yùn)行效果圖如下:
附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 在vue項(xiàng)目中引入highcharts圖表的方法(詳解)
- Vue 中使用vue2-highcharts實(shí)現(xiàn)top功能的示例
- Vue 中使用vue2-highcharts實(shí)現(xiàn)曲線數(shù)據(jù)展示的方法
- 在Vue中使用highCharts繪制3d餅圖的方法
- highcharts 在angular中的使用示例代碼
- 通過(guò)php動(dòng)態(tài)傳數(shù)據(jù)到highcharts
- jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果示例【附demo源碼】
- jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果示例【附demo源碼】
- jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
- highCharts提示框中顯示當(dāng)前時(shí)間的方法
相關(guān)文章
jQuery常用事件方法mouseenter+mouseleave+hover
這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文內(nèi)容介紹詳細(xì),需要的小伙伴可以參考一下2022-03-03使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接
這篇文章主要介紹了使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù),需要的朋友可以參考下2014-06-06jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下2016-04-04S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼
登錄驗(yàn)證,在項(xiàng)目開(kāi)發(fā)中很常用的,尤其是這一塊非常有利于用戶體驗(yàn),感興趣的朋友可以參考下,或許對(duì)你學(xué)習(xí)登陸驗(yàn)證有所幫助,好了閑話不多說(shuō)了,看代碼2013-01-01Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
這篇文章主要介紹了Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-04-04jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼,涉及jQuery結(jié)合動(dòng)畫(huà)函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10