快捷導(dǎo)航

jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】

更新時(shí)間：2017年03月21日 10:04:40 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶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ì)有所幫助。

您可能感興趣的文章:

相關(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-06
jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下
2016-04-04
S2SH整合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-01
jQuery預(yù)加載圖片常用方法
這篇文章主要介紹了jQuery預(yù)加載圖片常用方法,以兩個(gè)簡(jiǎn)單實(shí)例分析了jQuery預(yù)加載圖片的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-06-06
Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
這篇文章主要介紹了Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)的相關(guān)資料,需要的朋友可以參考下
2016-04-04
js/jquery判斷瀏覽器的方法小結(jié)
在網(wǎng)站前端開(kāi)發(fā)中，瀏覽器兼容性是前端開(kāi)發(fā)框架要解決的第一個(gè)問(wèn)題，要解決兼容性問(wèn)題就得首先準(zhǔn)確判斷出瀏覽器的類(lèi)型及其版本，而判斷瀏覽器的版本一般只能通過(guò)分析瀏覽器的userAgent才能知道.今天我們把各種判斷方法都總結(jié)一下，希望對(duì)大家有所幫助
2014-09-09
jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
jQuery實(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
談一談jQuery核心架構(gòu)設(shè)計(jì)
這篇文章主要和大家談一談jQuery核心架構(gòu)設(shè)計(jì)，什么是jQuery核心架構(gòu)設(shè)計(jì)，多方面了解jQuery核心架構(gòu)設(shè)計(jì)，感興趣的小伙伴們可以參考一下
2016-03-03