jqPlot插件繪製柱狀圖

時間 2019-11-06

標籤 jqplot 插件繪製柱狀简体版

原文原文鏈接

　　天天都在這裏看別人寫的東西，確發現本身很久沒寫文章了，多是由於確實很忙，或許這也是在給本身找的一種藉口。 javascript

　　不過這也是我人生中加入得第一個創業公司，來到這裏才知道創業公司其實真的很辛苦，產品的萌芽纔開始，確有一大堆的事情要作，而人手確不充足。或許這也是爲了下降創業過程當中的風險，可是咱們卻要已僅有的資源去創造出產品，搶佔市場，爭取各個空隙的座位，這樣才能爲咱們的產品爭取到更長的生存時間，這樣咱們纔會有更好的收益和回報。css

　　旅遊行業將會愈來愈火爆，目前來看已經有很多的企業已經入住了旅遊圈，互聯網上也出現了更多的商務平臺，而咱們也步入了此行列，雖然咱們的產品也屬於電商，可是咱們是給景區提供電商平臺的解決方案，相信這也是一種新模式的興起，咱們將會佔領景區市場，同時也會迎來更多的競爭者，咱們會用咱們的速度、質量和服務佔領市場。html

　　在此產品研發過程當中，須要顯示帳戶的資金狀況，爲了給客戶良好的體驗咱們採用了柱狀圖形展示，繪圖的過程若是使用原生態腳本繪製這樣比較麻煩，時間也會比較長，因此咱們選擇了jqPlot插件進行繪製，這樣能夠節省大量的時間，也能很快就能展現給用戶。java

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

　　具體實現以下：ajax

　　引用JS文件：json

 1 <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
 2 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shCoreDefault.min.css" rel="stylesheet" />
 3 <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shThemejqPlot.min.css" rel="stylesheet" />
 4 <script src="~/Scripts/asset/jquery-1.10.2.min.js"></script>
 5 <script type="text/javascript" src="~/Scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script>
 6 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shCore.js"></script>
 7 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushJScript.js"></script>
 8 <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushXml.js"></script>
 9 <script type="text/javascript" src="~/Scripts/asset/jqplot/excanvas.min.js"></script>
10 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.barRenderer.min.js"></script>
11 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
12 <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.pointLabels.min.js"></script>

View Code

　　Html代碼canvas

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

　　Javascript腳本：async

 1 var chartBar = function () {
 2         var data={param1:param1,param2:param2};//傳遞參數
 3         $("#chart1").html("");//繪圖DIV
 4         var s1;
 5         $.ajax({
 6             type: "POST",
 7             url: '../Home/AccountSum',
 8             data: data,
 9             datatype: "json",
10             async: false,
11             success: function (d) {
12                 if (d.flag) {
13                     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)];
14                 } else {
15                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
16                 }
17                 $.jqplot.config.enablePlugins = true;
18                 var ticks = ['充值', '提款', '應收', '銷售', '退票', '驗證'];
19                 var plot1 = $.jqplot('chart1', [s1], {
20                     // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
21                     //animate: !$.jqplot.use_excanvas,
22                     seriesDefaults: {
23                         pointLabels: { show: true },
24                         shadow: false,
25                         showMarker: true, // 是否強調顯示圖中的數據節點
26                         renderer: $.jqplot.BarRenderer,
27                         rendererOptions: {
28                             barWidth: 50,
29                             barMargin: 50
30                         }
31                     },
32                     axes: {
33                         xaxis: {
34                             show: true,    //是否自動顯示座標軸
35                             renderer: $.jqplot.CategoryAxisRenderer,
36                             ticks: ticks,
37                             showTicks: true,        // 是否顯示刻度線以及座標軸上的刻度值  
38                             showTickMarks: true,    //設置是否顯示刻度
39                             tickOptions: {
40                                 show: true,
41                                 fontSize: '14px',
42                                 fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋體b8b體,sans-serif',
43                                 showLabel: true, //是否顯示刻度線以及座標軸上的刻度值
44                                 showMark: false,//設置是否顯示刻度
45                                 showGridline: false // 是否在圖表區域顯示刻度值方向的網格
46                             }
47                         },
48                         yaxis: {
49                             show: true,
50                             showTicks: false,        // 是否顯示刻度線以及座標軸上的刻度值  
51                             showTickMarks: false,     //設置是否顯示刻度
52                             autoscale: true,
53                             borderWidth: 1,
54                             tickOptions: {
55                                 show: true,
56                                 showLabel: false,
57                                 showMark: false,
58                                 showGridline: true,
59                                 formatString: '￥%.2f'
60                             }
61                         },
62                     },
63                     grid: {
64                         drawGridLines: true,
65                         drawBorder: false,
66                         shadow: false,
67                         borderColor: '#000000',     // 設置圖表的(最外側)邊框的顏色
68                         borderWidth: 1           //設置圖表的（最外側）邊框寬度  
69                     },
70                     highlighter: { show: false }
71                 });
72             },
73             error: function () {
74                 alert("獲取圖形統計數據失敗!");
75             }
76         });
77     };