ajax定时刷新Highcharts

转载 2015年07月08日 13:38:02

<!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://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
  //x轴值
  var categories=<%=categories%>;

  //y轴值
  var data=<%=data%>;
    
  //创建图表
  var chart;
  $(document).ready(function() {
   chart = new Highcharts.Chart( {
    chart : {
     renderTo : 'container',
     type : 'bar',
     events : {
      load : st// 定时器
     }
    },
    title : {
     text : '动物数量统计'
    },
    xAxis : { 
     categories : categories,
     title : {
      text : 'name'
     }
     
    },
    yAxis : {
     min : 0,
     title : {
      text : 'number'
     }
    },
          legend: {
              enabled: false
          },
    tooltip : {
     formatter : function() {
      return '' + this.series.name + ': ' + this.y + '';
     }
    },
          credits : {
              enabled: false
          },
    plotOptions : {
     series : {
      stacking : 'normal'
     }
    }, 
    series : [ {
     name : '个',
     data : data
    } ]
   });
   
   
  });


  //10秒钟刷新一次数据
  function st() {
   setInterval("getData()", 10000);
  }

  //动态更新图表数据
  function getData() {
   
   var categories = [];
   $.ajax({
      type: "post",
      url: "${pageContext.request.contextPath}/demo/chart_demo.action",    
      dataType: "json",
      success : function(data){
     var d = [];
       $(data).each(function(n,item){
        d.push(item.data);
        categories.push(item.categories);
       })
      chart.series[0].setData(d);
      chart.xAxis[0].setCategories(categories);
      }
    });
  }

  </script>
 </head>
 <body>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"></script>

<div id="container" ></div>
 </body>
</html>

相关文章推荐

Ajax请求服务器数据动态刷新HighCharts表格

$(function() { var realtime = new Array(10); var realvalue = new Array(10); $(document).ready(...

HighCharts定时刷新图表

创建HighCharts的动态刷新图表,并能实现曲线、趋势线从右向左的推进效果
  • yiifaa
  • yiifaa
  • 2016-07-15 15:00
  • 2156

ajax+jquery+highcharts+json

  • 2017-01-19 12:28
  • 1.24MB
  • 下载

Highcharts、Ajax、PHP交互

1、首先将Highcharts插件所需的js跟css样式文件引入项目中; <script src="http://cdn.hcharts.cn/highcharts/modules/e

图表highcharts联合jquery ajax 后端取数据前端图表渲染

给自己和志同道合的童鞋们留存了   Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐...

关于Highcharts饼状(pie)图AJAX动态赋值的问题

关于Highcharts的饼状图(pie)实现起来就比柱状图(column)实现起来方便可理解的多。 我先贴出最后效果图,然后来说说我对饼图的理解。 官方demo里面写的很清楚,series里面是...

highCharts+ajax+json+ashx混合图形动态生成

1.第一种:后台绑定 前台 var options = new Highcharts.Chart({ chart: { ...

AJAX与highcharts的调用

本项目以SSH为基本框架,要根据数据库的数据动态生成图表,需要ajax的运用。首先需要掌握的是在SSH框架中的ajax的运用。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)