ideal软件springboot项目使用HighCharts制作简单的动态扇形和柱状统计图

1.Highcharts 环境配置

1）安装 jQuery

2）安装 Highcharts

Highcharts 安装可以使用以下两种方式：

• 1、访问 highcharts.com 下载 Highcharts 包。
• 2、使用官方提供的 CDN 地址：http://code.highcharts.com/highcharts.js

2.新建spring-boot项目

PS:后台代码过程有点像单表查询！建项目请百度其它，菜单于下：

1）controller类

package com.highchart.controller;

import com.highchart.pojo.cylinder;
import com.highchart.service.cylinderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * Created by dell on 2020/1/3.
 */
@Controller
public class higController {
    @Autowired
    private cylinderService cylinderService;
    @RequestMapping("/index.html")
    public String index(){

        return "index.html";
    }

    /**
     * 查询所有
     * @return
     */
    @RequestMapping("/list")
    @ResponseBody
    public List list(){
        List list=cylinderService.list();
        return list;
    }
    @RequestMapping("/sum")
    @ResponseBody
    public double sum(){
       double list=cylinderService.sum();
        return list;
    }
    @RequestMapping("/yz.html")
    public String yz(){

        return "yz.html";
    }
}

2）mapper类

3）sql语句，简单的单表查询

    
        select * from people;
    
    
        SELECT sum(share) from people
    

前台代码

    
    

//jar包

ps:前台代码要记得导包！

3.运行效果

在浏览器上输入路径

 

4.后记

至此已完成，效果图偏丑，请勿嫌弃，这些都是基础代码，可以根据数据库的值改变图形，所有亲们一定一定要建数据库！

遇见bug也不要着急，慢慢尝试总会成功的！加油。