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

    }