Highcharts动态赋值学习

最近老大让做项目中的统计图表功能，需要使用highcharts这个插件，弄出来了两种类型的图表动态赋值的实现，首先贴上中文网的官网和api地址，使用这个英语不好的同学肯定会用到的：

中文网官网：http://www.hcharts.cn/

中文网API：http://www.hcharts.cn/api/index.php#Series

我后台用的是java，主要是后台封装数据后放到json里面，然后在前台获取后进行调用。

到现在，总共弄出来了折线图和饼图的动态赋值的功能：

这个是折线图的前台数据：没有使用api来进行赋值，而是直接处理成需要的data和name然后直接写到name和data后面去的，不够灵活
关于下面代码中的ajax里面的js数据看不懂的请请教专业js同学，我的也是别人帮忙写的
  1 $.ajax({
                     type : 'POST',
                     dataType : 'JSON',
                     url: 'admin/showtable/data',
                     success:function(result){
                         /* line---data */
                         var lineresult = result.worklog;
                         console.log(lineresult);
                         var xdata = [];
                         var series = [];
                         var temp = {};
                         for (var i in lineresult) {
                             xdata.push(lineresult[i]["worklogdate"]);
                             if (!temp[lineresult[i].worktype]) {
                                 temp[lineresult[i].worktype] = [lineresult[i]["SUM(worktime)"]];
                             } else {
                                 temp[lineresult[i].worktype].push(lineresult[i]["SUM(worktime)"]);
                             }
                         }
                         for (var i in temp) {
                             series.push({"name":i,"data":temp[i]});
                         }
                         console.log(series);     //获取series里面的name和data
                         console.log(xdata);      //获取x轴的日期
                         console.log(temp);

                         /*设置饼图数据*/
                         var pieresult = result.dataforworktype;
                         console.log(pieresult);
                         var chart = $('#pie').highcharts();
                         chart.series[0].setData(pieresult);

                     //折线图
                     $('#line').highcharts({

                     credits: {
                         enabled: false,                        //去掉版权信息，就是右下角显示的highchars的网站链接 也可以显示成自己的链接，具体请搜索api
                     },
                     chart: {
                         renderTo:'line',　　　　　　　　　　　　　
                         type: 'line'                        //指定图表的类型，默认是折线图（line）
                     },
                     title: {
                        // text: '工时统计',                   //指定图表标题
                         text: '<span style="font-size:24px;font-weight:bolder;color:Black;">工时统计</span>',   //图表标题可以设置为html标签 方便设置样式
                         x: -50
                     },

                      xAxis: {                            //指定x轴分组
                          type: 'date',
                          showEmpty: false,
                          startOnTick: false,
                          categories: xdata,
                          labels: {
                                   rotation: -90,   //竖直放
                                   rotation: -45   //45度倾斜
                                 },
                         dateTimeLabelFormats:{
                            year: '%Y',
                            month: '%b \ %y',
                            day: '%e. %b'
                         },

                     },
                     yAxis: {
                         title: {
                             text: 'XXXX'                    //指定y轴的标题（显示工时的数量每1个小时为一格，依次递增）
                         },
                         categories:
                                ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
                         min:'0',
                         plotLines: [{                        //Y轴的数目对应的横线的样式  标线属性
                             value: 0,                        //Y轴显示的数字
                             width: 1,                        //Y轴上数字对应水平线的宽度
                             color: '#808080'                //水平线的颜色
                         }]
                     },
                     tooltip: {                                //数据点的提示框
                         valueSuffix: 'h'                    //后缀
                     },
                     legend: {                                //图例
                         layout: 'horizontal',                //水平
                         itemDistance: 50,                    //图例水平间距
                         align: 'center',                    //样式居中
                         verticalAlign: 'bottom',            //垂直对齐 top顶部对齐，middle中间对齐，bottom底部对齐
                         borderWidth: 0
                     },
                      series: series
                 });
             }
              });        

这里是折线图需要的series封装的数据类型，直接放到插件中series后面可以使用，在图表中name显示的折线的种类，data显示为折线中的节点

/******************************  以下为饼图的数据   ******************************/

 //饼图
             $('#pie').highcharts({
                 credits: {
                     enabled: false,                    //去掉版权信息
                 },
                 chart: {
                     plotBackgroundColor: null,        //绘制图形区域的背景颜色
                     plotBorderWidth: null,            //边框宽度
                     plotShadow: false,                //绘制区投影
                     type: 'pie'
                 },
                 title: {
                     text: 'xxxx'
                 },
                 tooltip: {
                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'   //鼠标放到图形上面后显示框中的提示数据
                 },
                 plotOptions: {
                     pie: {
                         allowPointSelect: true,     //选中某块区域是否允许分离
                         cursor: 'pointer',            //更换鼠标指针样式
                         dataLabels: {
                             enabled: true,            //是否直接呈现数据 也就是外围显示数据与否
                             //format: '<b>{point.name}</b>: {series.percentage:.1f} ',  //这里的意思是饼图周围显示的数据类型格式，默认的demo里面显示的是百分比，我下面使用的formatter配置，是使用了一个函数来进行格式化，基本通用的
                             formatter:function(index){
                                 return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1, '.')+'h';
                             },
                             style: {
                                 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'      //设置饼图周边显示的数据的样式
                             }
                         },
                         showInLegend: true   //显示图例
                     }
                 },
                 series:
                       [{
                       name: '时间',                    //鼠标放到图标上显示框中的单位提示字符
                       data: []　　　　　　　　　　　　　　//数据设置为空，可以使用api赋值，饼图的数据设置请看上图：折线图配置部分的ajax中的特殊颜色标记部分
                 }]
             });

下面是饼图需要封装的数据格式：name和y 这里是我在后台获取数据的时候讲select后面的数据设置的别名，设置为这样的话更方便highchars来进行读取

最后附上一张效果图：

折线图：

　　

饼图：

欢迎高手指教和新手交流，有事情留言