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(); }); }
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,} },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,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‘,title: { text: ‘荣成市空气质量污染曲线分析‘,yAxis: [{ title: { text: "污染物浓度",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; } },turboThreshold: 0 } },legend: { enabled: true },exporting: { buttons: { contextButton: { menuItems: [{ text: ‘导出图片‘,filename: ‘荣成市空气质量污染曲线分析‘,scale: 1 },series: [{ name: "PM2.5浓度",data: dataPM25,color: "#4F81BD",yAxis: 0 },{ name: "PM10浓度",data: dataPM10,color: "#C0504D",{ name: "SO2浓度",data: dataSO2,color: "#9BBB59",{ name: "NO2浓度",data: datanO2,color: "#8064A2",{ name: "O3浓度",data: dataO3,color: "#F79646",yAxis: 0 }] }); var chartObj = $(‘#‘ + container).highcharts(); }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
