highchart应用示例1--2个不同类型变量2个y轴
Posted tiandi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了highchart应用示例1--2个不同类型变量2个y轴相关的知识，希望对你有一定的参考价值。
1、ajax调用接口和处理数据
function getCityData() { var date1 = $(‘#datetimepicker1‘).val(); var date2 = $(‘#datetimepicker2‘).val(); var params = { ‘date1‘: date1, ‘date2‘: date2, ‘city‘: ‘荣成‘}; $.getJSON(‘http://127.0.0.1:8081/rcforeInterface/rest/services/getGuanSplineData‘, 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); 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、根据选择，加载不同的变量
function showChartByItems() { var dataArray1, 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浓度"; break; case "PM10": dataArray1 = dataPM10; unit1 = "ug/m<sup>3<sup/>"; labelStr1 = "PM10浓度"; break; case "SO2": dataArray1 = dataSO2; unit1 = "ug/m<sup>3<sup/>"; labelStr1 = "SO2浓度"; break; case "NO2": dataArray1 = dataNO2; unit1 = "ug/m<sup>3<sup/>"; labelStr1 = "NO2浓度"; break; case "CO": dataArray1 = dataCO; unit1 = "mg/m<sup>3<sup/>"; labelStr1 = "CO浓度"; break; case "O3": dataArray1 = dataO3; unit1 = "ug/m<sup>3<sup/>"; labelStr1 = "O3浓度"; break; } switch (ITEM2) { case "TMP": dataArray2 = dataTMP; unit2 = "℃"; labelStr2 = "温度"; break; case "HUM": dataArray2 = dataHUM; unit2 = "%"; labelStr2 = "湿度"; break; case "WIND": dataArray2 = dataWIND; unit2 = "m/s"; labelStr2 = "风速"; break; case "PCPN": dataArray2 = dataPCPN; unit2 = "mm"; labelStr2 = "降水"; break; } showLineChartWith2(‘chart‘, dataArray1, unit1,labelStr1, dataArray2, unit2,labelStr2, "HOUR"); }
3、调用chart组件，进行展示
function showLineChartWith2(container, dataArray1, unit1, labelStr1, dataArray2, unit2, labelStr2, type, avg) { 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: 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 () { 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>" + unit2 + "</td></tr>"; if (this.points[1].point.winddirection != null) { tip = tip + "<tr><td style=‘color:#000000‘>风向: </td><td align=‘right‘><b>" + this.points[1].point.winddirection + "</b>" + "</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: labelStr1, data: dataArray1, color: itemcolor1, yAxis: 0 }, { name: labelStr2, data: dataArray2, color: itemcolor2, yAxis: 1 }] }); var chartObj = $(‘#‘ + container).highcharts(); }
以上是关于highchart应用示例1--2个不同类型变量2个y轴的主要内容，如果未能解决你的问题，请参考以下文章
highchart应用示例2-上：圆角柱状图，下：多指标曲线图
尝试使用 highcharts 将数据点注入 iOS webView