Java基础编程2—利用bootstrap和highcharts制作图表（柱状图）

最新推荐文章于 2025-05-12 10:36:54 发布

SURLIYA

最新推荐文章于 2025-05-12 10:36:54 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 前端

本文链接：https://blog.youkuaiyun.com/SURLIYA/article/details/72764635

Java 同时被 2 个专栏收录

28 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

本文介绍了一个使用Highcharts库创建的学生年龄分布柱状图的Web应用实例。该应用通过Java后端从MySQL数据库中获取学生年龄数据，并利用AJAX进行异步数据交互。页面集成了Bootstrap框架以实现美观的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境：eclipse MRS.2；

数据库：MySQL5；

jar包：gson-2.2.2.jar，mysql-connector-java-5.1.37-bin.jar；

css文件：bootstrap-theme.css.map，bootstrap-theme.min.css，bootstrap.min.css；

js文件：jquery-2.2.3.min.js，bootstrap.min.js，highcharts-3d.js，highcharts-more.js，highcharts.js

效果图:

highCharts.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>图表_柱状图</title>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script>
	$(document).ready(function() {
		$.ajax({
			url : "getStuAgeInterval",
			type : "get",
			success : function(csv) {

				$('#container').highcharts({

					chart : {
						type : 'column'
					},
					title : {
						text : '学生信息年龄分布柱状图'
					},
					subtitle : {
						text : 'CCIT'
					},
					xAxis : {

						crosshair : true
					},
					yAxis : {
						min : 0,
						title : {
							text : '人数 (个)'
						}
					},

					series : csv

				});//highcharts

			},//ajax success
			error : function(XMLHttpRequest, data, textStatus) {

				alert("status:" + XMLHttpRequest.status);
				alert("readyState:" + XMLHttpRequest.readyState);
				alert("textStatus:" + textStatus);
			}

		});//ajax
	});//
</script>


<style>
div {
	border: 1px solid grey;
}
</style>
</head>
<body>
	<h1>显示学生年龄分布信息</h1>
	<div id="container"></div>

</body>
</html>

DBHelper.java

package com.highCharts.Util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/**
 * 数据库连接
 * 
 * @author xingyang
 *
 */
public class DBHelper {
	private static Connection conn = null;

	public static Connection getConnection() {
		try {
			// 加载MySql的驱动类
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			System.out.println("找不到驱动程序类 ，加载驱动失败！");
			e.printStackTrace();
		}
		String url = "jdbc:mysql://localhost:3306/test"; // 数据库：test
		String username = "root"; // 数据库连接名
		String password = "123456"; // 数据库连接密码
		try {
			conn = DriverManager.getConnection(url, username, password);
			// System.out.println(conn);
		} catch (SQLException se) {
			System.out.println("数据库连接失败！");
			se.printStackTrace();
		}
		return conn;

	}

}

Student.java

package com.highCharts.model;

/**
 * 学生信息类
 * 
 * @author xingyang
 *
 */
public class Student {

	private int id;
	private String name;
	private int age;

	public Student() {
		super();
	}

	public Student(String name, int age) {
		super();
		this.name = name;
		this.age = age;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	@Override
	public String toString() {
		return "student [id=" + id + ", name=" + name + ", age=" + age + "]";
	}

}

Interval.java

package com.highCharts.model;

import java.util.ArrayList;
import java.util.List;

/**
 * 图表获取学生信息的数据类
 * 
 * @author xingyang
 *
 */
public class Interval {

	private String name;
	private List<Integer> data;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<Integer> getData() {
		return data;
	}

	public void setData(ArrayList<Integer> data) {
		this.data = data;
	}

	public Interval(String name, List<Integer> data) {
		super();
		this.name = name;
		this.data = data;
	}

}

StuDao.java

package com.highCharts.dao;

import java.util.List;

import com.highCharts.model.Interval;

public interface StuDao {

	// 取到所有学生的年龄数据
	List<Interval> getAgeCount();

}

StuDaoImpl.java

package com.highCharts.daoImpl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.highCharts.Util.DBHelper;
import com.highCharts.dao.StuDao;
import com.highCharts.model.Interval;

/**
 * 
 * @author xingyang
 *
 */
public class StuDaoImpl implements StuDao {
	private ResultSet rs = null;
	private Connection connection = null;

	@Override
	public List<Interval> getAgeCount() {
		
		List<Interval> list = new ArrayList<>();
		for (int i = 3; i < 130; i++) { // 获取学生3岁-129岁的年龄阶段
			try {
				connection = DBHelper.getConnection();
				String sql = "select Count(* ) from student where age BETWEEN ? and ?";
				PreparedStatement pStatement = connection.prepareStatement(sql);
				pStatement.setInt(1, i);
				pStatement.setInt(2, i + 1);
				rs = pStatement.executeQuery();
				while (rs.next()) {

					String name = i + "-" + (i + 1);
					int data = rs.getInt(1);
					List<Integer> datas = new ArrayList<Integer>();
					datas.add(data);
					Interval interval = new Interval(name, datas);
					list.add(interval);

				}
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}

		return list;
	}

}

GetStuAgeInterval.java

package com.highCharts.control;

import java.io.IOException;
import java.io.PrintWriter;
import java.lang.reflect.Type;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.highCharts.dao.StuDao;
import com.highCharts.daoImpl.StuDaoImpl;
import com.highCharts.model.Interval;

/**
 * Servlet implementation class getStuAgeInterval
 */
@WebServlet("/getStuAgeInterval")
public class GetStuAgeInterval extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	private StuDao sDao;
	private List<Interval> list;
	private PrintWriter out;
    public GetStuAgeInterval() {
        sDao=new StuDaoImpl();

    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		out=response.getWriter();
		response.setContentType("text/json;charset=utf-8");		
		list=sDao.getAgeCount();
		Gson gson=new Gson();
		Type type=new TypeToken<List<Interval>>(){
			
		}.getType();
		String users=gson.toJson(list, type);
		System.out.println(users);
		out.print(users);
				
	
	
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

数据库: