chart.js 中文文档:
https://chartjs-doc.abingoal.com/getting-started/usage.html
下载 :
github 下载慢,这个是我下载好了的。
https://pan.baidu.com/s/1HygtLXn7kv4rBGTAbrISIw
var pwd = "dj";
码: alert(pwd.concat("6k"));
案例_demo: SpringBoot
- 项目目录
- pom
<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.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<!-- test -->
<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>
<!--thymeleaf模板-->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
- controller
package com.springboot.sbem.controller;
import com.springboot.sbem.entity.Chart;
import com.springboot.sbem.service.ChartService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class ChartController {
@Autowired
private ChartService chartService;
@RequestMapping(value = {"/getChartPie.do"} )
@ResponseBody
public List<Chart> getNumber(){
return chartService.getNumber();
}
@RequestMapping(value = {"/index"} )
public String index(){
return "index";
}
}
- service
package com.springboot.sbem.service;
import com.springboot.sbem.entity.Chart;
import com.springboot.sbem.mapper.ChartMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@Service
public class ChartService {
@Autowired
private ChartMapper chartMapper;
public List<Chart> getNumber(){
List<Chart> list = new ArrayList<>();
List<Chart> hasMonths = chartMapper.selectHasMonth();
if(hasMonths != null && hasMonths.size()>0){
for(Chart c : hasMonths){
Chart chartPie = new Chart(c.getMonth(), 20);
list.add(chartPie);
}
}
return list;
}
}
- mapper
package com.springboot.sbem.mapper;
import com.springboot.sbem.entity.Chart;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface ChartMapper {
@Select("SELECT DISTINCT (month) FROM (SELECT SUBSTRING(createtime,5,7) month FROM info) AS a")
List<Chart> selectHasMonth();
}
- entity
package com.springboot.sbem.entity;
public class Chart {
private String month;
private Integer totalmoney;
public Chart(){
super();
}
public Chart(String month, Integer totalmoney) {
this.month = month;
this.totalmoney = totalmoney;
}
public String getMonth() {
return month;
}
public void setMonth(String month) {
this.month = month;
}
public Integer getTotalmoney() {
return totalmoney;
}
public void setTotalmoney(Integer totalmoney) {
this.totalmoney = totalmoney;
}
@Override
public String toString() {
return "ChartPie{" +
"month='" + month + '\'' +
", totalmoney='" + totalmoney + '\'' +
'}';
}
}
- js
需要自己下载:
jq -2.2版本 : https://mp.csdn.net/console/editor/html/104530612
chart.js -2.93 : github 下载慢,这个是我下载好了的。 链接: https://pan.baidu.com/s/1HygtLXn7kv4rBGTAbrISIw 提取码: dj6k
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<script src="js/jquery.js"></script>
<script src="js/Chart.min.js"></script>
<script type="text/javascript">
var jsonData = $.ajax({
url: 'getChartPie.do',//
dataType: 'json' //返回格式json
}).done(function (results) { //当ajax成功请求时返回results
// 将获取到的json数据分别存放到两个数组中
var labels = [], data=[];//labels代表的是饼状图的元素,就是标题,data代表对应元素的数值,这里从后台传过来
for(var monthrecord in results)
{
// 遍历json字符串,将json字符串插入到新建的两个数组中,填充饼状的数据
labels.push(results[monthrecord].month);
data.push(parseInt(results[monthrecord].totalmoney));
}
// 设置饼图表的数据
var Tempdata = {
labels: labels,//饼状图元素
datasets: [{
data: data,//alax获取到的后台数据
backgroundColor:["FF6666","lightgreen","#FFCCCC","#99CCCC","#0099CC","#CCCCFF","#FFCC33","CCFFFF","#006633","#99CC00","336633","lightblue"] //对应data数据的颜色,和背景色一一对应
}],
}
var ctx = $("#myChart").get(0).getContext("2d");//初始化chartJS,这里采用的是jquery方式初始化
var myLineChart = new Chart(ctx, { //填充图表参数,格式为ctx,{这里面包含type类型,data,还有option},这点刚开始照网上的中文文档初始化,图表都没有出来,查询的英文api是这样初始化的成功了
type: 'doughnut',//类型是doughnut
data: Tempdata, //这里数据包含元素名称,元素数据,以及背景色等数据源
options: { //这里设置标题,js事件,比如鼠标悬停,点击等,都在这里options里面设置,格式就是{类型:数值},详情请参看英文api
title: {
display: true,
text: '统计',
fontSize:20,
fontFamily: 'SimHei',
},
}
});
});
</script>
</head>
<body>
<canvas id="myChart" style="width:40%;height: 40%;float: left;"/>
</body>
</html>
- properties
spring.datasource.url=jdbc:mysql://ip:3306/springboot_1
spring.datasource.username = root
spring.datasource.password = root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
server.port=8090