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来获取饼图各部分的信息
  • 相关阅读:
    Codeforces Round #562 (Div. 2) B. Pairs
    Codeforces Round #562 (Div. 2) A.Circle Metro
    K.河北美食
    H.天神的密码
    国标GB28181协议智能分析告警平台EasyGBS及EasyCVR监控系统内iframe的常见问题说明
    【解决方案】国标GB28181平台EasyGBS级联EasyCVR视频智能分析搭建“蓝天卫士”网络视频监控系统技术方案
    【解决方案】基于国标GB28181协议/HIKSDK/Ehome协议EasyCVR智能融合分析平台在智慧校园人脸识别中的应用
    TSINGSEE青犀视频基于开源Webrtc服务器编译mediasoupClient运行报”SignalEncoderTimeOut, Encoder timed out”
    TSINGSEE青犀视频云边端H265播放器EasyPlayer-RTSP在C#版本增加OSD功能说明
    TSINGSEE青犀视频自主研发的H265播放器被集成后无法播放视频是什么原因?
  • 原文地址:https://www.cnblogs.com/coolsundy/p/4226997.html
Copyright © 2011-2022 走看看