快捷導(dǎo)航

jQuery插件FusionCharts實(shí)現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】

更新時(shí)間：2017年03月06日 11:56:47 作者：翱翔天地

這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了FusionCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件FusionCharts實(shí)現(xiàn)的2D柱狀圖效果。分享給大家供大家參考，具體如下：

1、實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FusionCharts最新FusionCharts2D柱狀圖</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script type="text/javascript" src="FusionCharts/fusioncharts.js" ></script>
    <script>
      FusionCharts.ready(function(){
        var columnChart = new FusionCharts({
          type:"column2d",
          renderAt:"column2D",
          width:"1345",
          height:"620",
          dataSource:{
            "chart":{
              "caption":"月銷(xiāo)售量",
              "xAxisName":"月份",
              "yAxisName":"銷(xiāo)售量",
              "exportEnabled":"1"
            },
            "data":[
              {
                "label":"1月",
                "value":"120"
              },{
                "label":"2月",
                "value":"230"
              },{
                "label":"3月",
                "value":"654"
              },{
                "label":"4月",
                "value":"454"
              },{
                "label":"5月",
                "value":"323"
              },{
                "label":"6月",
                "value":"640"
              },{
                "label":"7月",
                "value":"431"
              },{
                "label":"8月",
                "value":"809"
              },{
                "label":"9月",
                "value":"345"
              },{
                "label":"10月",
                "value":"430"
              },{
                "label":"11月",
                "value":"870"
              },{
                "label":"12月",
                "value":"670"
              }]
          }
        }).render();
      });
    </script>
  </head>
  <body>
    <div id="column2D"></div>
  </body>
</html>

2、實(shí)現(xiàn)效果圖：

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

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

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

您可能感興趣的文章:

相關(guān)文章

jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
本文給大家分享的是使用jQuery的masonry庫(kù)和infinitescroll庫(kù)實(shí)現(xiàn)的瀑布流美女圖片展示的實(shí)例，效果非常不錯(cuò)，這里推薦給大家，有需要的小火把可以參考下。
2015-04-04
jQuery學(xué)習(xí)筆記獲取jQuery對(duì)象
為了將Web的結(jié)構(gòu)層和表現(xiàn)層、行為層徹底分離，就不應(yīng)該在HTML標(biāo)簽上直接定義樣式或事件等。這意味著要想設(shè)置頁(yè)面中的某個(gè)元素，就需要先把這個(gè)元素選擇出來(lái)，選擇器正是解決這個(gè)問(wèn)題的技術(shù)
2012-09-09
自己動(dòng)手實(shí)現(xiàn)jQuery Callbacks完整功能代碼詳解
最近大量的用到j(luò)Query Callbacks 對(duì)象，jQuery庫(kù)中的$.ajax()和$.Deferred() 對(duì)象也是基于這個(gè)對(duì)象實(shí)現(xiàn)，下面我們也模擬實(shí)現(xiàn)jQuery Callbacks 對(duì)象的部分功能
2013-11-11
jQuery添加和刪除指定標(biāo)簽的方法
這篇文章主要介紹了jQuery添加和刪除指定標(biāo)簽的方法，通過(guò)動(dòng)態(tài)的給元素添加刪除一個(gè)CSS類(lèi)可以實(shí)現(xiàn)此功能,需要的朋友可以參考下
2015-12-12
jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2016-07-07
c#+jquery實(shí)現(xiàn)獲取radio和checkbox的值
這篇文章主要介紹了c#結(jié)合jquery實(shí)現(xiàn)獲取radio和checkbox的value值的方法，將代碼分享給大家,需要的朋友可以參考下
2014-12-12
jQuery的事件處理你知道多少
這篇文章主要為大家詳細(xì)介紹了jQuery的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery獲得內(nèi)容和屬性方法解析
這篇文章主要介紹了JQuery獲得內(nèi)容和屬性方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
jquery實(shí)現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實(shí)現(xiàn)靜態(tài)搜索功能的示例代碼，可通過(guò)輸入搜索文字進(jìn)行篩選信息。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03