highchart应用示例2-上：圆角柱状图，下：多指标曲线图
Posted tiandi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-上：圆角柱状图，下：多指标曲线图的主要内容，如果未能解决你的问题，请参考以下文章