利用ajax做的柱状图，线性统计图，饼状图

柱状图，两个不同类型的数据
以下是html页面代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title></title>
 5     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
 6     <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>
 7     <script src="js/handlebars.js" type="text/javascript"></script>
 8     <script src="js/highcharts.js" type="text/javascript"></script>
 9     <script src="js/exporting.js" type="text/javascript"></script>
10     <script src="js/tuxing.js" type="text/javascript"></script>
11     <script type="text/javascript">
12         function clis() {
13             coundan();
14             Dindan();
15         }
16        
17         //柱状
18         function coundan() {
19             var tu = $("#dd1").val();
20             var ends = $("#dd2").val();
21 //            alert(tu);
22 //            alert(ends);
23             $.ajax({
24                 type: "POST",
25                 url: "CountShow.aspx",
26                 data: {
27                     method: "dan",
28                     str: tu,
29                     end: ends
30                 },
31                 datatype: 'json',
32                 success: function (r) {
33                     alert(r);
34                     if (r.length > 0) {
35                         var r = $.parseJSON(r);
36                             alert(r);
37                         ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy);
38                     }
39                 },
40                 error: function (XMLHttpRequest, textStatus, errorThrown) { },
41                 complete: function (XMLHttpRequest, textStatus) { }
42             });
43         }
44         //饼型
45         function Dindan() {
46             var tu = $("#dd1").val();
47             var ends = $("#dd2").val();
48             $.ajax({
49                 type: "POST",
50                 url: "CountShow.aspx",
51                 data: {
52                     method: "bingdan",
53                     str: tu,
54                     end: ends
55                 },
56                 datatype: 'json',
57                 success: function (r) {
58                     if (r.length > 0) {
59                         var r = $.parseJSON(r);
60                         Bing("binlist", "订单总额比例", "单数", r,"金额",r);
61                     }
62                 },
63                 error: function (XMLHttpRequest, textStatus, errorThrown) { },
64                 complete: function (XMLHttpRequest, textStatus) { }
65             });
66         }
67 
68     </script>
69     <style type="text/css">
70         .cs
71         {
72             width: 65px;
73         }
74         .td
75         {
76            width:500px;
77            height:400px;
78             
79             }
80     </style>
81 </head>
82 <body style="overflow: scroll">
83     <input type="text"" id="dd1" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})"  class="cs" />
84       
85     <input type="text" id="dd2" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" />
86         
87         <button id="bbt" onclick="clis()">
88             查询</button>
89         <div id="tongdan"  class="td">
90         </div>
91         <div id="binlist"  class="td">
92         </div>
93 </body>
94 </html>
View Code
柱状图，两个不同类型的数据
