java小强--highcharts 高级应用—动态曲线的实现

第一次写那就来电简介吧,虽然都是废话:

      Highcharts是一个制作图表的纯Javascript类库, 

  主要特性如下:

  兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;

  对个人用户完全免费;

  纯JS,无BS;

  支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;

  跨语言:不管是PHP、.net还是Java都可以使用,它只需要三个文件:一个是

  Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;

  提示功能:鼠标移动到图表的某一点上有提示信息;

  放大功能:选中图表部分放大,近距离观察图表;

  易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;

  时间轴:可以精确到毫秒;

 

其官网网站为:http://www.highcharts.com/ !

里面有他们的例子和参考代码,可以参考着实现自己的应用,如果你做的是静态的图形展示,那么使用是非常简单的!

 

参照官网的一个例子,我来实现一个动态曲线的应用:

效果如下:

java小强--highcharts 高级应用—动态曲线的实现_第1张图片

 

这个曲线是动态的,他的官网效果地址:http://www.highcharts.com/demo/dynamic-update !

我把他应用到JSP中,代码如下:

Java代码   收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <html>  
  3.     <head>  
  4.         <title>Highcharts Example</title>  
  5.         <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  6.         <script language="javascript" type="text/javascript" src="highcharts.js"></script>  
  7.         <script language="javascript" type="text/javascript" src="exporting.js"></script>  
  8. <script type="text/javascript">  
  9. $(document).ready(function() {  
  10.     Highcharts.setOptions({  
  11.         global: {  
  12.             useUTC: false  
  13.         }  
  14.     });  
  15.     var chart;  
  16.     chart = new Highcharts.Chart({  
  17.         chart: {  
  18.             renderTo: 'container',  
  19.             type: 'spline',  
  20.             marginRight: 10,  
  21.             events: {  
  22.                 load: function() {  
  23.                     // set up the updating of the chart each second  
  24.                     var series = this.series[0];  
  25.                     setInterval(function() {  
  26.                         var x = (new Date()).getTime(), // current time  
  27.                             y = Math.random();  
  28.                         series.addPoint([x, y], truetrue);  
  29.                     }, 1000);  
  30.                 }  
  31.             }  
  32.         },  
  33.         title: {  
  34.             text: '<b>Java小强制作</b>'  
  35.         },  
  36.         xAxis: {  
  37.             type: 'datetime',  
  38.             tickPixelInterval: 150  
  39.         },  
  40.         yAxis: {  
  41.             title: {  
  42.                 text: '单位:M'  
  43.             },  
  44.             plotLines: [{  
  45.                 value: 0,  
  46.                 width: 1,  
  47.                 color: '#808080'  
  48.             }]  
  49.         },  
  50.         tooltip: {  
  51.             formatter: function() {  
  52.                     return '<b>'this.series.name +'</b><br/>'+  
  53.                     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S'this.x) +'<br/>'+  
  54.                     Highcharts.numberFormat(this.y, 2);  
  55.             }  
  56.         },  
  57.         legend: {  
  58.             enabled: false  
  59.         },  
  60.         exporting: {  
  61.             enabled: false  
  62.         },  
  63.         series: [{  
  64.             name: 'Random data',  
  65.             data: (function() {  
  66.                 // generate an array of random data  
  67.                 var data = [],  
  68.                     time = (new Date()).getTime(),  
  69.                     i;  
  70.   
  71.                 for (i = -19; i <= 0; i++) {  
  72.                     data.push({  
  73.                         x: time + i * 1000,  
  74.                         y: Math.random()  
  75.                     });  
  76.                 }  
  77.                 return data;  
  78.             })()  
  79.         }]  
  80.     });  
  81. });  
  82. </script>  
  83.     </head>  
  84.     <body>  
  85.     <div id="container" style="width: 800px;height: 400px"></div>  
  86.     </body>  
  87. </html>  

 

DIV的样式可以自己调节,需要关注的是两个点:

他需要的数据格式是双维数组

数据的更新是因为 chart 对象里面有一个 events 属性,里面定义方法使用 addPoint 实现数据点的增加和刷新!

 

 

由于近期大量小网站在未经同意情况下使用文章,现将我的博客地址公布如下,请您到ITEYE网站看原创,谢谢!

http://cuisuqiang.iteye.com/ !

你可能感兴趣的:(Highcharts)