前面写过“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. TimeUtil 工具类

    /** * TODO * * @auther xh * @date 6/11/19 3:32 PM */ public class TimeUtil { public static final Str ...

  2. 处理器拦截器(HandlerInterceptor)详解(转)

    简介 SpringWebMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter,用于处理器进行预处理和后处理. 应用场景 1.日志记录,可以记录请求信息的日志,以便进行信息监控.信息统计 ...

  3. 14.SpringMVC核心技术-类型转换器

    类型转换器 在前面的程序中,表单提交的无论是 int 还是 double 类型的请求参数,用于处理该请求 的处理器方法的形参, 均可直接接收到相应类型的相应数据,而非接收到 String 再手工转换. ...

  4. QT学习之深入了解信号槽

    槽函数和普通的 C++成员函数没有很大的区别.它们也可以使 virtual 的:可以被重写:可以使 public.protected 或者 private 的:可以由其它的 C++函数调用:参数可以是 ...

  5. [shell] shell echo打印换行的方法

    echo要支持同C语言一样的\转义功能,只需要加上参数-e,如下所示: echo -e hello \n echo \n

  6. 开源Asp.net CMS mojoPortal-源码运行

    1.下载mojoPortal源码 下载地址:http://mojoportal.codeplex.com/SourceControl/latest 我下载的版本是:2.4.0.9 MSSQL 以下是m ...

  7. flex布局详解

    1.背景介绍 传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C ...

  8. ios的uc浏览器图片加载不出来原因

    最近做一个落地页发现一个在ios设备上uc浏览器的bug 在uc浏览器开启广告过滤的时候,会把图片过滤掉,无论是背景图还是img标签加载的图片 经过搜索与实验,发现广告过滤的设置关掉就可以,可是一般情 ...

  9. qt触摸屏隐藏鼠标指针

    方法1:运行加参数-nomouse 方法2:QWidget::setCursor(QCursor(Qt::BlankCursor) 例:this->setCursor(Qt::BlankCurr ...

  10. Codeforces Round #456 (Div. 2) 912E E. Prime Gift

    题 OvO http://codeforces.com/contest/912/problem/E 解 首先把这个数字拆成个子集,各自生成所有大小1e18及以下的积 对于最坏情况,即如下数据 16 2 ...