highcharts 圆柱图实时刷新Y轴

lingbing777

浏览: 11448 次
性别:
来自: 深圳

最近访客更多访客>>

qq453655422

jiangyefan888

qq2278232038

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

圆柱图刷新

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://static.hcharts.cn/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/exporting.js"></script>

<script type="text/javascript">
   $(function () {
    Highcharts.setOptions({
             global: {
                 useUTC: false
             }
          });
       var chart;
       $(document).ready(function() {
           var options = {
                chart: {
                   renderTo: 'container',
                   type: 'column',
                },
                title: {
                   text: '10000号实时监控系统'
                },
                subtitle: {
                   text: '话务预测分析'
                },
                xAxis: {
                   categories: [
                       'Jan',
                       'Feb',
                       'Mar',
                       'Apr',
                       'May',
                       'Jun',
                       'Jul',
                       'Aug',
                       'Sep',
                       'Oct',
                       'Nov',
                       'Dec'
                   ]
               },
               yAxis: {
                   min: 0,
                   title: {
                       text: '数值'
                   }
               },
               legend: {
                   layout: 'vertical',
                   backgroundColor: '#FFFFFF',
                   align: 'left',
                   verticalAlign: 'top',
                   x: 50,
                   y: 20,
                   floating: true,
                   shadow: true
               },
               tooltip: {
                   formatter: function() {
                       return '技能组:'+
                           this.x +'</br>值：'+ this.y +' 个';
                   }
               },
               credits: {
                      enabled: false
               },
               plotOptions: {
                  column: {
                       pointPadding: 0.2,
                       borderWidth: 0
                  }
               },
                series: [{
                   name: '排班量'
               }, {
                   name: '话务量'
               }, {
                    name: '接通量'
               }]
           };
       /*
      var url = "www.baidu.com";
       $.ajax({
            url: url,
            type: "post",
            cache: false,
            dataType: "json",
            data: {},
            ifModified: false,
            success: function(result){
                   var paiBan = [];
                   var huaWu = [];
                   var jieTong = [];
                      jQuery.each(result, function(m, obj) {

                        paiBan.push(
                              parseInt(obj.value0)
                          );
                          huaWu.push(
                              parseInt(obj.value1)
                          );
                          jieTong.push(
                              parseInt(obj.value2)
                          );
                   });
var y = Math.random();
                options.series[0].data = y;
                options.series[1].data = y;
                options.series[2].data = y;
                chart = new Highcharts.Chart(options);
           }
        });*/
    setInterval(function(){
var arrays=[];
for( var i=0;i<10;i++)
{
   var y = Math.random();
   arrays.push(y);
}

        options.series[0].data = arrays;
                options.series[1].data = arrays;
                options.series[2].data = arrays;
if(chart)
{
chart.series[0].setData(arrays);
chart.series[1].setData(arrays);
chart.series[2].setData(arrays);

}else
{
   chart = new Highcharts.Chart(options);
}

},1000);
       });

   });
   window.returnValue='true';
</script>
</head>
<body>

<div id="container"
   style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

分享到：

php发送邮件 | 遮罩层

2015-08-12 11:20
浏览 1378
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论