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(一) 双饼图 ajax动态刷新

一. 背景统计不同项目类型资金所占比例,又要知道资金使用情况。就是展示大分类占比下小分类占比二. 准备Highcharts文件 jquery文件(jquery.min.js) 三. 内容 html...

Highcharts(二) 基础柱状图 ajax动态刷新

一、背景显示不同区域的不同项目类型的完成数量二、项目结构及引用Highcharts文件 jquery文件(jquery.min.js) 三、内容 html ...

HighCharts定时刷新图表

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

ajax+jquery+highcharts+json

  • 2017年01月19日 12:28
  • 1.24MB
  • 下载

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

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

HighCharts与使用Ajax交互

  • 2017年10月11日 15:05
  • 3KB
  • 下载

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

给自己和志同道合的童鞋们留存了   Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax定时刷新Highcharts
举报原因:
原因补充:

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