`
shiguili505116
  • 浏览: 64928 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类

java实现的highcharts与ajax结合动态实时获取数据更新图表

阅读更多

<!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>


没有iteye帐号的朋友想要压缩实例的致邮给我

我的邮箱:qmys116505@qq.com

 

 

  • A.rar (12.6 KB)
  • 描述: 无密码
  • 下载次数: 455
分享到:
评论

相关推荐

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    这个例子展示了如何在Java后端与Highcharts前端之间建立有效的通信,通过AJAX和JSON实现动态数据更新。这种架构在实时监控、数据分析、仪表盘等场景下非常常见,因为它可以实现实时刷新的图表,用户无需手动刷新页面...

    Java和Highcharts实现折线图

    这段代码首先通过Ajax请求获取Java后端返回的JSON数据,然后解析这些数据,设置Highcharts的配置项,最后创建图表。 在实际应用中,你可能需要对数据进行一些预处理,比如日期的格式化,或者根据业务需求调整图表的...

    highcharts异步ajax可直接运行实例(java版)

    通过这个实例,开发者可以学习到如何在实际项目中结合Highcharts和Java实现数据可视化,以及如何利用AJAX进行前后端通信。这对于想要提升Web应用交互性和用户体验的开发者来说,是一个很好的学习资源。同时,它也...

    highcharts实现从mysql数据库获取数据生成折线图

    5. 在客户端使用Ajax请求获取数据,动态更新Highcharts图表。 这个过程涉及前端和后端的技能,包括JavaScript、Highcharts API、Java、JDBC以及Web通信。理解并掌握这些知识点,你就能创建出具有实时数据展示功能的...

    Java 与 Highcharts开发

    总结来说,Java与Highcharts的结合为Web应用提供了强大的数据可视化能力。通过Java后端处理和传输数据,配合Highcharts在前端进行展示,可以构建出用户友好的数据分析界面。了解这两个技术的结合,对于提升Web开发...

    Java HighCharts实例demo

    Java HighCharts是一个用于在Java应用程序中展示图表的库,它允许开发者通过Java代码创建各种动态、交互式的图表。HighCharts本身是一个JavaScript库,但通过Java封装,使得开发者可以在后端处理数据并生成图表,...

    Java Web动态图表编程

    三、Java Web与动态图表的结合 1. Servlet与JSP:在Java Web中,Servlet处理后台逻辑,JSP用于生成动态HTML。Servlet可以计算数据并传递给JSP,JSP通过内置的JSTL标签库或EL表达式来显示图表。 2. AJAX:通过AJAX...

    EasyUI图表插件Highcharts源码Demo(Java)

    接着,你需要创建一个可以与Java后端交互的JavaScript函数,用于动态加载数据并初始化Highcharts图表。Highcharts的配置对象允许你定制图表的各种属性,如标题、轴标题、数据系列等。例如,你可以创建一个如下的配置...

    Java编写的HighCharts服务端图表下载程序

    对于想要学习服务端处理和下载HighCharts图表的Java开发者来说,这个程序是一个很好的起点,可以帮助他们理解如何结合前端和后端技术来实现特定的功能。同时,这也是一种提高用户体验的方式,让用户能够方便地保存和...

    Highcharts json demo

    本篇文章将深入探讨如何利用Highcharts结合JSON数据进行异步请求,以实现动态、实时的数据展示。 首先,我们要明白Highcharts的基本概念。Highcharts是一个基于HTML5 Canvas技术的图表库,它提供了丰富的图表类型,...

    highcharts加载数据库数据(java版)

    在IT行业中,Highcharts是一个广泛使用的JavaScript库,...前端JavaScript通过Ajax请求获取JSON数据,使用Highcharts绘制图表。这个过程要求开发者具备Java后端开发、数据库操作以及前端JavaScript和JSON处理的知识。

    Echarts和Highcharts制作图表

    将Echarts与Spring结合,可以轻松地在后端处理数据,然后通过模板引擎或Ajax请求将数据传递到前端,生成图表。 在实际应用中,从后台获取数据并展示在图表上通常涉及以下步骤: 1. **数据处理**:在Spring后端,...

    highcharts加载多条曲线数据

    5. **动态加载数据**:如果数据是从服务器获取的,可以通过AJAX请求`emp2.jsp`这样的后端接口来获取数据,然后动态更新配置对象并重新渲染图表。 在`emp2.jsp`这个文件中,可能是用于处理请求并返回JSON格式的数据...

    采用Ajax技术以动态图的方式实现数据实时刷新

    ### 使用Ajax技术以动态图的方式实现数据实时刷新 #### 技术背景与概念解析 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量...

    Highcharts图表使用说明

    通过与 jQuery、MooTools 或 Prototype 等前端框架结合使用,可以实现从服务器获取实时数据并动态更新图表,为用户提供更加丰富的交互体验。 ##### 2.8 多个轴 Highcharts 支持在同一图表中显示多个 Y 轴或 X 轴,...

    jsp中ajax请求生成highcharts 的案例

    在JSP中结合Ajax(Asynchronous JavaScript and XML)技术,可以实现页面的局部刷新,提高用户体验。本案例主要讨论如何在JSP中利用Ajax请求数据,并用Highcharts展示这些数据。 首先,我们需要在JSP页面上设置一个...

    精通Java Web动态图表编程 配套源代码

    4. **AJAX与JSON**:为了实现图表的动态更新,开发者常常会使用AJAX(异步JavaScript和XML)技术,通过发送异步请求获取新数据,然后使用JSON格式传递到前端。JSON因其轻量级和易读性,常被选作数据交换格式。 5. *...

Global site tag (gtag.js) - Google Analytics