HCharts 柱状图和饼图

几个月前用HCharts写了这个柱状图和饼图，现在记录一下，方便以后再次使用。
效果图：

如何生成柱状图？
首先引入hcharts的js文件和css文件。

  <script src="../../../js/Highcharts-4.0.3/js/highcharts.js"></script>
  <script src="../../../js/Highcharts-4.0.3/js/modules/exporting.js"></script>

方法：

        //创建饼图
        function CreatePie(itemdata) {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '<span style="color:tomato;font-weight:600">' + jgname + '</span>的人员统计分析'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '人员统计分析',
                    data: itemdata
                }]
            });
        }

        //创建柱状图
        function CreateZhu(category, numFemale, numMale) {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '<span style="color:tomato;font-weight:600">' + jgname + '</span>的人员统计分析'
                },
                xAxis: {
                    categories: category
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量 (人)'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -70,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                    borderColor: '#ccc',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + ' 人<br/>' +
                            '总人数: ' + this.point.stackTotal + ' 人';
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            size: 30
                        }
                    }
                },
                series: [{
                    name: '女',
                    color: Highcharts.getOptions().colors[5],
                    data: numFemale,
                }, {
                    name: '男',
                    color: '#007EAE',
                    data: numMale
                }]
            }, function (chart) {

            });
        }

但是：html咋显示阿？

            <div data-options="region:'center',iconCls:'icon-ok'" id="img" style="overflow: auto;">
            <div id="container" style="width: 100%; height: 500px; margin: 0 auto"></div>
        </div>

看那么多代码，具体传入的数据格式是个啥？

 //统计图类型选择
        function select1(o, f) {//o 1为按单位 2为按年龄段；f 1为按柱状图，2为按饼图
            var url = "";
            //参数值选择
            url += '&o=' + o;
            url += '&f=' + type;
            url += '&j=' + $("#JGID").val();
            if (o == 1) {
                var unit = $("#JGNAME1").val();
                url += '&unit=' + unit;
            }
            else {
                var unit = $("#JGNAME2").val();
                url += '&unit=' + unit;
            }
            var itemdata = [];
            var numFemale = new Array();
            var numMale = new Array();
            if (o == 1) {
                flag = 1;
                if (type == 1) {//柱状图
                    $.get("ashx/count.ashx?r=" + Math.random() + url,
                                 function (data) {
                                     var d = eval(data);
                                     for (var i = 0; i < d.length; i++) {
                                         var n = d[i].name;
                                         var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数
                                         var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数
                                         itemdata.push(n);

                                         numFemale.push(femaleCount);
                                         numMale.push(maleCount);
                                     }
                                     CreateZhu(itemdata, numFemale, numMale);
                                 });
                }
                else {
                    $.get("ashx/count.ashx?r=" + Math.random() + url,
                       function (data) {
                           var d = eval(data);
                           for (var i = 0; i < d.length; i++) {
                               var n = d[i].name;
                               var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数
                               var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数
                               var c = femaleCount + maleCount;
                               itemdata.push([n, c]);
                           }
                           CreatePie(itemdata);
                       });
                }
            }
            else if (o == 2) {//按年龄段
                flag = 2;
                if (type == 1) {//柱状图
                    $.get("ashx/count.ashx?r=" + Math.random() + url,
                              function (data) {
                                  var d = eval(data);
                                  for (var i = 0; i < d.length; i++) {
                                      var n = d[i].name;
                                      var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数
                                      var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数
                                      itemdata.push(n);

                                      numFemale.push(femaleCount);
                                      numMale.push(maleCount);
                                  }
                                  CreateZhu(itemdata, numFemale, numMale);
                              });
                }
                else {
                    $.get("ashx/count.ashx?r=" + Math.random() + url,
                        function (data) {
                            var d = eval(data);
                            var num = [];
                            for (var i = 0; i < d.length; i++) {
                                var n = d[i].name;
                                var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数
                                var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数
                                var c = femaleCount + maleCount;
                                itemdata.push([n, c]);
                            }
                            CreatePie(itemdata);
                        });
                }
            }
        }

原谅我没有剖析太细，传入的格式就是数组。