Highcharts+Ajax定时从后端获取数据刷新数据、坐标轴、title等

于 2019-02-24 20:11:29 发布
阅读量759 收藏 2
点赞数
分类专栏： web项目 实时可视化 Highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaocxyczh/article/details/87906840
版权

js代码：

var timestamp; //时间戳，动态获取用来生成title
var cat = []; //横坐标
var data; //数据

function add0(m){return m<10?'0'+m:m }
function format(timestamp)
{
    var time = new Date(parseInt(timestamp));
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y+'年'+add0(m)+'月'+add0(d)+'日 '+add0(h)+':'+add0(mm)+':'+add0(s);
}

var charts = Highcharts.chart('container', {
    chart: {
        zoomType: 'x'
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: '广播频段实时强度数据',
        style:{
            color:"#1d2c4a"
        }
    },
    tooltip: {
        valueDecimals: 2
    },
    xAxis: {
        categories: cat
    },
    series: [{
        id : 'frequency',
        data: data,
        name: '强度',
        lineWidth: 1.5
    }]
});

function getRealtimeData() {
    $.ajax({
        type: "post",
        async: true,            
        url: "/realTimeFrequency",   //要访问的Controller 
        data: {},
        dataType: "json",

        success: function (result) {

            if (result) {
                var json = eval(result);
                var start = parseInt(json.start);
                var end = parseInt(json.end);
                var spacing = parseInt(json.spacing);
                cat = [];
                for (var j = start; j<= end; j = j + spacing) {
                    cat.push(String(j));
                }
                var arr = [];
                var value = json.value.split(",");
                var time = value.shift();
                timestamp = time;
                for (var i = 0; i < value.length; i = i + 1) {
                    arr.push([
                        cat[i],
                        Number(value[i])
                    ])
                }
                data = arr;
            }
        }
    });
}

var frequency =  charts.get('frequency');
setInterval(function() {
    getRealtimeData();
    charts.xAxis[0].setCategories(cat); //刷新横坐标值
    var title = format(timestamp); //根据时间戳获得title
    charts.setTitle( {text: title}); //刷新title
    // 第2个参数表示是否重绘，第3个参数表示是否启用动画，第4个参数表示是否更新数据点[数组长度一样时建议false]
    frequency.setData(data, true, true, false);
}, 1000);

后台代码：

import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Locale;
import java.util.Random;

