使用chart、繪制圖表

↑為js 的chart控件所畫、使用起來非常簡單、易用

  繪畫此圖、分為幾個步驟、将需要展示出來的資料擷取、生成為json格式資料、傳遞到前端AmCharts、配置相關屬性即可

首先是簡短的查詢

　　　　

1 String sql = "SELECT DISTINCT NVL(a.qyxz,'其他') AS xz, COUNT(a.id) AS khs, round(SUM(t.yye), 2) AS yye, round(SUM(t.yye) / (SELECT SUM(yye) FROM t_bjd_info where is_deleted = '0') * 100, 0) AS szbl, round(SUM(t.yye) / COUNT(a.id), 2) AS pjncz, NVL(round((SELECT SUM(yye) FROM t_bjd_info where is_deleted = '0'), 2),0) AS total FROM t_bjd_info t LEFT JOIN account a ON a.id = t.cusname WHERE t.is_deleted = '0' AND " + datetime + " GROUP BY NVL(a.qyxz,'其他') " + order_by_accname + "";
2             
3                     
4 List<CCObject> templist = cs.cqlQuery("account", sql); // 執行sql語句      

這裡使用最常用的客戶表、用做案例、此處擷取到資料之後、就是使用循環周遊該list集合、也可使用JSONObject、将該list的轉換為json資料、憑個人愛好

1 if (templist.size() > 0) { // 判斷是否有資料
 2             for (int i = 0; i < templist.size(); i++) {
 3                 if (!"".equals(String.valueOf(templist.get(i).get("xz")))) {
 4                     qyxz = String.valueOf(templist.get(i).get("xz"));// 擷取企業性質資料
 5                     yye = String.valueOf(templist.get(i).get("yye"));// 擷取營業額資料
 6                     pjncz = String.valueOf(templist.get(i).get("pjncz"));// 擷取平均年産值
 7                     last_list += "{\"qyxz\":\"" + qyxz + "\",\"pjncz\":" + pjncz + ",\"turnover\":" + yye + "},";// 拼接json字元
 8                 }
 9             }
10         }
11         // 将json最後一個逗号去掉
12 if (last_list.length() > 0) {
13         last_list = last_list.substring(0, last_list.length() - 1);
14     }      

 通過for循環已經拿到該需要展示的資料、并将其拼成了json字元串、由于這樣本身是用逗号分割json格式資料、最後一個逗号、此時也還在上面，用上substring、将其最後一個逗号去掉

此時java代碼部分可根據實際需求更改資料、貼上去的代碼隻是一個簡單的執行個體、僅供參考

接下來使用chart控件、畫圖、 首先得先引入包、之後配置屬性、上代碼

1 <script type="text/javascript">
 2                 var chart;
 3                 var chartData = [<cc:outprint>ywylist</cc:outprint>];
 4                 AmCharts.ready(function () {
 5                 // SERIAL CHART
 6                 chart = new AmCharts.AmSerialChart();
 7                 chart.dataProvider = chartData;//Array數組資料對象、 也就是json資料
 8                 chart.categoryField = "qyxz";//類别、分類的主字段、
 9                 chart.plotAreaBorderAlpha = 0.2;
10 
11                 // AXES
12                 // category
13                 var categoryAxis = chart.categoryAxis;
14                 categoryAxis.gridAlpha = 0.1;//網格線不透明度
15                 categoryAxis.axisAlpha = 0;//軸不透明度。值範圍為1 - 0。
16                 categoryAxis.gridPosition = "start";//指定一個網格線是放置在一個單元格的中心，或在一個單元格的開頭。
17 
18                 // value
19                 var valueAxis = new AmCharts.ValueAxis();
20                 valueAxis.stackType = "regular";
21                 valueAxis.gridAlpha = 0.1;
22                 valueAxis.axisAlpha = 0;
23                 chart.addValueAxis(valueAxis);
24                 
25                 var graph = new AmCharts.AmGraph();
26                 graph.title = "平均年産值";
27                 graph.labelText = "[[value]]";
28                 graph.valueField = "pjncz";
29                 graph.type = "column";//這裡指該圖表的描述、根據不同要求給予不同的值、也就是圖樣展示方式、比如折線圖、柱狀圖、餅圖......
30                 graph.lineAlpha = 0;
31                 graph.fillAlphas = 1;
32               //  graph.lineColor = "#C72C95";
33                 graph.lineColor = "orange";
34                 graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]&nbsp家</b></span>";
35                 chart.addGraph(graph);
36 
37                      // second graph
38                 graph = new AmCharts.AmGraph();
39                 graph.title = "營業額";
40                 graph.labelText = "[[value]]";
41                 graph.valueField = "turnover";
42                 graph.type = "column";
43                 graph.newStack = true; // this line starts new stack
44                 graph.lineAlpha = 0;
45                 graph.fillAlphas = 1;
46               //  graph.lineColor = "#D8E0BD";
47                 graph.lineColor = "blue";
48                 graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b>W</span>";
49                 chart.addGraph(graph); 
50                 // LEGEND
51                 var legend = new AmCharts.AmLegend();
52                 legend.borderAlpha = 0.2;
53                 legend.horizontalGap = 10;
54                 chart.addLegend(legend);
55 
56                 // WRITE
57                 chart.write("chartdiv");//将該配置寫入頁面id為chartdiv标簽中、
58             });
59             </script>
      

配置完了上面、最後在html、添加上一個div标簽

1 <div id="chartdiv" style="height: 400px; width:50%"></div>      

至此、圖就已經能出來了、

 連接配接為、需要用的包：

http://files.cnblogs.com/files/fanjs/js%E5%9B%BE%E8%A1%A8.rar

轉載于:https://www.cnblogs.com/fanjs/p/5163902.html