使用chart、绘制图表

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语句

 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     }

 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>

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