前面写过“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. S5PV210 点亮Led

    GPC1CON, R/W, Address = 0xE020_0080 GPC1DAT, R/W, Address = 0xE020_0084 举例 #define GPC1CON *((volati ...

  2. Image Processing and Computer Vision_Review:Local Invariant Feature Detectors: A Survey——2007.11

    翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...

  3. Django项目上线的准备工作

    settings文件配置 添加上STATIC_ROOT = os.path.join(BASE_DIR, "/static/") 我的配置项目文件的最终 STATIC_URL = ...

  4. 每日命令:(7)mv

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...

  5. web开发:javascript动画

    一.鼠标事件 二.js盒模型 三.鼠标拖拽 四.键盘事件 五.其他时间应用 六.定时器 七.定时器案例 八.随机数 一.鼠标事件 <!DOCTYPE html> <html> ...

  6. 【实用linux命令记录】

    1.显示完整的进程命令 cat /proc/29049/cmdline 如上面显示不完整可用当前的 cat /proc/进程号/cmdline显示 vtysh下显示完整的配置

  7. swoole 协程channel乱测

    channel和数组差不多,可以被用作队列,属性capacity是设置容量,isEmpty() isFull() 用来判断队列是空还是满,push()加入队列 pop()弹出队列 interface ...

  8. redis常见问题(转)

    常见问题:1.为什么使用redis(一)性能我们在碰到需要执行耗时特别久,且结果不频繁变动的SQL,就特别适合将运行结果放入缓存.这样,后面的请求就去缓存中读取,使得请求能够迅速响应.(二)并发在大并 ...

  9. 解决从其他地方拷贝过来的Android项目在本机不能运行(报错)的问题

    这个问题一般是由gradle版本不同引起的.要解决可以这样: 一.在确保本机Android studio 正常使用的情况下,在本机新建一个Android项目 二.在文件夹中打开新建的Android项目 ...

  10. 智能指针weak_ptr记录

    智能指针weak_ptr为弱共享指针,实际上是share_ptr的辅助指针,不具备指针的功能.主要是为了协助 shared_ptr 工作,可用来观测资源的使用情况.weak_ptr 只对 shared ...