highcharts+jsp+springDataJpa实现饼状图，树状图

1.饼状图

1. 创建spirngboot项目，引入以下启动器。

　　　　<!-- servlet 依赖. -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>　　　　<!-- jstl依赖. -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--SpringBoot默认不支持JSP，需要在项目中添加相关的依赖-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</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>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

2.在项目中添加web模块

3. 先从highcharts 官网copy一个基本的饼状图。地址

//在DOM中声明一个 chart  对象。chart 可以调用它内部的函数。var chart = 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
        }]
    }]
});

效果

4.可以知道，如果我们想要实现这样一个效果只需要传特定的参数给他即可，其他样式可以参考官方文档

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
        }]

5. 数据库文件

DROP TABLE IF EXISTS `t_pai`;

CREATE TABLE `t_pai` (
  `name` varchar(30) NOT NULL,
  `y` double DEFAULT NULL,
  PRIMARY KEY (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/
insert  into `t_pai`(`name`,`y`) values 

(‘a‘,61.41),

(‘Edge‘,4.67),

(‘Firefox‘,10.85),

(‘Opera‘,1.6),

(‘Other‘,2.61),

(‘QQ‘,1.2),

(‘r‘,11.84),

(‘Safari‘,4.18),

(‘Sogou Explorer‘,1.64);

6. 因为方法比较简单，不在粘实体类和数据访问层的代码。只要返回结果符合上面的格式即可。

7. 页面代码

需要引入

https://code.highcharts.com.cn/highcharts/highcharts.js
//该js是可以将当前数据导出，不引入没关系
https://code.highcharts.com.cn/highcharts/modules/exporting.js
//该js就是为了汉化的，不引入也没关系
https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js

body部分

<div id="container" style="min-width:400px;height:400px"></div>

script部分

    //将创建 chart 对象的方法封装起来，将所需要的集合传进去
    function initPai(pai_data) {
        console.log("第一行"+pai_data);
        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: pai_data
            }]
        });
    }
    //在页面加载时发送ajax请求获取数据，再调用initPai方法，将饼状图展现在页面。
    $(document).ready(function () {
        var aa = [];
        $.ajax({
            url:"http://localhost:8082/findAll",
            dataType:‘json‘,
            type: "get",
            async: false,
            success:function(res){
                for(var i = 0;i<res.length;i++){
                    aa[i]={name:res[i].name,y:parseFloat(res[i].y)}
                }
                console.log(aa);
            }
        })
        //调用方法
        initPai(aa);
    })

2. 树状图

1.首先去官网copy一个示例

var chart = Highcharts.chart(‘container‘, {
    chart: {
        type: ‘column‘
    },
    title: {
        text: ‘全球各大城市人口排行‘
    },
    subtitle: {
        text: ‘数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>‘
    },
    xAxis: {
        type: ‘category‘,
        labels: {
            rotation: -45  // 设置轴标签旋转角度
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ‘人口 (百万)‘
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: ‘人口总量: <b>{point.y:.1f} 百万</b>‘
    },
    series: [{
        name: ‘总人口‘,
        data: [
            [‘上海‘, 24.25],
            [‘卡拉奇‘, 23.50],
            [‘北京‘, 21.51],
            [‘德里‘, 16.78],
            [‘拉各斯‘, 16.06],
            [‘天津‘, 15.20],
            [‘伊斯坦布尔‘, 14.16],
            [‘东京‘, 13.51],
            [‘广州‘, 13.08],
            [‘孟买‘, 12.44],
            [‘莫斯科‘, 12.19],
            [‘圣保罗‘, 12.03],
            [‘深圳‘, 10.46],
            [‘雅加达‘, 10.07],
            [‘拉合尔‘, 10.05],
            [‘首尔‘, 9.99],
            [‘武汉‘, 9.78],
            [‘金沙萨‘, 9.73],
            [‘开罗‘, 9.27],
            [‘墨西哥‘, 8.87]
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: ‘#FFFFFF‘,
            align: ‘right‘,
            format: ‘{point.y:.1f}‘, // :.1f 为保留 1 位小数
            y: 10
        }
    }]
});

效果

2. 如果我们想要实现动态查询，只需要改变 data 的值即可，同样的，也需要符合格式

3.数据库文件

CREATE TABLE `t_cloumn` (
  `name` varchar(30) DEFAULT NULL,
  `area` float DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `t_cloumn` */

insert  into `t_cloumn`(`name`,`area`) values 

(‘上海‘,24.25),

(‘卡拉奇‘,23.5),

(‘北京‘,21.51),

(‘德里‘,16.78),

(‘拉各斯‘,16.06),

(‘天津‘,15.2),

(‘伊斯坦布尔‘,14.16);

4. 无论你使用哪种方式查询数据，只要符合格式即可。

5.页面代码

body部分

<div id="container" style="min-width:400px;height:400px"></div>

script部分，和饼状图的实现思路一样

 function initColumn(diqu) {
        console.log("第一行"+diqu);
        Highcharts.chart(‘container‘, {
            chart: {
                type: ‘column‘
            },
            title: {
                text: ‘全球各大城市人口排行‘
            },
            subtitle: {
                text: ‘数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>‘
            },
            xAxis: {
                type: ‘category‘,
                labels: {
                    rotation: -45  // 设置轴标签旋转角度
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: ‘人口 (百万)‘
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: ‘人口总量: <b>{point.y:.1f} 百万</b>‘
            },
            series: [{
                name: ‘总人口‘,
                data: diqu,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: ‘#FFFFFF‘,
                    align: ‘right‘,
                    format: ‘{point.y:.1f}‘, // :.1f 为保留 1 位小数
                    y: 10
                }
            }]
        });
    }
    $(document).ready(function () {
        var aa = [];
        $.ajax({
            url:"http://localhost:8082/findAllCloumn",
            async:false,
            dataType:‘json‘,
            type: "get",
            success:function (res) {
                for(var i = 0;i<res.length;i++){
                    //这里一定要转成相对应的数据类型。
                    aa[i]=[res[i].name,parseFloat(res[i].area)]
                }
                console.log(aa);
            }
        })
        initColumn(aa);
    })

需要引入

<script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

3. 以上两种属于简单实现，但可以让我们很快的入门。

　创建一个 Highcharts 的时候可以看作创建了一个对象，这个对象可以调用很多方法，官方文档

对于方法的使用可以参考

更新的五种方法：https://blog.csdn.net/eengel/article/details/73497208

　　演示：https://jsfiddle.net/slowlyswimming/6ad5pp3t/16/

当然还有其他的方法等待我们去使用，一起学习。

原文地址：https://www.cnblogs.com/autonomy/p/11853990.html

时间： 2024-11-06 09:10:09

highcharts+jsp+springDataJpa实现饼状图，树状图的相关文章

高级数据结构：优先队列、图、前缀树、分段树以及树状数组详解

优秀的算法往往取决于你采用哪种数据结构,除了常规数据结构,日常更多也会遇到高级的数据结构,实现要比那些常用的数据结构要复杂得多,这些高级的数据结构能够让你在处理一些复杂问题的过程中多拥有一把利器.同时,掌握好它们的性质以及所适用的场合,在分析问题的时候回归本质,很多题目都能迎刃而解了. 这篇文章将重点介绍几种高级的数据结构,它们是:优先队列.图.前缀树.分段树以及树状数组. 一.优先队列 1.优先队列的作用优先队列最大的作用是能保证每次取出的元素都是队列中优先级别最高的,这个优先级别可以是自定

树状数组与线段树

一:树状数组树状数组是对一个数组改变某个元素和求和比较实用的数据结构.两中操作都是O(logn). 需求:有时候我们需要频繁地求数组的前k项和或者求数组从小标i到j的和,这样每次最坏情况下的时间复杂度就会为O(N),这样效率太低了.而树状数组主要就是为了解决这样一个问题.树状数组在求和及修改都可以在O(lgN)时间内完成. 树状数组需要额外维护一个数组,我们设为C[N],原数组为A[N], 其中每个元素C[i]表示A[i-2^k+1]到A[i]的和,这里k是i在二进制时末尾0的个数.注意通过位

树状数组线段树

树状数组树状数组的基本用途是维护序列的前缀和,相比前缀和数组,树状数组优势在于高效率的单点修改,单点增加(前缀和数组单点修改效率比较低) 因为树状数组的思想,原理还是很好理解的,就直接讲基本算法; 1 lowbit函数关于lowbit这个函数,可能会有点难以理解,但其实你不理解也没关系,把模板背下来就好根据任意正整数关于2的不重复次幂的唯一分解性质,例如十进制21用二进制表示为10101,其中等于1的位是第0,2,4(最右端是第0位)位,即21被二进制分解成\(2^4+2^2+2^0\);

从线段树的可删减性谈树状数组

这可能是我最后一次更新博客了呢 # 前言很久之前,我初学树状数组的时候感觉非常的复杂.神奇.晦涩难懂... 果然还是我太菜了.后来了解到线段树的可删减性,这两者就自然而然的联系在一起了. # 线段树的可删减性很显然,对于一些区间操作的问题,线段树有着绝对的优势,基本上只要是区间查询之类的问题,那线段树是没跑了. 但是如果我们要查询的是前缀和这样的东西的话,会不会感觉线段树中的一些东西是多余的呢? 这么说可能有些不好理解,画画图就好: 上图如果看不清楚,请在新标签页中打开.(蓝色为节点标号,红

树状数组知识点详解

树状数组树状数组是一种数据结构,它的作用就是优化查询和修改的操作.试想,我们假如在做一道题的时候使用裸的一维数组来存储数据,那每次区间修改需要O(1)的时间,但查询却需要O(n)的时间,针对于某些题目,数据量奇大无比,必然会TLE.所以我们使用树状数组来优化这两个操作,使得修改和查询均可以在O(logn)的时间内完成,提升效率. (这是百度百科上树状数组的图) 可以直观地看出树状数组是个什么模式,是的,这就是一棵树,而这棵树上每个节点存储的数据就是它所有儿子节点的数据和.所以我们就可以在树上做

树状数组总结

树状数组数据结构知识点1-树状数组树状数组的用途就是维护一个数组,重点不是这个数组,而是要维护的东西,最常用的求区间和问题,单点更新.但是某些大牛YY出很多神奇的东西,完成部分线段树能完成的功能,比如区间更新,区间求最值问题. 树状数组当然是跟树有关了,但是这个树是怎么构建的呐?这里就不得不感叹大牛们的脑洞之大了,竟然能想出来用二进制末尾零的个数多少来构建树以下图为例: 从上图能看出来每一个数的父节点就是右边比自己末尾零个数多的最近的一个,也就是x的父节点就是x+(x&(-x)),这里为什么

POJ 1804 Brainman(5种解法，好题，【暴力】，【归并排序】，【线段树单点更新】，【树状数组】，【平衡树】)

Brainman Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10575 Accepted: 5489 Description BackgroundRaymond Babbitt drives his brother Charlie mad. Recently Raymond counted 246 toothpicks spilled all over the floor in an instant just b

【数据结构之树状数组】从零认识树状数组

一.关于树状数组树状数组(Binary Indexed Tree,简称BIT),是一种修改和查询复杂度都为O(logN)的数据结构.但树状数组仅支持单点修改,在查询时,树状数组也要求被查询的区间具有可区间加减的性质.不过,树状数组由于代码实现容易.占用空间小,常用于代替线段树. 二.详解树状数组在这里,我们定义原序列为a,树状数组为c,则有: 其中,k为i的二进制表示中末尾0的个数,例如:i=3(101)时,k=0:i=8(1000)时,k=3. 定义函数lowbit(x)=2k(k为x的二

POJ 3928 Ping pong 树状数组模板题

开始用瓜神说的方法撸了一发线段树,早上没事闲的看了一下树状数组的方法,于是又写了一发树状数组树状数组: #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> #include <climits> #include <string> #include <iostream> #include <map> #includ