Highchart Application Example 1--2 2 y-axes of different types of variables

1. Ajax calling interface and processing data

functionGetcitydata () {varDate1 = $ (' #datetimepicker1 '). Val (); varDate2 = $ (' #datetimepicker2 '). Val (); varparams = {' Date1 ': date1, ' date2 ': Date2, ' City ': ' Rongcheng '}; $.getjson (' Http://127.0.0.1:8081/rcforeInterface/rest/services/getGuanSplineData ', params,function(datas) {//Delete historical DataDataaqi.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); Datahum.splice (0, datahum.length); Datatmp.splice (0, datatmp.length); Datapcpn.splice (0, datapcpn.length); Datawind.splice (0, datawind.length); if(Datas.length = = 0)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;                Dataaqi.push ({X:convertimeformat (time). GetTime (), Y:aqi});                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}); Hum=Number (Item.hum); PCPN=Number (ITEM.PCPN); TMP=Number (item.tmp); WIND_SPD= Number (number (ITEM.WIND_SPD)/3.6). toFixed (1)); Winddirection =Item.wind_dir; Wdurl=Getwinddirectionurl (winddirection); if(hum = = 0) Hum =NULL; if(wind_spd = = 0) wind_spd =NULL;                Datahum.push ({X:convertimeformat (time). GetTime (), y:hum});                Datatmp.push ({X:convertimeformat (time). GetTime (), y:tmp});                Datapcpn.push ({X:convertimeformat (time). GetTime (), Y:PCPN}); Datawind.push ({X:convertimeformat (time). GetTime (), Y:WIND_SPD, marker: {symbol:                                    Wdurl}, Winddirection:winddirection,});            });        Showchartbyitems ();    }); }

2, depending on the choice, load different variables

functionShowchartbyitems () {vardataArray1, unit1, LABELSTR1,DATAARRAY2,UNIT2,LABELSTR2; Switch(ITEM1) { Case"AQI": DataArray1 = Dataaqi; Unit1 = ""; LABELSTR1 = "AQI"; Break;  Case"PM2.5": DataArray1 = dataPM25; unit1 = "ug/m<sup>3<sup/>"; LABELSTR1 = "PM2.5 concentration"; Break;  Case"PM10": DataArray1 = dataPM10; unit1 = "ug/m<sup>3<sup/>"; LABELSTR1 = "PM10 concentration"; Break;  Case"SO2": DataArray1 = dataSO2; unit1 = "ug/m<sup>3<sup/>"; LABELSTR1 = "SO2 concentration"; Break;  Case"NO2": DataArray1 = dataNO2; unit1 = "ug/m<sup>3<sup/>"; LABELSTR1 = "NO2 concentration"; Break;  Case"CO": DataArray1 = DataCo; unit1 = "mg/m<sup>3<sup/>"; LABELSTR1 = "Co concentration"; Break;  Case"O3": DataArray1 = dataO3; unit1 = "ug/m<sup>3<sup/>"; LABELSTR1 = "O3 concentration"; Break; }        Switch(ITEM2) { Case"TMP": DataArray2 = datatmp; Unit2 = "℃"; LABELSTR2 = "Temperature"; Break;  Case"HUM": DataArray2 = Datahum; Unit2 = "%"; LABELSTR2 = "humidity"; Break;  Case"Wind": DataArray2 = DataWIND; Unit2 = "M/S"; LABELSTR2 = "wind speed"; Break;  Case"PCPN": DataArray2 = DATAPCPN; Unit2 = "MM"; LABELSTR2 = "precipitation"; Break; } showLineChartWith2 (' Chart ', DataArray1, UNIT1,LABELSTR1, DataArray2, UNIT2,LABELSTR2, ' HOUR '); }

3. Call the Chart Component to display

functionshowLineChartWith2 (container, DataArray1, Unit1, LabelStr1, DataArray2, Unit2, LABELSTR2, type, avg) {varDatetypeformat; varItemcolor1 = "#D26900"; varItemcolor2 = "#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:' Rongcheng air quality and meteorological correlation analysis ', Style: {color:' #000000 ', FontSize:' 18px ', fontFamily:' Microsoft Ya Black '},}, Xaxis: {type:' DateTime ', Labels: {style: {fontSize:' 14px '}}, Datetimelabelformats: {millisecond:'%h:%m:%s.%l ', Second:'%h:%m:%s ', minute:'%h:%m ', hour:' When%h ', Day:'%m month%d day ', week:'%m-%d ', Month:'%y-%m ', Year:'%Y '}}, YAxis: [{title: {text:labelstr1, Style: {color:itemcolor1, fontSize:' 14px ', },}, Labels: {format:' {value} ' +unit1, Style: {color:itemcolor1, fontSize:' 14px ',}}, Min:0}, {title: {TEXT:LABELSTR2, style: { Color:itemcolor2, FontSize:' 14px ', },}, Labels: {format:' {value} ' +Unit2, Style: {Color:itemcolor2, fontSize:' 14px ', },}, opposite:true}], tooltip: {shared:true, usehtml:true, Formatter:function ()                {                    vararr = []; Tip= ' <span style= ' font-size:16px;color:black ' > ' + highcharts.dateformat (Datetypeformat, This. x) + ' </span><br/>; 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>" + unit2 + "</td></tr>"; if( This. points[1].point.winddirection! =NULL) {Tip= Tip + "<tr><td style= ' color: #000000 ' > Wind: </td><td align= ' right ' ><b>" + This. points[1].point.winddirection + "</b>" + "</td></tr>"; } Tip= Tip + "</table>"; returntip; }}, Plotoptions: {series: {marker: {ena Bled:markershowflag, Radius:3}, Enablemousetracking:true, Turbothreshold:0}}, Legend: {enabled:true}, Credits: {enabled:false}, Exporting: {buttons: {contextbutton: { MenuItems: [{text:' Export picture ', onclick:function () {                                 This. Exportchart (); }}]},}, FileName:' Rongcheng air quality and meteorological correlation analysis ',//the exported file nameType: ' Image/png ',//exported file Typessourcewidth:chartwidth, Sourceheight:chartheight, scale:1}, Series: [{name:labelstr1, data:dataarray1, C Olor:itemcolor1, YAxis:0}, {name:labelstr2, data:dataarray2, Color:itemcolor2, YAxis:1            }]        }); varChartobj = $ (' # ' +container). Highcharts (); }

Highchart Application Example 1--2 2 y-axes of different types of variables