SpringBoot +AJAX+Highcharts 绘制静态数据饼图
SpringBoot +AJAX+Highcharts绘制静态数据饼图
- 框架搭建
- 1.开发软件
- 2.技术要点
- 功能实现
- 1.去 Highcharts官网上下载资源包
- 2.创建SpringBoot项目：
- 3.在pom.xml文件中导入依赖：
- 4.在resource文件夹下编写application.yml配置文件：
- 5.实体类：
- 6.dao层：
- 7.service层
- 8.Controller层
- 9.测试后台：
- 10.编写前台
- 启动完成
你好! 本文主要做一个简单的异步获取json数据的例子来实现Highcharts展现,能让初学者快捷上手
框架搭建
1.开发软件
- 后台开发：IDEA
- 后台测试：Postman；
- 数据库 : Navicat
2.技术要点
- 前端: HTML
- 后端: Spring Boot
- 数据库:MySql
功能实现
1.去 Highcharts官网上下载资源包
链接: Highcharts官网.
需要highcharts.js这个文件
2.创建SpringBoot项目：
使用Idea点击file，选择New Project，选择Spring InitInitializr，自行配置项目的基础配置；
3.在pom.xml文件中导入依赖：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
</dependencies>
4.在resource文件夹下编写application.yml配置文件：
server.port=8080
server.servlet.context-path=/
#thymleaf模板引擎
spring.thymeleaf.prefix=classpath:resources/
spring.thymeleaf.suffix=.html
spring.datasource.url=jdbc:mysql://localhost:3306/highcharts?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root
5.实体类：
@Data
public class BrowserShare {
/**
* 投资人
*/
private String name;
/**
* 占有股份
*/
private Float share;
}
注：实体类中使用的@Data来自lombok插件，使用该注解后，可省略代码中的get/set方法,另外实体类跟数据库列一致
6.dao层：
@Mapper
public interface BrowserShareMapper {
@Select("select * from BrowserShare")
List<BrowserShare> getAllUser();
}
7.service层
@Service
public class BrowserShareServiceImpl implements BrowserShareService{
@Resource
private BrowserShareMapper browserShareMapper;
@Override
public List<BrowserShare> getAllUser() {
return browserShareMapper.getAllUser();
}
}
8.Controller层
@RestController
public class BrowserShareController {
@Resource
private BrowserShareService browserShareService;
@RequestMapping(value = "/list")
public List<BrowserShare> getAllStudent(){
List<BrowserShare> list=browserShareService.getAllUser();
return list;
}
}
9.测试后台：
测试完成，后台代码编写完成。
10.编写前台
把下载好的js文件和jquery文件放进去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 Highcharts 图表</title>
<script src="jquery-1.8.3.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现，对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
},
//图表的主标题
title: {
text: '2019年12月份市场投资占比份额'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: {point.percentage}%',
percentageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
return ''+ this.point.name +': '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//图表要展现的数据
series: [{
type: 'pie',
name: '投资占比'
}]
});
});
//异步请求数据
$.ajax({
type:"GET",
dataType: "json",
url:'list',
success:function(data){
var ss=JSON.parse(JSON.stringify(data));
browsers = [],
$.each(ss,function(i,d){
browsers.push([d.name,d.share]);
});
chart.series[0].setData(browsers);
},
error:function(e){
alert('报错了'+e);
}
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
启动完成
个人原创