zoukankan      html  css  js  c++  java
  • 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来获取饼图各部分的信息
  • 相关阅读:
    软件测试七年之痒,依然热爱!我还是从前那个少年!
    我想从功能测试转向自动化测试,怎么办?
    python中的一些内置函数
    python中eval()
    集合
    列表的切片:取出来还是一个列表,可用在复制列表元素的操作
    字符串常用的方法
    dict字典,以及字典的一些基本应用
    list列表(也叫数组),以及常用的一些方法
    jsonpath的用法
  • 原文地址:https://www.cnblogs.com/coolsundy/p/4226997.html
Copyright © 2011-2022 走看看