前言
曾经使用 Java 去写一个报表，以便可视化数据，分析数据，但界面十分简陋，逻辑又不怎么符合前后端分离时代的开发模式
链接如下：
初步使用 JFreeChart 生成报表与感受
最近的研究的一个项目，涉及到报表，一想到 JFreeChart 就恶心。
而 HightCharts 的出现，以简单的操作、美观的界面，令人十分满意。
附：
HightCharts API：https://www.highcharts.com/docs
参考文章：highcharts的引用
下面来个项目中应用的 demo，以备记录
效果1
开篇先来效果，才有心情研究代码，里边的数据，就那身处的学校的一个软件开发团队的为例（理想发展状态）
可以看到，界面是还是相当美观的，鼠标放到对应的条形柱上，会显示对应条形柱的数据
代码1
有了效果，想必想探究一下代码了，而代码是十分简单的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HightCharts</title>
<!--注意使用 HightCharts 要先引入 jQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="highcharts4/js/highcharts.js"></script>
<!--加上自动切换主题-->
<script type="text/javascript" src="highcharts4/js/themes/sand-signika.js" ></script>
</head>
<body>
<div style="padding-left: 10px;padding-right: 10px;border: 0px;height: 350px">
<div id="container"></div>
</div>
<script type="text/javascript">
// var chart= 可省略，这点和 Vue 差不多。不同的是里边的属性写少了会报错
var chart = new Highcharts.Chart({
// 渲染、事件
chart: {
// 指定渲染的 div 的 id
renderTo: "container",
//指定类型，column 最简单了
type: 'column'
},
// 报表的标题
title: {
text: 'ITAEM 团队分析'
},
// 横坐标
xAxis: {
//横坐标标题
title: '方向',
//横坐标柱条名，这里相当于初始化，实际的话会再次动态加载（没写会报错~）
categories: [
"产品经理",
"UI",
'前端',
'后台',
"安卓",
"IOS",
'运维',
"项目经理",
"人工智能",
"大数据",
"产品测试"
]
},
// 纵坐标
yAxis: {
//纵坐标标题
title: {
text: '数量'
}
},
// 数据，数组对象（因为是二维的）
series: [{
//整个表最下方的名称
name: 'ITAEM 成员',
//赋予柱条值，即高度，这里相当于初始化，实际的话会再次动态加载（没写会报错~）
data: [1, 2, 3, 4, 2, 1, 1, 1, 2, 2, 1]
}]
});
</script>
</body>
</html>此时应该注意到，这里边的的数据是静态的，下面来个动态获取数据、显示数据、生成报表
效果2
下面换了个主题
注意到这里的数据和上面不一样了，虽然里边的数据没有改，详情可以看下面的代码
代码2
关键是 Highcharts 里边加了一个 events 属性，通过里边绑定事件，发送 Ajax 请求，获取数据，再渲染到报表上，就覆盖了默认的静态数据了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HightCharts</title>
<!--注意使用 HightCharts 要先引入 jQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="highcharts4/js/highcharts.js"></script>
<!--加上自动切换主题-->
<script type="text/javascript" src="highcharts4/js/themes/dark-unica.js"></script>
</head>
<body>
<div style="padding-left: 10px;padding-right: 10px;border: 0px;height: 350px">
<div id="container"></div>
</div>
<script type="text/javascript">
// var chart= 可省略，这点和 Vue 差不多。不同的是里边的属性写少了会报错
var chart = new Highcharts.Chart({
// 渲染、事件
chart: {
// 指定渲染的 div 的 id
renderTo: "container",
//指定类型，column 最简单了
type: 'column',
//根据事件加载数据，最重要的
events: {
// 主要就使用 load 属性
load: function(event) {
$.post("http://localhost/team/all", {}, function(result) {
var rows = result
var xArr = new Array();
var yArr = new Array();
for(var i = 0; i < rows.length; i++) {
xArr.push(rows[i].direction);
yArr.push(rows[i].number);
}
chart.xAxis[0].categories = xArr;
chart.series[0].setData(yArr);
}, "json");
}
}
},
// 报表的标题
title: {
text: 'ITAEM 团队分析'
},
// 横坐标
xAxis: {
//横坐标标题
title: '方向',
//横坐标柱条名，这里相当于初始化，实际的话会再次动态加载（没写会报错~）
categories: [
"产品经理",
"UI",
'前端',
'后台',
"安卓",
"IOS",
'运维',
"项目经理",
"人工智能",
"大数据",
"产品测试"
]
},
// 纵坐标
yAxis: {
//纵坐标标题
title: {
text: '数量'
}
},
// 数据，数组对象（因为是二维的）
series: [{
//整个表最下方的名称
name: 'ITAEM 成员',
//赋予柱条值，即高度，这里相当于初始化，实际的话会再次动态加载（没写会报错~）
data: [1, 2, 3, 4, 2, 1, 1, 1, 2, 2, 1]
}]
});
</script>
</body>
</html>具体的 JSON 字符串如下
[
{
"id": 1,
"direction": "产品经理",
"number": 2
},
{
"id": 2,
"direction": "UI",
"number": 4
},
{
"id": 3,
"direction": "前端",
"number": 5
},
{
"id": 4,
"direction": "后台",
"number": 3
},
{
"id": 5,
"direction": "安卓",
"number": 4
},
{
"id": 6,
"direction": "IOS",
"number": 2
},
{
"id": 7,
"direction": "运维",
"number": 5
},
{
"id": 8,
"direction": "项目经理",
"number": 2
},
{
"id": 9,
"direction": "人工智能",
"number": 4
},
{
"id": 10,
"direction": "大数据",
"number": 3
},
{
"id": 11,
"direction": "产品测试",
"number": 1
}
]其他
有兴趣的话，可以看后台（SpringBoot+JPA+MySQL）
1、数据库表及其数据
2、Java 代码
①代码结构
②entity
package com.cun.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name = "t_team")
public class Team {
@Id
@GeneratedValue
private Integer id; // 主键
@Column(length = 100)
private String direction; // 方向
private Integer number; // 人数
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getDirection() {
return direction;
}
public void setDirection(String direction) {
this.direction = direction;
}
public Integer getNumber() {
return number;
}
public void setNumber(Integer number) {
this.number = number;
}
public Team() { // JPA 必备
super();
}
}
③ dao
package com.cun.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.cun.entity.Team;
public interface TeamDao extends JpaRepository<Team, Integer>{
}
④Controller
package com.cun.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.cun.dao.TeamDao;
import com.cun.entity.Team;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
@RequestMapping("/team")
@RestController
@EnableSwagger2
public class TeamController {
@Autowired
private TeamDao teamDao;
//这里按道理应是 GetMapping 请求，为了使用 jQuery 的 $.post 才使用 PostMapping
@PostMapping("/all")
public List<Team> getListTeam() {
return teamDao.findAll();
}
}
⑤ yml
server:
port: 80 #为了以后访问项目不用写端口号
context-path: / #为了以后访问项目不用写项目名
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/testspring?useUnicode=true&characterEncoding=utf-8 #解决中文乱码的问题
username: root
password: 123
jpa:
hibernate:
ddl-auto: update #数据库同步代码
show-sql: true #dao操作时，显示sql语句
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
