手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> highcharts 高级应用—动态曲线的实现

highcharts 高级应用—动态曲线的实现

31620 JS | 2015-4-10

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

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

  主要特性如下:

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

  对个人用户完全免费;

  纯JS,无BS;

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

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

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

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

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

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

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

 

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

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

 

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

效果如下:

3a55aae5-4aa7-393f-9b3f-39b125f4de01.jpg

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
 <head>
  <title>Highcharts Example</title>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="highcharts.js"></script>
  <script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 Highcharts.setOptions({
  global: {
   useUTC: false
  }
 });
 var chart;
 chart = new Highcharts.Chart({
  chart: {
   renderTo: 'container',
   type: 'spline',
   marginRight: 10,
   events: {
    load: function() {
     // set up the updating of the chart each second
     var series = this.series[0];
     setInterval(function() {
      var x = (new Date()).getTime(), // current time
       y = Math.random();
      series.addPoint([x, y], true, true);
     }, 1000);
    }
   }
  },
  title: {
   text: '<b>Java小强制作</b>'
  },
  xAxis: {
   type: 'datetime',
   tickPixelInterval: 150
  },
  yAxis: {
   title: {
    text: '单位:M'
   },
   plotLines: [{
    value: 0,
    width: 1,
    color: '#808080'
   }]
  },
  tooltip: {
   formatter: function() {
     return '<b>'+ this.series.name +'</b><br/>'+
     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
     Highcharts.numberFormat(this.y, 2);
   }
  },
  legend: {
   enabled: false
  },
  exporting: {
   enabled: false
  },
  series: [{
   name: 'Random data',
   data: (function() {
    // generate an array of random data
    var data = [],
     time = (new Date()).getTime(),
     i;
    for (i = -19; i <= 0; i++) {
     data.push({
      x: time + i * 1000,
      y: Math.random()
     });
    }
    return data;
   })()
  }]
 });
});
</script>
 </head>
 <body>
 <div id="container" style="width: 800px;height: 400px"></div>
 </body>
</html>

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

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

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

推荐您阅读更多有关于“ js 绘图 highcharts 报表 ”的文章

上一篇:JS绘图Flot应用-关于图形绘制中的两个异常 下一篇:highcharts 高级应用—动态饼图的实现

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 更多»

最新文章
热门文章
随机文章