chart.js 图表入门_案例_demo_ 中文文档

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