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

    }