jqPlot，一个 jQuery这个 JavaScript 框架的绘图插件

因为项目中需要做报表的功能，于是学习了如何使用jqplot这个绘图插件

结合ajax技术，动态交互后台数据

前前后后花了三四天的时间。

感觉它会出来的想说还可以。

我的后台模板是bootstrap，在模板中有jqplot的模板，我查看了源代码。修改了源代码就形成了现在的东西，

 1  <script>
 2     /*
 3             Template Name: Color Admin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
 4             Version: 1.4.0
 5             Author: Sean Ngu
 6             Website: http://www.seantheme.com/color-admin-v1.4/
 7     */
 8
 9
10     </script>
11     <script>
12         $.ajax( {
13             type : ‘POST‘,
14             dataType : ‘json‘, // json对象
15             url : "ticket!result.action",
16             data : null,
17             success : function(response, status, xhr) {
18                 //var s = "";
19                 var a = [];
20                 $.each(response,function(index, value) {
21                     //alert(index);
22                     a[index+1]=this;
23                     //alert(this);
24                     })
25                 App.init();
26                 var blue="#348fe2",blueLight="#5da5e8",blueDark="#1993E4",aqua="#49b6d6",aquaLight="#6dc5de",aquaDark="#3a92ab",green="#00acac",greenLight="#33bdbd",greenDark="#008a8a",orange="#f59c1a",orangeLight="#f7b048",orangeDark="#c47d15",dark="#2d353c",grey="#b6c2c9",purple="#727cb6",purpleLight="#8e96c5",purpleDark="#5b6392",red="#ff5b57";
27                 var handleInteractiveChart=function()
28                 {
29                 "use strict";
30                 function e(e,t,n)
31                 {
32                 $(‘<div id="tooltip" class="flot-tooltip">‘+n+"</div>").css({top:t-45,left:e-55}).appendTo("body").fadeIn(200)}
33                 if($("#interactive-chart").length!==0)
34                 {
35                 //销售额
36                 var t=[[1,a[1]],[2,a[2]],[3,a[3]],[4,a[4]],[5,a[5]],[6,a[6]],[7,a[7]],[8,a[8]],[9,a[9]],[10,a[10]],[11,a[11]],[12,a[12]]];
37                 //金牌折扣
38                 //var n=[[1,0.10],[2,0.6],[3,0.10],[4,0.12],[5,0.18],[6,0.20],[7,0.25],[8,0.23],[9,0.24],[10,0.25],[11,0.18],[12,0.30],[13,0.25],[14,0.25],[15,0.30],[16,0.27],[17,0.20],[18,0.18],[19,0.31],[20,0.23]];
39                 //银牌折扣
40                 //var p=[[1,0.30],[2,0.16],[3,0.11],[4,0.2],[5,0.28],[6,0.10],[7,0.15],[8,0.23],[9,0.14],[10,0.15],[11,0.28],[12,0.20],[13,0.15],[14,0.15],[15,0.20],[16,0.17],[17,0.10],[18,0.28],[19,0.21],[20,0.23]];
41                 //成人
42                 //var q=[[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1],[9,1],[10,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[19,1],[20,1]];
43                 //儿童
44                 //var q1=[[1,0.5],[2,0.5],[3,0.5],[4,0.5],[5,0.5],[6,0.5],[7,0.5],[8,0.5],[9,0.5],[10,0.5],[11,0.5],[12,0.5],[13,0.5],[14,0.5],[15,0.5],[16,0.5],[17,0.5],[18,0.5],[19,0.5],[20,0.5]];
45                 //一年的数据的话需要一年的时间
46                 var r=[[1,"一月"],[2,"二月"],[3,"三月"],[4,"四月"],[5,"五月"],[6,"六月"],[7,"七月"],[8,"八月"],[9,"九月"],[10,"十月"],[11,"十一月"],[12,"十二月"]];
47                 $.plot($("#interactive-chart"),[{data:t,label:"销售额统计",color:blue,lines:{show:true,fill:false,lineWidth:2},points:{show:true,radius:3,fillColor:"#fff"},shadowSize:0},
48                                             ],
49                                                 {xaxis:{ticks:r,tickDecimals:0,tickColor:"#ddd"},
50                                                  yaxis:{ticks:10,tickColor:"#ddd",min:0,max:10000},
51                                                  grid:{hoverable:true,clickable:true,tickColor:"#ddd",borderWidth:1,backgroundColor:"#fff",borderColor:"#ddd"},legend:{labelBoxBorderColor:"#ddd",margin:10,noColumns:1,show:true}});
52                 var i=null;
53                 $("#interactive-chart").bind("plothover",function(t,n,r){
54                 $("#x").text(n.x.toFixed(2));
55                 $("#y").text(n.y.toFixed(2));
56                 if(r)
57                 {
58                 if(i!==r.dataIndex)
59                 {
60                 i=r.dataIndex;
61                 $("#tooltip").remove();
62                 var s=r.datapoint[1].toFixed(2);
63                 var o=r.series.label+" "+s;e(r.pageX,r.pageY,o)}
64
65                 }
66                 else{
67                 $("#tooltip").remove();
68                 i=null
69                 }
70                 t.preventDefault()})}};
71                 var Dashboard=function(){"use strict";
72                 return{init:function(){handleInteractiveChart();}}}()
73                 Dashboard.init();
74
75
76             },
77             error : function() {
78                 alert("加载失败");
79             }
80
81         })
82
83
84     </script>