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

jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】

 更新時間:2017年03月03日 14:21:01   作者:翱翔天地  
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結(jié)合完整實例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件FusionCharts繪制的3D餅狀圖效果。分享給大家供大家參考,具體如下:

1、實現(xiàn)源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>最新版FusionCharts3D餅圖</title>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/fusioncharts.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 98%;
        font-family: "微軟雅黑";
        font-size: 12px;
      }
    </style>
    <script>
      $(document).ready(function(){
        FusionCharts.ready(function () {
          var ageGroupChart = new FusionCharts({
            type: 'pie3d',
            renderAt: 'pie3D',
            width: '1350',
            height: '650',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "統(tǒng)計2015年每個季度的收入比例",
                "subCaption": "",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "decimals": "2",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
              },
              "data": [
                {
                  "label": "第一季度",
                  "value": "255040"
                },
                {
                  "label": "第二季度",
                  "value": "689545"
                },
                {
                  "label": "第三季度",
                  "value": "784595"
                },
                {
                  "label": "第四季度",
                  "value": "325848"
                }
              ]
            }
          }).render();
        });
      });
    </script>
  </head>
  <body>
    <div id="pie3D"></div>
  </body>
</html>

2、實現(xiàn)效果圖:

附:完整實例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

  • jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法

    jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法

    這篇文章主要介紹了jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法,實例分析了jQuery中text和html方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • 由點(diǎn)擊頁面其它地方隱藏div所想到的jQuery的delegate

    由點(diǎn)擊頁面其它地方隱藏div所想到的jQuery的delegate

    在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個需求就是點(diǎn)擊一div內(nèi)部做某些操作,而點(diǎn)擊頁面其它地方隱藏該div。比如很多導(dǎo)航菜單,當(dāng)菜單展開的時候,就會要求點(diǎn)擊頁面其它非菜單地方,隱藏該菜單
    2013-08-08
  • jQuery 刪除/替換DOM元素的幾種方式

    jQuery 刪除/替換DOM元素的幾種方式

    在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結(jié)果再執(zhí)行remove操作
    2014-05-05
  • json格式的javascript對象用法分析

    json格式的javascript對象用法分析

    這篇文章主要介紹了json格式的javascript對象用法,結(jié)合實例形式總結(jié)分析了javascript針對json格式數(shù)據(jù)操作的常見技巧,需要的朋友可以參考下
    2016-07-07
  • firefox下jquery ajax返回object XMLDocument處理方法

    firefox下jquery ajax返回object XMLDocument處理方法

    使用jquery ajax處理struts2 返回json類型的時候,ajax執(zhí)行成功返回結(jié)果為object XMLDocument,解決方法如下
    2014-01-01
  • 再說AutoComplete自動補(bǔ)全之實現(xiàn)原理

    再說AutoComplete自動補(bǔ)全之實現(xiàn)原理

    再說AutoComplete自動補(bǔ)全之實現(xiàn)原理,這里以asp.net后臺為主,考慮到性能最好是生成xml并入緩存。
    2011-11-11
  • 如何編寫jquery插件

    如何編寫jquery插件

    編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個封裝,以便在其他地方重復(fù)使用,提高開發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件
    2017-03-03
  • jquery插件之easing 動態(tài)菜單

    jquery插件之easing 動態(tài)菜單

    jQuery Easing Plugin 是一個簡單的為對象擴(kuò)展高級屬性和選項的jQuery插件。
    2010-08-08
  • jQuery實現(xiàn)的仿百度分頁足跡效果代碼

    jQuery實現(xiàn)的仿百度分頁足跡效果代碼

    這篇文章主要介紹了jQuery實現(xiàn)的仿百度分頁足跡效果代碼,采用jQuery針對奇偶數(shù)不同的頁碼設(shè)置不同的樣式,非常簡單實用,需要的朋友可以參考下
    2015-10-10
  • jquery+ajax實現(xiàn)直接提交表單實例分析

    jquery+ajax實現(xiàn)直接提交表單實例分析

    這篇文章主要介紹了jquery+ajax直接提交表單的方法,涉及jQuery調(diào)用ajax進(jìn)行表單提交所涉及的表單序列化、數(shù)值傳遞與處理、回調(diào)函數(shù)等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06

最新評論