@Controller
@RestController
public class RealtimeController {
    @RequestMapping("/realTimeFrequency")
    public String realTimeInformation(Locale locale, Model model) {
        String value = "1541061929261,100,100,100,300,100,100,200,100,200,100,100,100,200,100,100,200,200,100,100,200,100,200,500,0,100,200,100,200,200,100,100,100,200,200,300,100,100,100,100,100,300,100,200,100,200,200,100,100,200,100,200,100,200,200,200,200,200,100,200,200,200,100,200,200,300,200,200,200,100,200,200,200,200,200,200,300,400,300,100,200,300,200,200,100,100,100,200,200,500,200,100,100,500,200,100,300,200,200,300,300,300,400,400,300,200,200,100,0,100,200,200,100,100,200,100,200,300,200,200,200,100,100,100,200,100,100,300,200,200,300,300,200,500,2100,4400,5500,6400,6200,5200,3700,1200,200,300,200,300,200,200,200,200,200,100,100,300,100,200,400,700,300,200,100,1600,200,100,100,200,200,200,400,200,300,200,300,1800,4500,5500,5500,5400,5100,5300,4200,2100,400,100,200,200,200,0,200,200,200,200,100,200,200,200,0,200,400,1600,1800,2600,2600,1600,1500,200,100,0,400,700,500,200,200,100,200,200,300,600,600,200,0,200,200,100,200,0,200,100,100,100,200,100,200,300,100,0,200,500,2600,4400,4300,5600,4700,3300,3800,2100,300,300,300,400,200,200,100,200,100,200,100,100,200,400,500,600,600,700,200,400,500,300,300,100,200,100,300,200,300,300,400,800,2700,4700,5900,6400,6300,4600,1000,300,300,400,300,300,300,200,200,200,200,400,600,400,400,300,200,100,300,300,700,900,700,300,200,100,200,600,200,1500,3600,5300,5300,5500,5000,3500,1600,400,100,200,1000,900,400,200,100,100,0,100,100,200,200,200,200,400,100,100,100,200,100,100,200,200,400,0,100,200,300,200,200,200,300,100,100,100,300,600,200,1100,200,100,200,0,100,100,100,300,200,100,200,300,500,700,600,600,500,500,500,3400,3600,3500,900,1700,5200,4200,5100,5600,5200,3300,800,100,800,3800,3600,3500,700,600,1200,800,600,600,600,300,200,200,200,200,100,100,300,200,300,300,100,100,200,300,500,300,400,1300,2000,1900,1800,1500,1000,200,100,200,400,300,300,100,200,400,2500,2400,2700,2900,2600,1900,900,200,200,200,200,200,300,300,1700,2400,3900,5200,5500,5700,5500,4600,3400,2300,600,300,300,200,200,100,400,800,800,500,400,300,200,300,300,600,300,200,300,500,200,200,200,300,200,200,300,200,200,100,300,200,300,100,200,800,400,1600,2200,3500,4500,4900,4700,5000,5200,4600,4400,3100,1900,800,600,600,300,1000,1000,1500,1600,300,200,500,200,200,200,200,100,200,300,300,100,200,200,0,1700,3600,4600,5700,5100,4300,2700,800,200,300,500,900,600,100,200,600,1700,2100,2400,2800,2100,2300,1500,300,300,100,200,1300,3600,5000,5300,5600,5100,4300,2200,400,300,300,400,400,300,400,300,300,300,300,300,600,200,300,300,300,300,400,1100,1000,3300,4800,5800,6200,5700,5300,2400,1600,400,400,300,400,300,400,300,400,300,2400,5000,5600,5000,3700,1500,300,300,300,300,400,300,400,500,1300,1600,2000,2200,2100,1900,1500,1900,1200,700,400,300,300,300,400,300,300,300,400,500,500,400,400,300,300,300,200,300,300,300,300,300,300,400,300,400,200,400,500,800,1500,900,700,300,300,300,300,300,300,200,400,1000,3300,4700,5000,5600,5400,5100,5200,5200,3700,1600,300,300,300,300,300,300,400,1700,1600,2300,2300,2600,2100,1300,400,300,300,400,400,400,300,300,400,400,400,400,400,500,500,500,500,400,400,700,1300,600,300,300,400,500,1300,3100,4000,4600,5700,6100,5800,5900,5200,4200,3100,1800,800,800,800,600,600,500,900,600,700,1200,2500,4300,5300,6100,6100,5900,5400,4700,3800,2900,1300,600,600,500,600,600,800,800,1100,2800,4500,6000,6300,7000,7000,6700,6400,5700,4100,2300,1000,700,700,700,500,400,500,500,400,500,500,500,500,500,900,600,400,500,400,400,500,500,500,500,600,600,1400,3100,5400,6600,6700,6700,5000,3700,1300,700,800,1000,1000,1200,2500,4100,5200,4800,3100,1400,900,400,500,500,600,500,400,300,300,200,200,300,200,300,300,300,400,400,1300,1900,1700,1500,500,400,500,400,300,300,300,300,200,1200,1800,1200,300,300,300,300,400,300,400,400,300,300,300,200,300,500,700,600,300,300,300,300,300,400,900,400,300,300,400,200,300,300,300,300,300,300,400,300,300,200,400,300,300,400,300,300,300,400,500,300,300,300,300,300,300,300,300,300,400,400,300,400,300,300,400,400,300,300,200";
        String value2 = "1541061929261,2000,2000,1000,3000,2000,2000,2000,1000,2000,1000,1000,1000,2000,1000,1000,2000,2000,1000,100,200,100,200,500,0,100,200,100,200,2000,1000,1000,1000,2000,2000,3000,1000,1000,1000,1000,1000,3000,1000,200,100,200,200,100,100,200,100,200,100,200,200,200,200,200,100,200,200,200,100,200,200,300,200,200,200,100,200,200,200,200,200,200,300,400,300,100,200,300,200,200,100,100,100,200,200,500,200,100,100,500,200,100,300,200,200,300,300,300,400,400,300,200,200,100,0,100,200,200,100,100,200,100,200,300,200,200,200,100,100,100,200,100,100,300,200,200,300,300,200,500,2100,4400,5500,6400,6200,5200,3700,1200,200,300,200,300,200,200,200,200,200,100,100,300,100,200,400,700,300,200,100,1600,200,100,100,200,200,200,400,200,300,200,300,1800,4500,5500,5500,5400,5100,5300,4200,2100,400,100,200,200,200,0,200,200,200,200,100,200,200,200,0,200,400,1600,1800,2600,2600,1600,1500,200,100,0,400,700,500,200,200,100,200,200,300,600,600,200,0,200,200,100,200,0,200,100,100,100,200,100,200,300,100,0,200,500,2600,4400,4300,5600,4700,3300,3800,2100,300,300,300,400,200,200,100,200,100,200,100,100,200,400,500,600,600,700,200,400,500,300,300,100,200,100,300,200,300,300,400,800,2700,4700,5900,6400,6300,4600,1000,300,300,400,300,300,300,200,200,200,200,400,600,400,400,300,200,100,300,300,700,900,700,300,200,100,200,600,200,1500,3600,5300,5300,5500,5000,3500,1600,400,100,200,1000,900,400,200,100,100,0,100,100,200,200,200,200,400,100,100,100,200,100,100,200,200,400,0,100,200,300,200,200,200,300,100,100,100,300,600,200,1100,200,100,200,0,100,100,100,300,200,100,200,300,500,700,600,600,500,500,500,3400,3600,3500,900,1700,5200,4200,5100,5600,5200,3300,800,100,800,3800,3600,3500,700,600,1200,800,600,600,600,300,200,200,200,200,100,100,300,200,300,300,100,100,200,300,500,300,400,1300,2000,1900,1800,1500,1000,200,100,200,400,300,300,100,200,400,2500,2400,2700,2900,2600,1900,900,200,200,200,200,200,300,300,1700,2400,3900,5200,5500,5700,5500,4600,3400,2300,600,300,300,200,200,100,400,800,800,500,400,300,200,300,300,600,300,200,300,500,200,200,200,300,200,200,300,200,200,100,300,200,300,100,200,800,400,1600,2200,3500,4500,4900,4700,5000,5200,4600,4400,3100,1900,800,600,600,300,1000,1000,1500,1600,300,200,500,200,200,200,200,100,200,300,300,100,200,200,0,1700,3600,4600,5700,5100,4300,2700,800,200,300,500,900,600,100,200,600,1700,2100,2400,2800,2100,2300,1500,300,300,100,200,1300,3600,5000,5300,5600,5100,4300,2200,400,300,300,400,400,300,400,300,300,300,300,300,600,200,300,300,300,300,400,1100,1000,3300,4800,5800,6200,5700,5300,2400,1600,400,400,300,400,300,400,300,400,300,2400,5000,5600,5000,3700,1500,300,300,300,300,400,300,400,500,1300,1600,2000,2200,2100,1900,1500,1900,1200,700,400,300,300,300,400,300,300,300,400,500,500,400,400,300,300,300,200,300,300,300,300,300,300,400,300,400,200,400,500,800,1500,900,700,300,300,300,300,300,300,200,400,1000,3300,4700,5000,5600,5400,5100,5200,5200,3700,1600,300,300,300,300,300,300,400,1700,1600,2300,2300,2600,2100,1300,400,300,300,400,400,400,300,300,400,400,400,400,400,500,500,500,500,400,400,700,1300,600,300,300,400,500,1300,3100,4000,4600,5700,6100,5800,5900,5200,4200,3100,1800,800,800,800,600,600,500,900,600,700,1200,2500,4300,5300,6100,6100,5900,5400,4700,3800,2900,1300,600,600,500,600,600,800,800,1100,2800,4500,6000,6300,7000,7000,6700,6400,5700,4100,2300,1000,700,700,700,500,400,500,500,400,500,500,500,500,500,900,600,400,500,400,400,500,500,500,500,600,600,1400,3100,5400,6600,6700,6700,5000,3700,1300,700,800,1000,1000,1200,2500,4100,5200,4800,3100,1400,900,400,500,500,600,500,400,300,300,200,200,300,200,300,300,300,400,400,1300,1900,1700,1500,500,400,500,400,300,300,300,300,200,1200,1800,1200,300,300,300,300,400,300,400,400,300,300,300,200,300,500,700,600,300,300,300,300,300,400,900,400,300,300,400,200,300,300,300,300,300,300,400,300,300,200,400,300,300,400,300,300,300,400,500,300,300,300,300,300,300,300,300,300,400,400,300,400,300,300,400,400,300,300,200";
        int a = new Random().nextInt(2);
        JSONObject jsonObj = new JSONObject();
        jsonObj.put("start", 86000);
        jsonObj.put("end", 109000);
        jsonObj.put("spacing", 25);
        if(a == 0)
            jsonObj.put("value", value);
        else jsonObj.put("value", value2);
        return jsonObj.toString();
    }
}

