快捷導(dǎo)航

使用jQuery jqPlot插件繪制柱狀圖

更新時(shí)間：2014年12月18日 10:15:14 投稿：hebedich

這篇文章主要介紹了使用jQuery jqPlot插件繪制柱狀圖,需要的朋友可以參考下

　　在一個(gè)項(xiàng)目研發(fā)過(guò)程中，需要顯示賬戶(hù)的資金情況，為了給客戶(hù)良好的體驗(yàn)我們采用了柱狀圖形展現(xiàn)，繪圖的過(guò)程如果使用原生態(tài)腳本繪制這樣比較麻煩，時(shí)間也會(huì)比較長(zhǎng)，所以我們選擇了jqPlot插件進(jìn)行繪制，這樣可以節(jié)省大量的時(shí)間，也能很快就能展示給用戶(hù)。

　　插件官方地址：http://www.jqplot.com/

　　具體實(shí)現(xiàn)如下：

　　引用JS文件：

復(fù)制代碼代碼如下:

 <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" />

 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shCoreDefault.min.css" rel="stylesheet" />

 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shThemejqPlot.min.css" rel="stylesheet" />

 <script src="~/Scripts/asset/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shCore.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushJScript.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushXml.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/excanvas.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.barRenderer.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>

 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.pointLabels.min.js"></script>

　　Html代碼

復(fù)制代碼代碼如下:

　　Javascript腳本：

復(fù)制代碼代碼如下:

 var chartBar = function () {

         var data={param1:param1,param2:param2};//傳遞參數(shù)

         $("#chart1").html("");//繪圖DIV

         var s1;

         $.ajax({

             type: "POST",

             url: '../Home/AccountSum',

             data: data,

             datatype: "json",

             async: false,

             success: function (d) {

                 if (d.flag) {

                     s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat(d.data.Total6)];

                 } else {

                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];

                 }

                 $.jqplot.config.enablePlugins = true;

                 var ticks = ['充值', '提款', '應(yīng)收', '銷(xiāo)售', '退票', '驗(yàn)證'];

                 var plot1 = $.jqplot('chart1', [s1], {

                     // Only animate if we're not using excanvas (not in IE 7 or IE 8)..

                     //animate: !$.jqplot.use_excanvas,

                     seriesDefaults: {

                         pointLabels: { show: true },

                         shadow: false,

                         showMarker: true, // 是否強(qiáng)調(diào)顯示圖中的數(shù)據(jù)節(jié)點(diǎn)

                         renderer: $.jqplot.BarRenderer,

                         rendererOptions: {

                             barWidth: 50,

                             barMargin: 50

                         }

                     },

                     axes: {

                         xaxis: {

                             show: true,    //是否自動(dòng)顯示坐標(biāo)軸

                             renderer: $.jqplot.CategoryAxisRenderer,

                             ticks: ticks,

                             showTicks: true,        // 是否顯示刻度線(xiàn)以及坐標(biāo)軸上的刻度值  

                             showTickMarks: true,    //設(shè)置是否顯示刻度

                             tickOptions: {

                                 show: true,

                                 fontSize: '14px',

                                 fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋體b8b體,sans-serif',

                                 showLabel: true, //是否顯示刻度線(xiàn)以及坐標(biāo)軸上的刻度值

                                 showMark: false,//設(shè)置是否顯示刻度

                                 showGridline: false // 是否在圖表區(qū)域顯示刻度值方向的網(wǎng)格

                             }

                         },

                         yaxis: {

                             show: true,

                             showTicks: false,        // 是否顯示刻度線(xiàn)以及坐標(biāo)軸上的刻度值  

                             showTickMarks: false,     //設(shè)置是否顯示刻度

                             autoscale: true,

                             borderWidth: 1,

                             tickOptions: {

                                 show: true,

                                 showLabel: false,

                                 showMark: false,

                                 showGridline: true,

                                 formatString: '￥%.2f'

                             }

                         },

                     },

                     grid: {

                         drawGridLines: true,

                         drawBorder: false,

                         shadow: false,

                         borderColor: '#000000',     // 設(shè)置圖表的(最外側(cè))邊框的顏色

                         borderWidth: 1           //設(shè)置圖表的（最外側(cè)）邊框?qū)挾?nbsp; 

                     },

                     highlighter: { show: false }

                 });

             },

             error: function () {

                 alert("獲取圖形統(tǒng)計(jì)數(shù)據(jù)失敗!");

             }

         });

     };

　　效果圖：

　　今天就寫(xiě)到這里吧，初步看了一下官方上的事例，功能還是蠻強(qiáng)大的，使用也很方便、容易，根據(jù)本項(xiàng)目的需求，后續(xù)可能還會(huì)增加一些。不過(guò)在使用過(guò)程中也發(fā)現(xiàn)了一些問(wèn)題，部分實(shí)現(xiàn)不一定可以滿(mǎn)足。

您可能感興趣的文章: