highcharts+jsp+springDataJpa實現餅狀圖，樹狀圖

時間  2019-11-26
標籤 highcharts+jsp+springdatajpa highcharts jsp springdatajpa 實現 餅狀圖 樹狀 欄目 JSP 简体版
原文   原文鏈接

1.餅狀圖

1. 建立spirngboot項目，引入如下啓動器。javascript

　　　　<!-- 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模塊java

　

 

 3. 先從highcharts 官網copy一個基本的餅狀圖。地址mysql

//在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
        }]
    }]
});

效果jquery

 

 

4.能夠知道，若是咱們想要實現這樣一個效果只須要傳特定的參數給他便可，其餘樣式能夠參考官方文檔web

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. 數據庫文件ajax

　

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. 由於方法比較簡單，不在粘實體類和數據訪問層的代碼。只要返回結果符合上面的格式便可。spring

7. 頁面代碼sql

須要引入數據庫

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部分apache

<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/

固然還有其餘的方法等待咱們去使用，一塊兒學習。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程