访问Controller返回数据如下：

经测试成功实时刷新数据，如图所示：

xiaocxyczh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HighCharts实现数据动态绑定（AJAX）
qq_42773229的博客
04-15 1105
一、HighCharts-下载HighCharts文件包 下载地址 HighCharts7.0.3  如下： 下载的文件包里面缺少一个文件（中文包），可以使用官网的这个文件： <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js" type="text/javascri...
java实现的highcharts与ajax结合动态实时获取数据更新图表
iteye_14618的博客
12-21 347
jsp页面： Highcharts Example //x轴值 var categories=; //y轴值 var data=; //创建图表 var chart; $(document).ready(function() { chart = new Highcharts...
Ajax实现定时刷新，获取后台数据实现技术
04-29
Ajax实现定时刷新，获取后台数据实现技术
[导入]Ajax实现定时刷新,获取后台数据(实现技术ASP)
weixin_30540691的博客
01-14 113
Ajax+asp异步获取数据,自动刷新~文章来源:http://blog.csdn.net/veiny/archive/2008/01/14/2042661.aspx 转载于:https://www.cnblogs.com/veiny/articles/1100209.html
Ajax实现定时刷新,获取后台数据(实现技术ASP)
wmnmtm的专栏
06-18 739
Ajax实现定时刷新,获取后台数据(实现技术ASP)首先介绍个网站(http://www.w3school.com.cn) 上面的东西值得参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容.Now(),开始我们的主题:这里我们用Access作为数据库,建个数据库名称为user.mdb和update.html,update.asp放同一...
使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
bolan392的博客
09-15 387
   项目做了一个报表，可以实时的观察呼叫中心的电话访问量，之前的版本是使用JFreechart做的，使用一段时间后出现内存溢出，服务器的内存使用量会变得很大，所以改用Ajax前台加载数据的方式实现实时报表功能，查了很久选择了JQuery结合Highcharts的方式，Highcharts是一个JS实时报表API，下面给出基本代码：    首先，要添加JQuery和Highcharts的引用： ...
数据统计报表实时更新springmvc+ajax+highcharts
06-05
数据统计报表 数据统计报表 数据统计报表模板数据统计报表 数据统计报表
jquery+ajax+highcharts+mysql实战例子
01-14
jquery+ajax+highcharts+mysql实战例子,需要配套视频请留言
Highcharts 多个Y轴动态刷新数据的实现代码
11-22
Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg,
Highcharts＋NodeJS搭建数据可视化平台示例
12-23
前一段时间完成了一个数据可视化项目，由后台NodeJS＋Highcharts框架进行搭建。下面分享一下整个开发过程的流程，以及使用Highcharts框架的经验。 一、数据的读取 由于数据库使用的是MySQL数据库，在NodeJS中，...
highcharts联合jquery ajax 后端取数据
aibiba0894的博客
05-05 98
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三...
HighCharts动态数据刷新
MOON
03-26 5330
最近项目用到制表的功能，也就接触到了HighCharts这个工具。说是工具，其实我个人感觉他就是一个第三方的包而已。如果单机使用就得下好她的包然后引用本队路径，如果想用网络的话就用   引用如上两行。具体怎么用HighCharts表大家可以上官网查看http://www.hcharts.cn/docs/index.php。我这里只是写一个从外部导入一个json文件生成数据制成
web聊天程序，ajax+服务器推送技术
bichir的专栏
02-26 3770
web聊天技术一般用ajax请求服务器，方式有多种，比如定时几秒请求一次，或长连接什么的。我个人还是喜欢“服务器推”这种模式，它不用定几秒请求一次让服务器大大减压。长连接什么这个不懂什么意思不管了（额，不知道”服务器推“属于哪一种）。 "服务器推送"，是指当有消息时就把消息从服务器分发下来。从字面上看这个HTTP协议好像不能实现，因为HTTP是有请求才有响应的。即然这样，那我们换个思路想一下，即
Spring项目改成SpringBoot项目
热门推荐
xiaocxyczh的博客
11-30 2万+
最近到公司实习，被安排了一个活是将一个spring的html5项目改成springboot项目做二次开发，orm用的mybatis，页面Jsp。由于对项目的不熟悉导致产生了很多bug，最后在学长的帮助下终于完成了任务，简单介绍一下我的修改过程。一、新建一个springboot项目二、将原来项目的代码都搬进来三、在pom中添加依赖，可以从原pom文件复制过来，将里面与spring相关的依赖删掉（例如下
highCharts 已知Y轴坐标，如何获取该处的x轴坐标
最新发布
06-03
如果你已经知道了 Y 轴坐标的值，那么可以通过 Highcharts 提供的 `point` 和 `xAxis` 对象来获取对应的 X 轴坐标。 假设你已经获取了需要查询的点的 `point` 对象，可以使用 `point.index` 获取该点在序列中的索引，然后通过 `chart.xAxis[0].categories` 获取 X 轴的所有类别值，再通过索引获取对应的 X 轴坐标值。 示例代码如下： ```javascript // 假设已知 Y 坐标为 10 var yValue = 10; // 获取对应的 point 对象 var point = chart.series[0].data.find(function(p) { return p.y === yValue; }); // 获取该点在序列中的索引 var index = point.index; // 获取 X 轴坐标值 var xValue = chart.xAxis[0].categories[index]; ``` 需要注意的是，上述代码假设 X 轴的类型为类别型（category），如果 X 轴类型为数值型（linear），则需要使用 `chart.xAxis[0].toValue(x)` 方法来获取对应的数值型 X 轴坐标值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值