基于springboot+jpa+Highchars写基础饼图和基础柱图

最新推荐文章于 2024-11-05 18:18:34 发布

原创最新推荐文章于 2024-11-05 18:18:34 发布 · 488 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#highchars

jpa 专栏收录该内容

1 篇文章

订阅专栏

今天我们学习highchars制作图表

那么这篇我们用到了highchars(与echars差不多,优缺点可以自行百度)
Highcharts 是一个用纯JavaScript编写的一个图表库。

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 环境配置
本教程将 Highcharts 与 jQuery 结合使用，所以在加载 Highcharts 前必须先加载 jQuery 库。
jQuery 安装可以使用以下两种方式：

使用 Staticfile CDN 静态资源库的jQuery资源：
http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js
使用百度静态资源库的jQuery资源：
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

本文将用到引入Staticfile CDN 静态资源库的jQuery资源

在做饼图前先去官网copy自己需要的模板实例饼图模板实例

在这里插入图片描述
实例代码,其中是有数据的到时候我们实现动态就需要请求后台返回数据

Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: '2018年1月浏览器市场份额'
	},
	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: [{
			name: 'Chrome',
			y: 61.41,
			sliced: true,
			selected: true
		}, {
			name: 'Internet Explorer',
			y: 11.84
		}, {
			name: 'Firefox',
			y: 10.85
		}, {
			name: 'Edge',
			y: 4.67
		}, {
			name: 'Safari',
			y: 4.18
		}, {
			name: 'Sogou Explorer',
			y: 1.64
		}, {
			name: 'Opera',
			y: 1.6
		}, {
			name: 'QQ',
			y: 1.2
		}, {
			name: 'Other',
			y: 2.61
		}]
	}]
});

然后我再贴上完成的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script src="jQuery/jquery-2.2.3.min.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "http://localhost:8080/diagram/findall",
            dataType: "json",
            success: function (data) {
                var cate=[]
                for (var i=0;i<data.length;i++){
                        cate.push(data[i])
                }
                console.log(data)
                console.log(cate)
                console.log(cacc)
                Highcharts.chart('container', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '2014某网站各浏览器浏览量占比'
                    },
                    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: cate
                    }]
                });
            }
            })
    });
</script>
</body>
</html>

这里我用到了push拼接,注意关于我的这个拼接他的实体类属性名字只能为y 在这里插入图片描述
后台代码主要就是返回一个集合,我这里是用jpa写的,大家基于springboot也可以和其他搭配(比如mybatis) 只要返回一个集合就可以，这样用到jpa主要是方便快捷

后台图
在这里插入图片描述 application.yml配置

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/highchars?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC 更改数据库名
    password: 自己数据库的密码
    username: 自己数据库的用户名
    driver-class-name: com.mysql.cj.jdbc.Driver 驱动 这个具体看自己数据库版本也有可能是(com.mysql.jdbc.Driver)
  jpa:
    show-sql: true
    database: mysql
    hibernate:
      ddl-auto: update

pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.vue</groupId>
    <artifactId>demovue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demovue</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <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>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </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>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.28</version>
        </dependency>
        <!-- 工具类-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.0.5</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Dao层
在这里插入图片描述
继承jparepository<第一个参数是基于你的实体类,integer>,内部实现了很多便捷的方法

实现层
在这里插入图片描述

这里只需要注入dao层然后点他的查询所有方法就行,这就是jpa的便捷的地方,他封装了很多简单的sql

controller层无非就是调用方法,这里就不做太多阐述,记得前后端分离需要解决跨域,然后就是用ajax请求到数据,上图静态页面有代码

柱形图相同,也是从后台请求到一个集合,参考饼图后台代码,柱形图演示图柱型图链接(其中有代码,我就不copy过来看了)
在这里插入图片描述
我的柱形页面

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

</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="jQuery/jquery-2.2.3.min.js"></script>
<script>
            $(function () {
                $.ajax({
                    url: "http://localhost:8080/form/findInfoform",
                    dataType: "json",
                    success: function (data) {
                        console.log(data)
                        var cate = [];
                        var da = [];
                        for (var i = 0; i < data.length; i++) {
                            cate.push(data[i].address)
                            da.push(data[i].axle)
                        }
                        alert(cate)
                        alert(da)
                        var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',   //指定dom元素的id
                                type: 'column'   //指定类型--->柱形图
                            },
                            title: {   //设置顶部标题
                                text: '柱形图'
                            },
                            xAxis: {   //x轴的内容
                                categories: cate
                            },
                            yAxis: {  //y'轴的内容
                                title: {   //y轴标题
                                    text: '人口(百万)'
                                },
                            },
                            plotOptions: {   //设置柱状内容
                                column: {
                                    dataLabels: {
                                        border: 1,
                                        align: 'left',
                                        enabled: true,
                                        rotation: 270,
                                        x: 2,  //设置字体角度旋转
                                        y: -10,
                                        inside: true,  //设置是否将数值存在柱状条里面
                                        style: {   //设置字体
                                            fontWeight: 'bold',
                                            fontSize: '14px',
                                            color: 'black'
                                        }
                                    }
                                }
                            },
                            series: [{   //柱状条的数值
                                // data: data
                                data: da
                            }]
                        });
                    }
                })
            });

</script>
</body>
</html>

同饼型图,不过这里并不需要注意什么，照样是需要得到一个集合,

记录第二天的学习生活,不喜勿喷,大佬请指教