使用Highcharts实现曲线图和饼型图的展示

第一步：下载Highcharts的插件(不做过多说明)
  1.1：客户端页面的js的引入
 <script type="text/javascript"  src="scripts/highcharts/js/highcharts.js"></script>
 <script type="text/javascript"  src="scripts/highcharts/js/modules/exporting.js"></script>
 <script type="text/javascript"  src="scripts/jquery/jquery-1.6.2.min.js"></script>
  1.2：用户显示图形的Div
   <div style="margin: 20 auto; height: 250px;">
    <div id="container"
        style="width: 550px; height: 250px; float: left"></div>
    <div id="container1"
        style="width: 550px; height: 250px; float: right"></div>
   </div>

第二步：查询需要显示的结果集封装成json格式的方式进行返回
   //查询结果集并json方式返回的js
   var chart;
   var chartOptions;
   $.getJSON('publicAreasStatisticsData.action',{"startDate":startData,"endDate":endData,"submittedType":dateType},function(data) {
      var organData = data.aaData;
       //声明数组
       var recodeArry = [];
     //循环取出回调函数返回数据的年份字段
     $.each(organData,function(i,item){
       
       recodeArry.push(organData[i].record_date);
      
    });
       
       //该部分是demo中的例子关键部分进行了更改
       chart = new Highcharts.Chart({
    chart: {
    //显示的div
    renderTo: 'container',
     //图形类型
    defaultSeriesType: 'scatter'
    },
    title: {
    text: '公共机构建筑面积逐年变化情况（单位：万平方米）'
    },
    tooltip:{
    formatter: function() {

    return '<b>'+this.x+'年' +'</b><br/>'+'<b>'+ '面积: '+ this.y+'万平方米'+'</b>' ;
    }

    },
     //将年的数组设置到X轴上
    xAxis: {
    categories: recodeArry
    },
    yAxis: {
    title: {
        text: '万平方米'
    }
    },

    plotOptions: {

    series: {
        lineWidth: 1,
        point: {
            events: {
                  //点击删除曲线
                'click': function() {
                    if (this.series.data.length > 1) this.remove();
                }
            }
        }
    }
    },
    series: [{
    name: '机构数量',
    data: []
    }]
    });

    });

        var arry = [];
     //循环取出回调函数返回数据的建筑面积总量字段
    $.each(organData,function(i,item){
       arry.push(organData[i].data1)
      
    });
     chart.series[0].setData(arry);
    //到此阶段曲线图构造完成
   
  1.3 接下来构建饼型图（该饼型图的显示只统计了年）

   //保留两位小数
        function changeTwoDecimal(x)
    {

    var f_x = parseFloat(x);
    if (isNaN(f_x))
    {
    alert('function:changeTwoDecimal->parameter error');
    return false;
    }
    var f_x = Math.round(x*100)/100;
    
     return f_x;
    }

  //该部分是demo中的例子关键部分进行了更改
  chartOptions  = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: to_data+'建筑面积总量分布情况'
        },
        tooltip: {
                //鼠标停留区域特殊显示效果
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                            //当数子不是整数，百分比显示位数有十多位，进行保留两位小数处理
                        return '<b>'+ this.point.name +'</b>: '+ changeTwoDecimal(this.percentage) +' %';
                    }
                }
            }
        },
        //注：该处的[]对应饼行图显示数据个数
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                [],
                [],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                [],
                [],
                [],
                [],
                []
            ]
        }]
    });
    
    
       //饼形图
       var childArry = [];
       //获取最后一条记录的所有数据
       var totalArea =  organData[organData.length-1].data1;
        
       var gjdata = organData[organData.length-1].data2;
       var jydata = organData[organData.length-1].data3;
       var kjata = organData[organData.length-1].data4;
       var whata = organData[organData.length-1].data5;
       var wsdata = organData[organData.length-1].data6;
       var tydata = organData[organData.length-1].data7;
       var qtdata = organData[organData.length-1].data8;
       var shdata = organData[organData.length-1].data9;
       
       
       
       //测试数据
      // var totalArea =  2200;
       //var gjdata = 123;
       //var jydata = 457;
       //var kjata = 389;
       //var whata = 322;
       //var wsdata = 147;
       //var tydata = 250;
       //var qtdata = 235;
       //var shdata = 277;
       
       //计算
       var totalgj = gjdata/totalArea;
       var totaljy = jydata/totalArea;
       var totalkj = kjata/totalArea;
       var totalwh = whata/totalArea;
       var totalws = wsdata/totalArea;
       var totalty = tydata/totalArea;
       var totalqt = qtdata/totalArea;
       var totalsh = shdata/totalArea;
       

       //将数据赋值childArry数组中，格式需匹配
       childArry.push(['国家机关',totalgj]);
       childArry.push(['教育类',totaljy]);
       childArry.push(['科技类',totalkj]);
       childArry.push(['文化类',totalwh]);
       childArry.push(['卫生类',totalws]);
       childArry.push(['体育类',totalty]);
       childArry.push(['其他',totalqt]);
       childArry.push(['社会团体',totalsh]);
       / /将数据添加到饼形图中
       chartOptions.series[0].setData(childArry);
            
    });
  });
 效果图






 本例到此结束