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 ...
随机推荐
- 20181211 Oracle Parallel
如下用Select作为参考, Select 在sql server中如果直接查询大量的数据,方式为给列增加Index,可以提高效率.如果查询数据量非常大的时候其实效率依旧不高,而且index在增删改中 ...
- c#获取Amr文件的时长（毫秒）亲测有效
/// <summary> /// c#获取Amr文件的时长(毫秒) /// </summary> /// <param name="fileName" ...
- Python 全栈开发一 python初识
1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- 笔记本(ThinkPad)怎样关闭触摸板
随着笔记本电脑的普及,人们越来越习惯于出门使用笔记本,笔记本的便捷高效也大幅度地提升了人们的工作效率.但是如果居家使用笔记本电脑,也有其不便之处.比如在键盘上打字,很容易就会喷到触摸板,以至于光标一下 ...
- mac console color setting
1. 编辑文件 ~/.bash_profile 添加 export CLICOLOR=1 export LSCOLORS=GxFxCxDxBxegedabagaced 2. 加载生效 source ~ ...
- 软件测试常用Linux命令
有些技能可以事半功倍,有些命运掌握在我们手中.熟练的掌握和使用这些命令可以提高工作效率,并且结合这些命令对测试过程中遇到的问题进行一些初步的定位. 1 目录与文件操作 1.1 ls(初级) 使用权限: ...
- 当我的url请求会变成jsp页面路径时的解决办法
@RequestMapping(value="shippingOrder") $.post("/ezsh/orderAd/shippingOrder",para ...
- 数据加密之SymmetricAlgorithm加密
#region SymmetricAlgorithm加密 /// <summary> /// 按指定对称算法.键和向量加密字符串 /// </summary> public s ...
- Nginx.代理MySQL
Nginx.代理MySQL 1. Nginx在安装的时候,需要加上一个参数:--with-stream 即Nginx安装指令为:./configure --prefix=/u01/app/nginx ...
- LeetCode12.整数转罗马数字
给定一个整数,将其转为罗马数字.输入确保在 1 到 3999 的范围内. 示例 1: 输入: 3 输出: "III" 示例 2: 输入: 4 输出: "IV" ...