使用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