HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据

最新推荐文章于 2021-05-27 15:46:04 发布

bsh_csn

最新推荐文章于 2021-05-27 15:46:04 发布

阅读量2w

点赞数 2

分类专栏： HighCharts图表

本文链接：https://blog.youkuaiyun.com/bsh_csn/article/details/51700514

版权

本文档介绍了如何使用HighCharts创建趋势图，并动态刷新数据。首先引入HighCharts和jQuery库，然后利用HighCharts的chart.event属性和动态添加series数据的方法，通过AJAX从后台获取并更新图表数据。示例代码展示了如何通过循环生成多条数据曲线，并通过event属性定时刷新图表。最后，展示了动态刷新后的图表效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图，涉及到动态刷新，因为涉及到了动态刷新，为了便于记忆，在这里记录一下。
在Highcharts中文网上有相应的演示demo，一般你所需要的图的样式都可以找到。可以在demo基础上进行修改。
附Highcharts中文网：http://www.hcharts.cn/demo/index.php
首先，是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来，把HIghcharts动态刷新的格式拷贝并作修改：

var chart;
    $(document).ready(
            function() {
   
                Highcharts.setOptions({
                    global : {
                        useUTC : false
                    }
                });
                chart = new Highcharts.Chart({
                    chart : {
                        renderTo : 'container', //图表放置的容器，DIV 
                        defaultSeriesType : 'spline', //图表类型为曲线图 
                        events : {
                            load : function() {
   
                            var series = this.series;
                            setInterval(function() {
   
                                $.ajax({
                                      type: "POST",
                                      url: "cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
                                      async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
                                      success: function(result){
                                        results = eval("(" + result + ")");
                                        var size = results.length;

                                        for(var i

最低0.47元/天解锁文章