highchart应用示例2-上：圆角柱状图，下：多指标曲线图
1、ajax调用接口获取数据
function getCityData()
{
var date1 = $('#datetimepicker1').val();
var date2 = $('#datetimepicker2').val(); var params = { 'date1': date1, 'date2': date2, 'city': '荣成','type':type};
$.getJSON('http://127.0.0.1:8081/rcforeInterface/rest/services/getAirSplineData', params, function (datas)
{
//删除历史数据
dataAQI.splice(0, dataAQI.length);
dataPM25.splice(0, dataPM25.length);
dataPM10.splice(0, dataPM10.length);
dataCO.splice(0, dataCO.length);
dataNO2.splice(0, dataNO2.length);
dataO3.splice(0, dataO3.length);
dataSO2.splice(0, dataSO2.length); if (datas.length == 0) { showChartByItems(); return; } datas.forEach(function (item, index, dataRow)
{
time =item.datetime;
aqi = Number(item.aqi);
pm2_5 = Number(item.pm25);
pm10 = Number(item.pm10);
co = Number(item.co);
no2 = Number(item.no2);
o3 = Number(item.o3_8);
so2 = Number(item.so2); if (aqi == 0) aqi = null;
if (pm2_5 == 0) pm2_5 = null;
if (pm10 == 0) pm10 = null;
if (co == 0) co = null;
if (no2 == 0) no2 = null;
if (o3 == 0) o3 = null;
if (so2 == 0) so2 = null; aqiIndex = getAQILevelIndex(aqi); dataAQI.push({ x: converTimeFormat(time).getTime(), y: aqi, color: getColorByIndex(aqiIndex)});
dataPM25.push({ x: converTimeFormat(time).getTime(), y: pm2_5 });
dataPM10.push({ x: converTimeFormat(time).getTime(), y: pm10 });
dataSO2.push({ x: converTimeFormat(time).getTime(), y: so2 });
dataNO2.push({ x: converTimeFormat(time).getTime(), y: no2 });
dataCO.push({ x: converTimeFormat(time).getTime(), y: co });
dataO3.push({ x: converTimeFormat(time).getTime(), y: o3 }); });
showChartByItems();
});
}
2、根据选择条件，调用显示chart
function showChartByItems()
{
showLineChartWithAQI('chart1', dataAQI, "", "AQI",type.toUpperCase());
showLineChartWithWRW('chart2', dataPM25, dataPM10, dataSO2, dataNO2, dataCO, dataO3, type.toUpperCase()); }
3、显示上部的圆角柱状图
function showLineChartWithAQI(container, dataArray1, unit1, labelStr1, type)
{
var dateTypeFormat;
var itemcolor1 = "#D26900";
var itemcolor2 = "#4F81BD";
if (type == "HOUR")
{
dateTypeFormat = '%Y-%m-%d %H:%M';
}
else if (type == "DAY")
{
dateTypeFormat = '%Y-%m-%d';
}
else if (type == "MONTH")
{
dateTypeFormat = '%Y-%m';
} markerShowFlag = true; $('#' + container).highcharts({
chart: {
type: 'column',
zoomType: 'x',
spacingLeft: 0,
spacingRight: 0
},
title: {
text: '荣成市空气质量AQI分布',
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
},
},
xAxis: {
type: 'datetime',
labels: { style: { fontSize: '14px' } },
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H时',
day: '%m月%d日',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: [{
title: {
text: labelStr1,
style: {
color: '#000000',
fontSize: '14px',
},
},
labels: {
format: '{value}' + unit1,
style: {
color: '#000000',
fontSize: '14px',
}
},
min: 0
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var arr = [];
tip = '<span style="font-size:16px;color:black">' + Highcharts.dateFormat(dateTypeFormat, this.x) + '</span><br/><hr style="margin:3px 0;"/>'
+ "<table width='120px' style='font-size:16px'>";
tip = tip + "<tr><td style='color:" + this.points[0].series.color + "'>" + this.points[0].series.name + ": </td><td align='right'><b>" + this.points[0].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "</table>";
return tip;
}
},
plotOptions: {
series: {
marker: {
enabled: markerShowFlag,
radius: 3
},
enableMouseTracking: true,
turboThreshold: 0
},
column: {
dataLabels: {
enabled: true
},
pointPadding: 0.1,
borderWidth: 0,
groupPadding: 0,
shadow: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting:{
buttons:{
contextButton: {
menuItems: [{
text: '导出图片',
onclick: function () {
this.exportChart();
}
}]
},
},
filename: '荣成市空气质量AQI分布',//导出的文件名
type: 'image/png',//导出的文件类型
sourceWidth: chartWidth,
sourceHeight: chartHeight,
scale:1
},
series: [{
name: labelStr1,
data: dataArray1,
color: itemcolor1,
yAxis: 0,
borderRadius:7
}]
});
var chartObj = $('#' + container).highcharts(); }
4、显示下部的，多指标曲线图
function showLineChartWithWRW(container, dataPM25, dataPM10, dataSO2, dataNO2, dataCO, dataO3, type)
{
var unit1 = "ug/m<sup>3<sup/>"
var unit2 = "mg/m<sup>3<sup/>"
var dateTypeFormat;
var itemcolor1 = "#D26900";
var itemcolor2 = "#4F81BD";
if (type == "HOUR")
{
dateTypeFormat = '%Y-%m-%d %H:%M';
}
else if (type == "DAY")
{
dateTypeFormat = '%Y-%m-%d';
}
else if (type == "MONTH")
{
dateTypeFormat = '%Y-%m';
} markerShowFlag = true; $('#' + container).highcharts({
chart: {
type: 'spline',
zoomType: 'x',
spacingLeft: 0,
spacingRight: 0
},
title: {
text: '荣成市空气质量污染曲线分析',
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
},
},
xAxis: {
type: 'datetime',
labels: { style: { fontSize: '14px' } },
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H时',
day: '%m月%d日',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: [{
title: {
text: "污染物浓度",
style: {
color: '#000000',
fontSize: '14px',
},
},
labels: {
format: '{value}' + unit1,
style: {
color: '#000000',
fontSize: '14px',
}
},
min: 0
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function ()
{
var arr = [];
tip = '<span style="font-size:16px;color:black">' + Highcharts.dateFormat(dateTypeFormat, this.x) + '</span><br/><hr style="margin:3px 0;"/>'
+ "<table width='120px' style='font-size:16px'>";
tip = tip + "<tr><td style='color:" + this.points[0].series.color + "'>" + this.points[0].series.name + ": </td><td align='right'><b>" + this.points[0].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "<tr><td style='color:" + this.points[1].series.color + "'>" + this.points[1].series.name + ": </td><td align='right'><b>" + this.points[1].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "<tr><td style='color:" + this.points[2].series.color + "'>" + this.points[2].series.name + ": </td><td align='right'><b>" + this.points[2].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "<tr><td style='color:" + this.points[3].series.color + "'>" + this.points[3].series.name + ": </td><td align='right'><b>" + this.points[3].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "<tr><td style='color:" + this.points[4].series.color + "'>" + this.points[4].series.name + ": </td><td align='right'><b>" + this.points[4].y + "</b>" + unit1 + "</td></tr>";
tip = tip + "</table>";
return tip;
}
},
plotOptions: {
series: {
marker: {
enabled: markerShowFlag,
radius: 3
},
enableMouseTracking: true,
turboThreshold: 0
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: '导出图片',
onclick: function () {
this.exportChart();
}
}]
},
},
filename: '荣成市空气质量污染曲线分析',//导出的文件名
type: 'image/png',//导出的文件类型
sourceWidth: chartWidth,
sourceHeight: chartHeight,
scale: 1
},
series: [{
name: "PM2.5浓度",
data: dataPM25,
color: "#4F81BD",
yAxis: 0
}, {
name: "PM10浓度",
data: dataPM10,
color: "#C0504D",
yAxis: 0
}, {
name: "SO2浓度",
data: dataSO2,
color: "#9BBB59",
yAxis: 0
}, {
name: "NO2浓度",
data: dataNO2,
color: "#8064A2",
yAxis: 0
}, {
name: "O3浓度",
data: dataO3,
color: "#F79646",
yAxis: 0
}]
});
var chartObj = $('#' + container).highcharts(); }
highchart应用示例2-上：圆角柱状图，下：多指标曲线图的更多相关文章
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
- java上转型和下转型（对象的多态性）
/*上转型和下转型(对象的多态性) *上转型:是子类对象由父类引用,格式:parent p=new son *也就是说,想要上转型的前提必须是有继承关系的两个类. *在调用方法的时候,上转型对象只能调 ...
- Arduino 极速入门系列 - 光控灯（2） - 关于开关，上拉、下拉电阻那些事
接上篇,这次继续讲解光控灯的另外两个组成部分 - 开关和光敏电阻,光控灯里面将会有自锁开关按钮和光敏电阻.这此主要给新玩电子的朋友解释一下开关按钮的做法. 开关按钮的引脚电平读取问题 - 新手专用 我 ...
- Unity上一页下一页切换功能实现源码（仅供参考）
在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...
- IIS上虚拟目录下站点的web.config与根站点的web.config冲突解决方法
IIS7.5上在站点下部署虚拟目录,访问虚拟目录下的项目提示与父节点配置冲突.,节点与的<system.web>节点与主站点的<system.web>冲突解决方法: 在站点下的 ...
- css -- 映像 ，分页（上一页下一页）
1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent) ...
- onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）
使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...
- LoadRunner - 当DiscuzNT遇上了Loadrunner(下) (转发)
当DiscuzNT遇上了Loadrunner(下) 在之前的两篇文章中,基本上介绍了如何录制脚本和生成并发用户,同时还对测试报告中的几个图表做了简单的说明.今天这篇文章做为这个系列的最后一篇,将会介绍 ...
- ecshop调用文章显示上一篇下一篇
首先调用文章中的上一篇和下一篇语法为: 代码如下 复制代码 上一篇:<a href="{$next_article.url}">{$next_article.titl ...
随机推荐
- Redis入门到高可用（七）——Hash
一.结构 Mapmap结构: filed 不能相同,value可以相同. 二.重要指令 ♦️ HSET ♦️ HGET ♦️ HDEL ♦️ Hlen ♦️ HEXISTS ♦️HGETALL ...
- openssl生成RSA公钥和私钥对
在ubuntu上要使用openssl的话需要先进行安装,命令如下: sudo apt-get install openssl 安装完成就可以使用openssl了. 首先需要进入openssl的交互界面 ...
- 263A
#include<stdio.h> #include<stdlib.h> int main() { int i, j; int temp; int t_i, t_j; int ...
- 利用Tensorflow实现神经网络模型
首先看一下神经网络模型,一个比较简单的两层神经. 代码如下: # 定义参数 n_hidden_1 = 256 #第一层神经元 n_hidden_2 = 128 #第二层神经元 n_input = 78 ...
- MySQL--4操作数据表中的记录小结
最常用,最复杂的语句: 每一项的: 表的参照 From 条件 WHERE 进行记录的分组 GROUP BY 分组的时候对分组的条件进行设定 HAVING 对结果进行排序 ORDER BY ...
- iOS 开发笔记-NSURLConnection的使用
通过NSURLConnection发送一个HTTP GET请求 //send a GET request to server with some params -(void)httpGetWithPa ...
- nginx 日志详解及自定义日志配置
nginx的log日志分为access log 和 error log 其中access log 记录了哪些用户,哪些页面以及用户浏览器.ip和其他的访问信息 error log 则是记录服务器错误日 ...
- java RE Validation常用
import java.util.regex.Matcher; import java.ulil.regex.Pattern; public class RegExpUtil { public sta ...
- jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Php 通过curl提交post内容为 Json的请求
<?php $data = array("cNos" => array("1064917432615","1064917432615&qu ...