highcharts + jsp + springDataJpa implemented pie chart dendrogram

1. FIG pie

1. Create spirngboot project, the introduction of the starter.

　　　　<!-- 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. Add the web module in the project

　

 

 3. highcharts official website copy start a basic pie chart. address

// declare a DOM in the chart object. chart can call its internal function. 
Chart Highcharts.chart = var ( 'Container', { 
    Chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        of the type: 'PIE' 
    }, 
    title: { 
        text: '2018 Nian 1 Yue browser market share' 
    } , 
    ToolTip: { 
        pointFormat: '{} series.name: < B > {point.percentage: .1f}% </ B > ' 
    }, 
    plotOptions: { 
        PIE: { 
            allowPointSelect: to 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',
            and: 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
        }]
    }]
});

effect

 

 

4. know, if we want to achieve such an effect only need to pass certain parameters can give him, other styles can refer to the official documentation

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. Database files

　

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. Because the method is relatively simple, and is not sticky code entity data access layer class. As long as return a result in line with the above format can be.

7. page code

Need to introduce

https://code.highcharts.com.cn/highcharts/highcharts.js 
// js is the current data can be exported without introducing okay 
https://code.highcharts.com.cn/highcharts/modules/exporting.js 
// this is to js Speaking of, do not introduce it does not matter 
https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js

 

body part

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

script section

    // Create the chart object methods encapsulated, will pass into the collection of the required 
    function initPai (pai_data) { 
        the console.log ( "first line" + pai_data); 
        Highcharts.chart ( 'Container', { 
            chart: { 
                plotBackgroundColor : null, 
                plotBorderWidth: null, 
                plotShadow: false, 
                of the type: 'PIE' 
            }, 
            title: { 
                text: '2018 Nian 1 Yue browser market share' 
            }, 
            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: to true, 
                Data: pai_data 
            }] 
        }); 
    } 
    // Send page load ajax request the data, then call initPai method, the pie chart to show the page. 
    $ (Document) .ready (function () { 
        var AA = []; 
        $ .ajax ({ 
            URL: "HTTP: // localhost: 8082 / the findAll", 
            dataType: 'JSON', 
            type: "GET", 
            the async: to false, 
            Success: function (RES) { 
                for (var I = 0; I < RES .length; I ++) { 
                    AA [I] = {name: RES [I] .name, Y: parseFloat (RES [I] .y )}
                 } 
                the console.log (AA);
            } 
        }) 
        // call the method 
        initPai (AA); 
    })

 

Figure 2. Tree

1. First, a copy network Quguan example

Chart Highcharts.chart = var ( 'Container', { 
    Chart: { 
        type: 'column' 
    }, 
    title: { 
        text: 'cities around the world population ranking' 
    }, 
    SUBTITLE: { 
        text: 'data off 2017-03, source : < A the href = "https://en.wikipedia.org/wiki/List_of_cities_proper_by_population" > Wikipedia by </ A > ' 
    }, 
    XAXIS: { 
        type:' category ', 
        labels: { 
            rotation: -45 // set the axis labels rotation angle 
        } 
    }, 
    YAXIS: { 
        min: 0, 
        title:{ 
            Text: 'Population (millions)'
        } 
    }, 
    Legend: { 
        Enabled: to false 
    }, 
    ToolTip: { 
        pointFormat: 'total population: < B > {point.y: one million .1f} </ B > ' 
    }, 
    Series: [{ 
        name: 'Total Population ', 
        the Data: [ 
            [' Shanghai ', 24.25], 
            [' Karachi ', 23.50], 
            [' Beijing ', 21.51], 
            [' Delhi ', 16.78], 
            [' Lagos ', 16.06], 
            [' Tianjin ', 15.20], 
            [' Istanbul ', 14.16], 
            [' tokyo ', 13.51], 
            [' Guangzhou ', 13.08],
            [ 'Bombay', 12.44],
            [ 'Moscow', 12.19], 
            [ 'Sao Paulo', 12.03], 
            [ 'Shenzhen', 10.46], 
            [ 'Jakarta', 10.07], 
            [ 'Lahore', 10.05], 
            [ 'Seoul', 9.99], 
            [ 'Wuhan', 9.78], 
            [ 'Kinshasa', 9.73], 
            [ 'Cairo', 9.27], 
            [ 'Mexico', 8.87] 
        ], 
        dataLabels: { 
            Enabled: to true, 
            rotation: -90, 
            Color: '# FFFFFF ', 
            align = left:' right ', 
            the format:' {point.y: .1f} ', //: reserved 1 decimal .1f 
            Y: 10 
        } 
    }] 
});

effect

 

 

2. If we want to achieve dynamic query, just change the data values can be the same, but also need to comply with the format

3. Database files

TABLE `t_cloumn` the CREATE ( 
  ` name` VARCHAR (30) the DEFAULT NULL, 
  `a float area` the DEFAULT NULL 
) ENGINE = the InnoDB the DEFAULT the CHARSET = UTF8; 

/ * for the Data Table` t_cloumn` * The / 

INSERT INTO t_cloumn` `(` name `,` area`) values 

( 'Shanghai', 24.25), 

( 'Karachi', 23.5), 

( 'Beijing', 21.51), 

( 'Delhi', 16.78), 

( 'Lagos', 16.06), 

( 'Tianjin', 15.2), 

( 'Istanbul', 14.16);

 

4. No matter which way you use the query data, provided that they meet the format can be.

The page code

body part

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

script portion, and to realize the idea as pie charts

initColumn function (diqu) { 
        the console.log ( "first line" + diqu); 
        Highcharts.chart ( 'Container', { 
            Chart: { 
                type: 'column' 
            }, 
            title: { 
                text: 'cities around the world population Top ' 
            }, 
            SUBTITLE: { 
                text:' data off 2017-03, source: < A the href = "https://en.wikipedia.org/wiki/List_of_cities_proper_by_population" > Wikipedia by </ A > ' 
            }, 
            XAXIS: { 
                type: 'category', 
                Labels: {
                    rotation: -45 // set the rotation angle of the shaft tab 
                } 
            }, 
            YAXIS: { 
                min: 0, 
                title: { 
                    text: '(million)' 
                } 
            }, 
            Legend: { 
                Enabled: to false 
            }, 
            ToolTip: { 
                pointFormat: ' total population: < B > {point.y: one million .1f} </ B > ' 
            }, 
            Series: [{ 
                name:' total population ', 
                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<really.length; I ++) { 
                    // this data must be converted to the corresponding type. 
                    AA [I] = [RES [I] .name, parseFloat (RES [I] .area)]
                 } 
                the console.log (AA); 
            } 
        }) 
        initColumn (AA); 
    })

Need to introduce

<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. The above two are simple to implement, but allows us to quickly get started.

　Create a Highcharts time can be seen as creating an object, the object can be called many ways, official documents

　　

 

 

 

The method may be used for reference

Updated five ways: https://blog.csdn.net/eengel/article/details/73497208

　　Demos: https://jsfiddle.net/slowlyswimming/6ad5pp3t/16/

Of course, there are other ways waiting for us to use, learn together.