欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

    這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文內(nèi)容介紹詳細(xì),需要的小伙伴可以參考一下
    2022-03-03
  • 使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接

    使用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ì)話框功能使用全解析

    這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下
    2016-04-04
  • S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼

    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ù)加載圖片常用方法

    這篇文章主要介紹了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ù)

    這篇文章主要介紹了Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • js/jquery判斷瀏覽器的方法小結(jié)

    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ū)別介紹

    這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-09-09
  • jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼

    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ì),多方面了解jQuery核心架構(gòu)設(shè)計(jì),感興趣的小伙伴們可以參考一下
    2016-03-03

最新評(píng)論