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,
              width: 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="width: 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來獲取餅圖各部分的信息


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM