快捷導(dǎo)航

使用jQuery jqPlot插件繪制柱狀圖

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

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

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

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

　　具體實現(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)收', '銷售', '退票', '驗證'];

                 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, // 是否強調(diào)顯示圖中的數(shù)據(jù)節(jié)點

                         renderer: $.jqplot.BarRenderer,

                         rendererOptions: {

                             barWidth: 50,

                             barMargin: 50

                         }

                     },

                     axes: {

                         xaxis: {

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

                             renderer: $.jqplot.CategoryAxisRenderer,

                             ticks: ticks,

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

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

                             tickOptions: {

                                 show: true,

                                 fontSize: '14px',

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

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

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

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

                             }

                         },

                         yaxis: {

                             show: true,

                             showTicks: false,        // 是否顯示刻度線以及坐標(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)計數(shù)據(jù)失敗!");

             }

         });

     };