Hightcharts动态创建series

第一种方法：

　　申明options时动态设置series，然后再创建chart对象

代码如下：
<html>  
  <head>  
    <title>Highcharts Example</title>  
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>  
    <script language="javascript" type="text/javascript" src="js/highcharts.js"></script>  
    <script language="javascript" type="text/javascript" src="js/exporting.js"></script>  
    <script type="text/javascript">  
      var chart;
      $(document).ready(function() {
        var options = {
          chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
          },
          title: {
            text: '每天的分布情况',
            x: -20 //center
          },
          xAxis: {
            categories: ['0', '1', '2', '3','4','5','6','7','8','9']
          },
          yAxis: {
            title: {
              text: 'Y轴'
            },
            plotLines: [{
              value: 0,
               1,
              color: '#808080'
            }]
          },
          tooltip: {
            formatter: function() {
              return '<b>'+ this.series.name +'</b><br/>' + this.x +': '+ this.y ;
            }
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
          },
          series: []
        }
        options.series = new Array();
        var i;
        for(i=0;i<10;i++)
        {
           options.series[i] = new Object();
           options.series[i].name = 'Sample'+i;
           options.series[i].data = new Array(0+i, 1+i, 2+i, 3+i,4+i,5+i,6+i,7+i,8+i,9+i);
         }
       chart = new Highcharts.Chart(options);
     });
  </script>
  </head>  
 <body>  
   <div id="container" style=" 800px;height: 400px"></div>  
 </body>  
</html>

第二种方法：

　　采用chart.addSeries方法进行动态创建series，这种方法适用更广，可用于Ajax数据动态绘制图形

　　根据API对该方法的说明，可以看到该方法可以在调用时传入一个 plotOptions.series 对象。

addSeries (Object options, [Boolean redraw], [Mixed animation])
Add a series to the chart after render time. Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initiated, add the series as a configuration option instead.

参数列表：

options: Object
The series options, as documented under plotOptions.series and under the plotOptions for each series type.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the series is added. See the redraw() method below.
animation: Mixed
Defaults to true. When true, the series' updating will be animated with default animation options. The animation can also be a configuration object with properties duration and easing.
返回值

Series

具体代码：

var serieOptions = {
    spline: {
    marker: {
        radius: 4,
        lineColor: '#000000',
        lineWidth: 1
    }
    },
    series: {
    lineWidth:1
    }
};
var series = chart.addSeries(serieOptions, false);
series.setData([1,2,3,4,5],false);
chart.redraw();

注：对series操作的一些小说明

（1）首先、无论是highcharts还是highstock,chart.options.series表示的是图形的主要显示部分，个数是多少就有几条线，(饼图除外，跟这个不一样)，所以如果要对series进行操作的话，可以通过chart.options.series的操作来完成。

（2）另外对series的操作也可以通过chart.series来完成。如果是highcharts的话操作跟上面一样，如果是highstock的话，需要注意，chart.series可能会包含图形下面navigator的图形，也就是chart.series的个数比chart.options.series的个数多1，这时对chart.series操作需要把navigator考虑进去，以免发生错误。

如果highstock画柱形图的话，跟（1）一样操作就可以，如果是line或者其他图形的时候，chart.series个数比chart.options.series多1

例如：chart.series[i].name = chart.opions.series[i].name//如果后面这个设置name属性

chart.series[i].data = chart.options.series[i].data

如果是饼图的话：使用chart.options.series[0].data来获取饼图各部分的信息，或者chart.series[0].points来获取饼图各部分的信息