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

使用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ù)制代碼 代碼如下:

<div id="chart1" class="box"></div>

  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ù)失敗!");
             }
         });
     };

  效果圖:

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

相關(guān)文章

最新評論