使用chart绘制图表

Posted 2020-06-09

↑为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