图表报表应用02~~使用Highcharts绘制图表报表

最新推荐文章于 2022-05-29 19:13:51 发布

自学之路←_←

最新推荐文章于 2022-05-29 19:13:51 发布

阅读量332

点赞数 1

分类专栏：工具插件文章标签： highcharts 图表报表 java ssm

本文链接：https://blog.csdn.net/qq_43636251/article/details/118631447

版权

工具插件专栏收录该内容

12 篇文章 3 订阅

订阅专栏

1. 简介

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

2. 下载安装

官网下载： https://www.highcharts.com.cn/download
在这里插入图片描述
把js放入到项目中

3. 入门案例

3.1 官方文档

官方文档:https://www.highcharts.com.cn/demo/highcharts/bar-basic

在这里插入图片描述

3.2 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 600px;height:400px;"></div>
    <script>
        // 图表配置
        var options = {
            //指定图表的类型，默认是折线图（line）
            chart: { type: 'bar'},
            // 标题
            title: {text: '我的第一个图表'},
            // x 轴分类
            xAxis: {categories: ['苹果', '香蕉', '橙子']},
            // y 轴标题
            yAxis: {title: {text: '吃水果个数'}},
            // 数据列
            series: [{
                name: '小明',                        // 数据列名
                data: [2, 1, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

3.3 效果图

在这里插入图片描述

3.4 属性解释

1. chart ：图表基本属性
    a)	plotBackgroundColor  区域背景颜色
    b)	plotBorderWidth  区域边框宽度
    c)	plotShadow  区域阴影
    d)	type  图表类型
2. title ：图表标题
    a)	text 标题文本
3. tooltip ：工具提示
    a)	pointFormat  工具提示显示格式
4. plotOptions：区域选项
    a)	allowPointSelect  点击区域后选择
    b)	cursor  光标类型
    c)	dataLabels  数据标签
    d)	showInLegend  是否显示图例
5. series： 数据组
    a)	name  名称
    b)	colorByPoint  点的颜色
    c)	data  数据

4. Java实现数据交互

4.1 统计各部门人数（柱状图）

文档: https://www.highcharts.com.cn/demo/highcharts/column-rotated-labels

4.1.1 效果图

在这里插入图片描述

4.1.2 sql语句

select dept_name as deptName,COUNT(u.id) as num from tb_user as u 
right join tb_dept as t on t.id=u.dept_id 
group by dept_name

4.1.3 controller

  @Autowired
  private StatService statService;

  @GetMapping("/columnCharts")
  public List<Map> columnCharts(){
      return statService.columnCharts();
  }

4.1.4 Service

	@Autowired
    private UserMapper userMapper;
    //统计各部门人数   columnCharts()
    public List<Map> columnCharts() {
        return userMapper.columnCharts();
    }

4.1.5 Dao

@Select("select dept_name as deptName,COUNT(u.id) as num from tb_user as u right join tb_dept as t on t.id=u.dept_id group by dept_name")
List<Map> columnCharts();

4.1.6 js

axios.get("/stat/columnCharts").then(res => {
   let datas = res.data;
    let titles=[];  //x轴上显示的数据
    let values=[]; //y轴上显示的数据
    for (let i = 0; i < datas.length; i++) {
        titles[i] = datas[i].deptName;
        values[i] = datas[i].num;
    }
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '各部门人数'
        },
        xAxis: {
            categories:titles,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '人数'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            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: {
                borderWidth: 0
            }
        },
        series: [{
            name: '各部门人数',
            data: values
        }]
    });


})

4.2 月份入职人数统计（折线图）

4.2.1 效果图

在这里插入图片描述

4.2.2 sql语句

select m.name as name,IFNULL(t.num,0) as num from tb_month as m left join 
(select DATE_FORMAT(hire_date,'%m') as months,COUNT(id) as num from tb_user group by DATE_FORMAT(hire_date,'%m')) as t on m.name=t.months

4.2.3 controller

@GetMapping("/pieCharts")
public List<Map> pieCharts(){return statService.pieCharts();}

4.2.4 Service

public List<Map> pieCharts() {
 	return userMapper.pieCharts();
}

4.2.5 Dao

 @Select("select m.name as name,IFNULL(t.num,0) as num from tb_month as m left join \n" +
            "(select DATE_FORMAT(hire_date,'%m') as months,COUNT(id) as num from tb_user group by DATE_FORMAT(hire_date,'%m')) as t on m.name=t.months")
 List<Map> pieCharts();

4.2.6 js

axios.get("/stat/pieCharts").then(rs=>{
    let title = [];
    let value = [];
    rs.data.forEach(item=>{
        title.push(item.name);
        value.push(item.num);
    })
    var chart = Highcharts.chart('container', {
        chart: {type: 'line'},
        title: {text: '月份入职人数统计'},
        xAxis: {categories: title},
        yAxis: {title: {text: '入职人数'}},
        plotOptions: {
            line: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true
                },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: false
            }
        },
        series: [{
            name: '入职人数',
            data: value
        }]
    });
})

还有很多案例，想学习的小伙伴可以去参考官方文档~~
官方文档：https://www.highcharts.com.cn/demo/highcharts

自学之路←_←

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
图表报表应用02~~使用Highcharts绘制图表报表

1. 简介Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。2. 下载安装官网下载： https://www.highcharts.com.cn/download 把js放入到项目中3. 入门案例...
复制链接

扫一扫