前面写过“Highcharts的用法总结”,当然了,在实际应用中,图表数据都是要从后台获取的,根据之前的使用,贴一些例子来分享学习。

首先,如果没有获取后台数据,又希望呈现一个动态图表的话,可以很轻易的想到,Y值可以写成随机数,当然,X轴最常见的就是当前时间。那么,同理,用后台获取的数据替换随机数,不就实现了“Ajax—动态图表”嘛。

一、向图表中插入随机点

<div id="container21" style="min-width: 500px;height: 320px;border-bottom: 1px dashed #9b9d9e;"></div>
<script>
Highcharts.setOptions({ global: { useUTC: false } });
var chart21 = new Highcharts.Chart({
chart: {
renderTo: 'container21',
type: 'spline'
},
title: {
text: '历史温度'
},
subtitle: {
text: " "
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H : %M'
}
},
yAxis: {
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: '温度:摄氏度',
style: {
color: Highcharts.getOptions().colors[0]
}
},
startOnTick: true, //为true时,设置min才有效
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
Highcharts.numberFormat(this.y, 2) + ' 摄氏度' + '</span>';
},
crosshairs: true
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
type: 'spline',
name: '温度', data: (function () {
var data = [],
time = (new Date()).getTime(),
i; for (i = -9; i <= 0; i++) { // 图表初始显示10个点(均为0),当前时间是最后那个初始点的X,故之前的点的时间(X)是当前时间之前,故i为负
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})() }] }); setInterval(function(){
var x;
var y;
x = (new Date()).getTime();
y = Math.random(); // Y 是随机数 chart21.series[0].addPoint([x, y], true, true); //追加点并去掉一个点 //chart.series[0].addPoint([x, y]);追加点( 不去掉点 )
},1000); </script>

图表中初始的时候,是10个0,后来就出现随机数点。

二、用后台获取的数据替换随机数,实现“Ajax—动态图表”

<script>
// 温度
Highcharts.setOptions({ global: { useUTC: false } });
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'spline'
},
title: {
text: ''
},
subtitle: {
text: " "
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H : %M'
}
},
yAxis: {
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '温度:摄氏度',
style: {
color: Highcharts.getOptions().colors[1]
}
},
startOnTick: true,
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
Highcharts.numberFormat(this.y, 2) + ' 摄氏度' + '</span>';
},
crosshairs: true
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
type: 'spline',
name: '温度',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i; for (i = -9; i <= 0; i++) {
data.push({
x: time,
y: 0
});
}
return data;
})()
}]
});

// 湿度
Highcharts.setOptions({ global: { useUTC: false } });
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'spline'
},
title: {
text: ''
},
subtitle: {
text: " "
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H : %M'
}
},
yAxis: {
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '湿度:%',
style: {
color: Highcharts.getOptions().colors[1]
}
},
startOnTick: true,
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
Highcharts.numberFormat(this.y, 2) + ' %' + '</span>';
},
crosshairs: true
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
type: 'spline',
name: '湿度',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i; for (i = -9; i <= 0; i++) {
data.push({
x: time,
y: 0
});
}
return data;
})()
}] });
    var temperature, humidity;

    $(function () {

        function getDataList() {
try {
$.ajax({
type: "post",
url: "/produce/enviroment/getenviroment",
data: { },
dataType: "json",
async: false,
success: function (e) {
temperature = e.Temperature;
humidity = e.Humidity;
},
error: function (e) {
console("err");
}
});
} catch (e) {
console(e);
}
} setInterval(function () {
getDataList(); var x1, x2, y1, y2;
x1 = (new Date()).getTime();
x2 = (new Date()).getTime();
y1 = temperature;
y2 = humidity;
chart1.series[0].addPoint([x1,y1],true,true);
chart2.series[0].addPoint([x2, y2], true, true);
}, 1000); }); </script>

每秒都获取后台数据,然后插入到图表中~~~

Ajax/Highcharts—动态图表的更多相关文章

  1. ajax请求返回Json字符串运用highcharts数据图表展现数据

    [1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...

  2. Highcharts 动态图

    Highcharts 动态图 每秒更新曲线图 chart.events chart.event 属性中添加 load 方法(图表加载事件).在 1000 毫秒内随机产生数据点并生成图表. chart: ...

  3. DWR(AJAX)+Highcharts绘制曲线图,饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  4. 使用Highcharts实现图表展示

    本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...

  5. 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序

    面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...

  6. EXCEL 2010学习笔记—— 动态图表

    今天梳理一下动态图表的相关内容,做一个简单的整理 关键的操作点: 1.插入动态控制器:开发工具->插入->表单控件 对控件进行修改  右键 设置控件格式->单元格链接 用来作为if ...

  7. 使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示

    原文:使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示 首先来看一看实现的效果: PS:原始的程序中更新曲线数据时添加了过渡的效果,具体可 ...

  8. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  9. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

随机推荐

  1. angularJs同步请求

    今天在写几级联动的时候,因为比如上一个接口请求数据成功返回后,才能根据上一个接口返回的数据请求下一个接口,以此类推:因此有了同步请求的想法. 在前端做同步读取显然不是好的实践做法,同步之后会严重影响前 ...

  2. python 删除特定字符所在行

    #查询文件中含有特殊字符串的行 #!/usr/bin/python # -*- coding:utf- -*- import re file1 = open('test.txt','r+') istx ...

  3. Centos7.4安装RabbitMQ

    1.1 安装RabbitMQ 1.1.1 系统环境 [root@rabbitmq ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 ( ...

  4. h5 特效

    地址:http://www.cnblogs.com/sun927/p/5842852.html 几个别人总结的css3炫酷效果,有需要直接拿来用即可,包括以下几个效果: 1.悬浮时放大 2.悬浮时转一 ...

  5. SQLSERVER EXISTS IN 优化

    数据量: 首先我们看看待优化的SQL: 简单的分析下来发现: EXISTS 这部分执行比较慢,我们来看一下, 这种写法比较便于理解,但是执行起来却很慢.既然这里慢,我们就要优化这部分. 首先我是想把拼 ...

  6. javascript弹出带文字信息的提示框效果

    // position of the tooltip relative to the mouse in pixel // <html><head><meta charse ...

  7. VMware ESXi 和 VMware Server 有区别

    VMware ESXi 和 VMware Server 有区别: VMware ESXi 是一个企业级虚拟机管理程序,提供接近本机性能的祼机体系结构.各种旨在提高整合率的功能(例如取消内存复制),以及 ...

  8. 简单的理解 equals和==的区别

    直接上代码: //== 比较的是地址 String test = new String("测试"); String test1 = new String("测试" ...

  9. 如何低成本搭建dnslog服务器

    DNSLog,简单来说,就是通过记录对于域名的DNS请求,通过dns请求这个相对"隐蔽"的渠道,来委婉地获取到想要获得的信息. 例如,在一个针对mysql数据库的注入中,如果没有回 ...

  10. Windows 7 [Web应用程序项目***已配置为使用IIS。无法访问IIS元数据库,您没有足够的特权访问计算机上的IIS网站]

    如下所示,我最近也遇到这个类似的错误(Win7 + IIS7.0),最后如下图解决 系统用户权限问题, 通过管理员运行 即可正常使用.