Hightcharts初试：获取后端数据动态生成图表，真香

最新推荐文章于 2024-04-25 12:50:07 发布

程序员-小李

最新推荐文章于 2024-04-25 12:50:07 发布

阅读量864

点赞数 2

分类专栏： # Higtcharts 文章标签：后端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44107140/article/details/121186416

版权

Higtcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天无意间看到了一个图标信息统计的框架——Highcharts,看看就觉得真香。

Hightcharts是一个用JavaScript编写的图表库
能够便捷的在网站或者Web应用程序添加有交互性的图表
Hightcharts也是免费提供给个人学习和个人网站和非商业用途的使用

看到教程实例的效果是这样的

感觉效果还是蛮好看的嘛，交互效果很好!

然后我就想尝试用自己的数据显示到图表上，于是我先创建一个springboot项目，利用它做后台，给前台返回数据，下面用一个简单的接口演示一下springboot+ajax+hightcharts如何生成有交互性的图表:

后端这里不过多描述，创建springboot项目后，写一个controller，返回一串JSON数据,我这里的接口是localhost:8080/community/get_time_count返回如下数据：

编写前端页面

<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto">
        <!-- 这里定义是图表要显示的位置 -->
    </div>
    <script language="JavaScript">
        // 当页面准备好执行下面的函数
        $(document).ready(function () {
            // 异步请求获取数据
            $.get("http://localhost:8080/community/get_time_count", function (data, status) {
                // 解析JSON数据
                var time_count=JSON.parse(data)
                // 图表的标题
                var title = {
                    text: '用户增长情况'
                };
                // 图表的副标题
                var subtitle = {
                    text: ''
                };
                // 定义x轴要显示的数据
                var xAxis = {
                    // 这里我们之间去取我们拿到JSON数据里面的值
                    categories: time_count.time
                };
                // 定义Y轴要显示的数据
                var yAxis = {
                    title: {
                        text: '增长人数'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                };
                // 工具提示
                var tooltip = {
                    // 值的后缀提示
                    valueSuffix: '人'
                }
                // 定义图表的个性设置 
                var legend = {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                };
                var series = [
                    {
                        name: '用户人数',
                        // 取JSON中的数据
                        data:  time_count.count
                    },
                ];
                //  创建 json 数据
                var json = {};
                // 组合是由配置信息
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.legend = legend;
                json.series = series;
                // Highcharts 库使用 json 格式来配置
                $('#container').highcharts(json);
            })

        });
    </script>
</body>
</html>

测试：在浏览器打开上面的页面，就可以看到我们拿到的数据已经以图表的形式呈现出来了。

结合后端，动态获取数据到前台以图表的形式呈现效果很是很不错的呢。

更具体的操作使用可以查阅hightcharts官网教程哦

本次分享到这，有看不懂的地方可以留言问我哦，咱下期见！！

程序员-小李

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hightcharts初试：获取后端数据动态生成图表，真香

今天无意间看到了一个图标信息统计的框架——Highcharts,看看就觉得真香。Hightcharts是一个用JavaScript编写的图表库能够便捷的在网站或者Web应用程序添加有交互性的图表Hightcharts也是免费提供给个人学习和个人网站和非商业用途的使用看到教程实例的效果是这样的感觉效果还是蛮好看的嘛，交互效果很好!然后我就想尝试用自己的数据显示到图表上，于是我先创建一个springboot项目，利用它做后台，给前台返回数据，下面用一个简单的接口演示一下springboot
复制链接

扫一扫