柱状图实现文章统计
一、问题描述：
统计各个类别的文章总数，以柱状图表示。
二、实现
（1）首先根据sql语句得到每一种类型文章数目统计，并存放在表中。如下所示：
（2）在eclipse中编写代码实现柱状图：
实体层：
1 public class BarBean {
2 public String name;
3
4 public String getName() {
5 return name;
6 }
7 public void setName(String name) {
8 this.name = name;
9 }
10 public Integer getNum() {
11 return num;
12 }
13 public void setNum(Integer num) {
14 this.num = num;
15 }
16 public Integer num;
17 }
dao层：
1 public class BarDao {
2 public ArrayList<BarBean> select_all(){
3
4 Connection conn = null;
5 Statement stmt=null;
6 ResultSet rst = null;
7 try{
8 conn = Dbutil.getConnection();
9 stmt = conn.createStatement();
10 String sql = "select * from bar";
11 rst = stmt.executeQuery(sql);
12 ArrayList<BarBean> array = new ArrayList<BarBean>();
13 while(rst.next())
14 {
15 BarBean bar = new BarBean();
16 bar.setName(rst.getString("name"));
17 bar.setNum(rst.getInt("num"));
18 array.add(bar);
19 }
20 stmt.close();
21 rst.close();
22 return array;
23
24 }catch(SQLException e){
25 System.out.println("Error");
26 return new ArrayList<BarBean>();
27 }
28 }
29
30 }
servlet层：
1 public class Barservlet extends HttpServlet {
2 private static final long serialVersionUID = 1L;
3 BarDao dao=new BarDao();
4 public void setdata(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
5 request.setCharacterEncoding("utf-8");
6 response.setContentType("text/html;charset=UTF-8");
7 JSONArray json=new JSONArray();
8 List<BarBean> list = dao.select_all();
9 for(int i=0;i<list.size();i++) {
10 JSONObject ob=new JSONObject();
11 ob.put("name", list.get(i).getName());
12 ob.put("num", list.get(i).getNum());
13 json.add(ob);
14 }
15 System.out.println(json.toString());
16 PrintWriter out = response.getWriter();
17 //out.write("[120, 200, 150, 80, 70, 110, 130]");
18 System.out.println(list.size());
19 response.getWriter().write(json.toString());
20 }
21 /**
22 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
23 */
24 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
25 // TODO Auto-generated method stub
26 request.setCharacterEncoding("utf-8");
27 String method=request.getParameter("method");
28 if(method.equals("setdata")) {
29 try {
30 setdata(request,response);
31 } catch (ServletException e) {
32 e.printStackTrace();
33 } catch (IOException e) {
34 e.printStackTrace();
35 }
36 }
37
38 }
39
40 /**
41 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
42 */
43 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
44 doGet(request, response);
45 }
46
47 }
jsp页面：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <script src="echarts.js"></script>
8 <script src="js/jquery.min.js"></script>
9 <body>
10 <div id="main" style="height:500%;"></div>
11 <button onclick="getdata()">点击</button>
12 <div id="main" style="height:500%;"></div>
13 </body>
14 <script>
15 var namedata= new Array(0);
16 var numdata= new Array(0);
17 function getdata(){
18 var url = "Barservlet?method=setdata&randnum=" + Math.random();
19 $.ajax({
20 type: "get",
21 url: url,
22 data: [],
23 dataType: "json",
24 success: function(result){
25 fenli(result)
26 showbar()
27
28 },
29 error: function(){
30 alert("错误");
31 }
32 });
33 }
34 function showbar() {
35 var chartDom = document.getElementById('main');
36 var myChart = echarts.init(chartDom);
37 var option;
38
39 option = {
40 title: {
41 text: '各类别文章总数',
42 },
43 xAxis: {
44 type: 'category',
45 data: namedata
46 },
47 yAxis: {
48 type: 'value'
49 },
50 series: [
51 {
52 data:numdata,
53 type: 'bar',
54 showBackground: true,
55 backgroundStyle: {
56 color: 'rgba(180, 180, 180, 0.2)'
57 }
58 }
59 ]
60 };
61
62 option && myChart.setOption(option);
63 }
64 function fenli(data){
65 for(i in data){
66 namedata.push(data[i].name)
67 numdata.push(data[i].num)
68 }
69 }
70 </script>
71 </html>
浙公网安备 33010602011771号