Springboot+Highcharts实现对数据库的图表处理

最新推荐文章于 2021-05-15 18:31:53 发布

游人.

最新推荐文章于 2021-05-15 18:31:53 发布

阅读量549

点赞数

分类专栏： java 文章标签： js ajax

本文链接：https://blog.csdn.net/t_Tine/article/details/103823054

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Springboot+Highcharts实现对数据库的图表处理

话不多说直接开始

前台Html页面

<meta charset="UTF-8">
<title>Highcharts的图形处理</title> </head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.11.1.js"></script> </head> <body>
    <div id="container"></div>
    <div id="container1"></div> </body> <script type="text/javascript">
//柱状图
var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    credits: { enabled: false},
    exporting: { enabled: false },
    title: {
        text: 'Java开发实施2020年数据量'
    },
    subtitle: {
        text: 'By:试点三'
    },
    xAxis: {
        categories: [
            '开发',
            '实施',
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Java (%)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Java开发实施2020年数据量'
    }]
});


//饼图
var chart3 = Highcharts.chart('container1',{
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    credits: { enabled: false},
    exporting: { enabled: false },
    title: {
        text: 'Java开发工程师2020年人数比'
    },
    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
    }]
});

$(document).ready(function () {
    $.ajax({
        type:"GET",
        url:'/pieValue',//提供数据的Servlet
        success:function(data){
            //定义一个数组
            var browsers = [];
            //迭代，把异步获取的数据放到数组中
            $.each(data,function(i,d){
                browsers.push([d.name,d.sumber]);
            });
            chart.series[0].setData(browsers);
        },
        error:function(e){
            alert(e);
        }
    });
})
$(document).ready(function () {
    $.ajax({
        type:"GET",
        url:'/pieValue',//提供数据的Servlet
        success:function(data){
            //定义一个数组
            var browsers = [];
            //迭代，把异步获取的数据放到数组中
            $.each(data,function(i,d){
                browsers.push([d.name,d.sumber]);
            });
            chart3.series[0].setData(browsers);
        },
        error:function(e){
            alert(e);
        }
    });
}) </script> </html>

需要修改的只有
$(document).ready(function () {
$.ajax({
type:“GET”,
url:’/pieValue’,//提供数据的Servlet
success:function(data){
//定义一个数组
var browsers = [];
//迭代，把异步获取的数据放到数组中
$.each(data,function(i,d){

   browsers.push([d.name,d.sumber]);    这个地方.出来的值跟实体类相同

	                });
	                chart3.series[0].setData(browsers);
	            },
	            error:function(e){
	                alert(e);
	            }
	        });
	    })

后台Controller代码

@RequestMapping(value = "/pieValue", method = RequestMethod.GET)
@ResponseBody
public List<By> pieValue(){
   List<By> list=serviceImp.ajaxPdb();
    return list;
}

效果图：

代码不完美的地方多多指教，欢迎下面评论

游人.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Springboot+Highcharts实现对数据库的图表处理

Springboot+Highcharts实现对数据库的图表处理话不多说直接开始前台Html页面 <meta charset="UTF-8"><title>Highcharts的图形处理</title> </head> <script src="http://code.highcharts.com/highcharts.j...
复制链接

扫一扫