前面写过“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. 安卓开发之SimpleAdapter的使用

    package com.lidaochen.test; import android.support.v7.app.AppCompatActivity; import android.os.Bundl ...

  2. IO 理论 SOCK理论

    IO密集型程序 在程序执行过程中存在大量IO操作,而CPU操作较少,消耗CPU较少,运行效率较低CPU(计算)密集型程序 在程序执行中,CPU运算较多,IO操作相对较少(消耗CPU大,运行速度快)IO ...

  3. 一个用beego写的API项目

    beego-api 一个使用beego写的API 支持Api日志 支持Swagger注解文档 项目地址: https://github.com/eternity-wdd/beego-api 使用说明 ...

  4. 8. Object References, Mutability, and Recycling

    1. Variables Are Not Boxes # Think variables as sticky notes a = [1, 2, 3] b = a a.append(4) print b ...

  5. Comparator分组测试

    import java.util.ArrayList; import java.util.Collection; import java.util.Collections; import java.u ...

  6. metal2 里 programmable blending 和image block的区别 语法以及persistent thread group的语法

    programmable blending 刚接触这个概念的时候 挺激动的 因为能解决很多管线里面的问题 比如 切一次rt再切回来 为了做read write same rt 有了这个 就不用切啦 可 ...

  7. spring-boot-configuration-processor 是干啥用的

    spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 引入pom依赖 <de ...

  8. Educational Codeforces Round 33 (Rated for Div. 2) B题

    B. Beautiful Divisors Recently Luba learned about a special kind of numbers that she calls beautiful ...

  9. HGOI 20191105 题解

    Problem A Joker 老虎和蒜头是好朋友. 夏天过去了,凉爽的秋天来临,老虎和蒜头又有了新的娱乐项目.老虎有一个远房表亲是西伯利亚虎,那里流行着一个纸牌游戏:两位玩家参与游戏,道具是一副54 ...

  10. 转:JMeter5的If Controller操作解析

    问题描述 在JMeter中添加了If Controller控制器,然后再控制器的表达式输入框中输入了预先构造的为“真”条件,执行Run发现结果树中并没有监控到执行的记录. 问题分析 在最新版JMete ...