springboot+highchart完成饼状统计图和圆柱统计图

最新推荐文章于 2022-08-01 11:32:37 发布

Sc_Sc.

最新推荐文章于 2022-08-01 11:32:37 发布

阅读量1.8k

点赞数 1

分类专栏： springboot+highchart 文章标签： ajax mysql spring jquery

本文链接：https://blog.csdn.net/u013050839/article/details/103825418

版权

springboot+highchart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要用到的工具

idea

highchart.js

点击下载js

效果图

在这里插入图片描述

这里推荐一个统计图的网站

https://www.highcharts.com.cn/demo/highcharts/column-rotated-labels

里面有各种图形统计代码

我们先来创建一个springboot项目

这里勾选一下需要的依赖
在这里插入图片描述

配置application.yml

server:
  port: 8080
spring:
  datasource:
    username: root
    password:
    url: jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    driver-class-name: com.mysql.jdbc.Driver
  thymeleaf:
    cache: false
mybatis:
  mapper-locations: classpath:mapper/*.xml
pagehelper:
  helper-dialect: mysql
  params: count=countSql
  reasonable: true
  support-methods-arguments: true

这里开始新建我们的实体层，dao层，controller层，service层

实体层代码

package com.highchart.pojo;

import lombok.Data;

/**
 * Created by dell on 2020/1/3.
 */
@Data
public class cylinder {
    private int id;
    private String name;
    private double share;
}

mapper层代码

package com.highchart.mapper;

import com.highchart.pojo.cylinder;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * Created by dell on 2020/1/3.
 */
@Mapper
public interface cylinderMapper {
    List<cylinder> list();
    double sum();//返回数据的总和
}

service层代码

package com.highchart.service;

import com.highchart.pojo.cylinder;

import java.util.List;

/**
 * Created by dell on 2020/1/3.
 */

public interface cylinderService {
    List<cylinder> list();
    double sum();//返回数据的总和

}

实现层代码

package com.highchart.service;

import com.highchart.mapper.cylinderMapper;
import com.highchart.pojo.cylinder;
import org.omg.CORBA.PRIVATE_MEMBER;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Created by dell on 2020/1/3.
 */
@Service
public class cylinderServiceImpl implements cylinderService{
    @Autowired
    private cylinderMapper cylinderMapper;
    @Override
    public List<cylinder> list() {
        return cylinderMapper.list();
    }

    @Override
    public double sum() {
        return cylinderMapper.sum();
    }
}

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";
    }
    @RequestMapping("/list")
    @ResponseBody
    public List<cylinder> list(){
        List<cylinder> 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";
    }
}

sql语句

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.highchart.mapper.cylinderMapper">
    <select id="list" resultType="com.highchart.pojo.cylinder">
        select * from cylinder;
    </select>
    <select id="sum" resultType="java.lang.Double">
        SELECT sum(share) from cylinder
    </select>
</mapper>

前台扇形统计图页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/jquery-1.8.3.js"></script>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/highcharts-zh_CN.js"></script>
<script src="/highcharts.js"></script>
<script src="/exporting.js"></script>
<body>
<div id="container" style="min-width:400px;height:400px"></div>

<iframe src="yz.html" width="1650px;" style="border: none" height="460px;"></iframe>
</body>

<script type="text/javascript">
    var chat=Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '2019年中国人口统计数'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: []
        }]
    });
    $(function () {
        $.post(
            "sum",function (sum) {
            //sum从后台返回到前台的数据总和
                $.post(
                    "list"
                    ,function (data) {
                        var RstData=[];
                        for(var i=0;i<data.length;i++){
                            RstData.push([data[i].name,data[i].share/sum*100]);
                            //data[i].share/sum*100 用自己的数量除以总数乘100得到占有的百分比
                        }
                        chat.series[0].update({
                            data:RstData
                        });
                    }
                )
            })
            }

    )




</script>
</html>

圆柱统计图页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<script src="/jquery-1.8.3.js"></script>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/highcharts-zh_CN.js"></script>
<script src="/highcharts.js"></script>
<script src="/exporting.js"></script>
<script src="/highcharts-3d.js"/>
<script src="/oldie.js"></script>
<script src="/cylider.js"></script>
<body>

<div id="container"></div></body>

<script type="text/javascript">

   var chat= Highcharts.chart('container', {
        chart: {
            type: 'cylinder',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: ''
        },
        plotOptions: {
            series: {
                depth: 25,
                colorByPoint: true
            }
        },
        series: [{

            name: '人口数(万)',
            showInLegend: false,
            data: []
        }]
    });
   $(function () {

               $.post(
                   "list"
                   ,function (data) {
                       var RstData=[];
                       for(var i=0;i<data.length;i++){
                           RstData.push([data[i].name,data[i].share]);
                       }
                       chat.series[0].update({
                           data:RstData
                       });
                   }
               )
           }
       )


</script>
</html>

最后的效果图

Sc_Sc.

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
springboot+highchart完成饼状统计图和圆柱统计图

需要用到的工具ideahighchart.js点击下载js效果图这里推荐一个统计图的网站https://www.highcharts.com.cn/demo/highcharts/column-rotated-labels里面有各种图形统计代码我们先来创建一个springboot项目这里勾选一下需要的依赖配置application.ymlserver: port: 8...
复制链接

扫一扫

专栏目录