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(); }