使用jQuery jqPlot外掛程式繪製長條圖_jquery

　　在一個專案研發過程中，需要顯示帳戶的資金狀況，為了給客戶良好的體驗我們採用了柱狀圖形展現，繪圖的過程如果使用原生態腳本繪製這樣比較麻煩，時間也會比較長，所以我們選擇了jqPlot插件來繪製，這樣可以節省大量的時間，也能很快就能展示給使用者。

　　外掛程式官方網址：http://www.jqplot.com/

　　具體實現如下：

　　引用JS檔：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 
 
 
 
 

　　Html代碼

複製程式碼 程式碼如下:

　　Javascript腳本：

複製程式碼 程式碼如下:

 var ChartBar = function () {
         var data={param1:param1,param2:param2};//提交參數
         $("#chart1").html("");//繪圖DIV
         var s1;
         $.ajax({
             輸入：“POST”，
             url: '../Home/AccountSum',
             資料：數據，
             資料型態：“json”，
             非同步：假，
             成功：函數 (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)];
                 } 其他 {
                                      }
                 $.jqplot.config.enablePlugins = true;
                 var ticks = ['儲值', '提款', '應收', '出售', '退票', '驗證』];
                 varplot1 = $.jqplot('chart1', [s1], {
                     //且僅在我們不使用 excanvas 時設定動畫（不在 IE 7 或 IE 8 中）..
                     //動畫：!$.jqplot.use_excanvas,
                     為 系列預設：{
                         pointLabels: { 顯示: true },
                        且為陰影：假，且
                         showMarker: true, // 是否強調顯示焦點的資料節點
                         渲染器：$.jqplot.BarRenderer,
                         渲染器選項：{
                             且形寬：50，
                             式吧台式保證金：50
                         }
                     },
                     軸部：{
                         x軸：{
                             show: true,    ///是否自動顯示座標軸
                             renderer: $.jqplot.CategoryAxisRenderer,
                             ticks: ticks,
                             showTicks: true,                                   showTickMarks: true,    //設定是否顯示刻度
                             tickOptions: {
                                 show: true,
                                 fontSize: '14px',
                                                                  showLabel: true, //是否顯示刻度線以及座標軸上的刻度值
                                而言 showMark: false,//設定是否顯示刻度
                                以來的網格上顯示刻度值方向。                              }
                         },
                         yaxis: {
                             show: true,
                             showTicks: false,                                   showTickMarks: false,     //設定是否顯示刻度
                             autoscale: true,
                             borderWidth: 1,
                             tickOptions: {
                                 show: true,
                                而言 showLabel: false,
                                而言 showMark: false,
                                而言 showGridline: true,
                                且為matString: '￥%.2f'
                             }
                         },
                     },
                     grid: {
                         drawGridLines: true,
                         drawBorder: false,
                         shadow: false,
                         borderColor: '#000000',     // 設定的(最外側)邊框的顏色                      為 show: false }
                 });
             },
             error: function () {
                 alert("取得圖形統計資料失敗!");
             }
         });
     };


　　效果圖：

　　今天就寫到這裡吧，初步看了一下官方上的事例，功能還是蠻強大的，使用也很方便、容易，根據本項目的需求，後續可能還會增加一些。不過在使用過程中也發現了一些問題，部分實作不一定可以滿足。