highchart应用示例2-上：圆角柱状图，下：多指标曲线图

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

    }

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

    }

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

    }