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 ...
随机推荐
- IntelliJ配置SpringMVC提示“found:java.lang.String required:java.lang.String”
File->Invalid Cache&Restart 据说Android Studio也会出现这个问题,但是没遇到过 重启环境后,找不到Controller的问题也解决了
- Linux ifconfig 命令
在centos6 自带ifconfig 在centos7 默认不带ifconfig,需要自己安装 ifconfig命令用来配置或查看网卡接口,常见用法如下: 安装ifconfig命令 [root@my ...
- IIS下实现帝国CMS搜索页伪静态
前面ytkah讲了apache下帝国CMS搜索页伪静态实现方法,网友说服务器是用IIS,那么IIS下如何实现帝国CMS搜索页伪静态呢?首先得先有URL重写插件,下载地址:http://www.iis. ...
- Redis入门到高可用（四）—— Redis的五种数据结构的内部编码
Redis的五种数据结构的内部编码
- [sh]rm -rf*的防护和普通用户执行命令
尽量用普通用户执行,因为普通用户无法删除root的文件,避免误删除 rm -rf 不可取, 尽量find+rm -rf 尽量cd && rm -rf * 加上逻辑 cd /tmp/re ...
- 用lua扩展你的Nginx（整理）-----openresty
用lua扩展你的Nginx(整理) 首先得声明.这不是我的原创,是在网上搜索到的一篇文章,原著是谁也搞不清楚了.按风格应该是属于章亦春的文章. 整理花了不少时间,所以就暂写成原创吧. 一. 概述 Ng ...
- UX求职：FB和微软这些大佬公司看重的UX设计师技能，你还差几条？
最近是金三银四的求职季,当然,不管你是想求职跳槽,还是想不断充电学习升职加薪,总是要从优秀的一群人中学习. 本文依据 Facebook.微软.Booking 等互联网大佬公司的UX设计师访谈记录,整理 ...
- Fiddler 手机抓包设置
IOS 为例 1. Fiddler -> Tools -> Options ->Connection 2. 手机 Settings -> WIFI ->设置当前连接的网络 ...
- echarts实现全国地图
1.首先我没有按需引入echarts,我是全局引入的,所以说在node_modules中有 这个china,你只需要在你的页面引入即可 但是按需引入echarts 的 项目中node_modules中 ...
- Response.Redirect & window.location.href
对接中信的微信H5支付时,对方(其实是微信)需要对我们的域名进行授权,即,我方需向渠道报备支付域名,微信只认可由此域名发起的支付交易. 支付中心只提供了一套支付接口供下游系统访问.因为给渠道报备的域名 ...