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 ...
随机推荐
- what's the 场外交易
出自 MBA智库百科(https://wiki.mbalib.com/) 什么是场外交易 场外交易是指证券投资机构之间不通过股票交易所,而以电话.电传等方式相互进行的股票交易. ...
- dos2unix命令
dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...
- SQL存储过程分页
CREATE PROC ZDY_FY(@Pages INT, @pageRow INT) --@Pages第几页 @pageRow每页显示几行 AS BEGIN DECLARE @starNum IN ...
- TCP、UDP和HTTP详解
http:是用于www浏览的一个协议.tcp:是机器之间建立连接用的到的一个协议. 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.R ...
- 【4】axios 获取数据
API:https://www.kancloud.cn/yunye/axios/234845 基于axios进行二次封装 安装axios npm install axios --save 安装成功 [ ...
- clone git 项目到 非空目录
如果我们往一个非空的目录下 clone git 项目,就会提示错误信息: fatal: destination path '.' already exists and is not an empty ...
- CentOS里alias命令
alias命令 功能描述:我们在进行系统的管理工作一定会有一些我们经常固定使用,但又很长的命令.那我们可以给这些这一长串的命令起一个别名.之后还需要这一长串命令时就可以直接以别名来替代了.系统中已经有 ...
- （转）Mysql LIMIT如何正确对其进行优化
以下的文章主要是对Mysql LIMIT简单介绍,我们大家都知道LIMIT子句一般是用来限制SELECT语句返回的实际行数.LIMIT取1个或是2个数字参数,如果给定的是2个参数,第一个指定要返回的第 ...
- Py中map与np.rival学习
转自:廖雪峰网站 1.map/reduce map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返回. 举例说明 ...
- [LeetCode] 872. Leaf-Similar Trees_Easy tag: DFS
Consider all the leaves of a binary tree. From left to right order, the values of those leaves form ...