HighCharts 随机数动态曲线展示（动态数据实时展示）

来源：互联网发布：12306 手机网络有问题编辑：程序博客网时间：2024/05/29 19:53
Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,本文主要研究在随机数展示上的应用。
具体代码如下：
<html><head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>   <script>$(function () {                                                                         $(document).ready(function() {                                                          Highcharts.setOptions({                                                                 global: {                                                                               useUTC: false                                                                   }                                                                               });                                                                                                                                                                     var chart;                                                                          $('#container').highcharts({                                                            chart: {                                                                                type: 'spline',                                                                     animation: Highcharts.svg, // don't animate in old IE                               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: '实时随机数展示'   //主标题                                                     },                                                                                  xAxis: {                     //X轴                                                           type: 'datetime',                                                                   tickPixelInterval: 150                                                          },                                                                                  yAxis: {                     //Y轴                                                           title: {                                                                                text: '数据'                                                                   },                                                                                  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: '随机数',                                                                data: (function() {                                                                     // 产生随机数                                                 var data = [],                                                                          time = (new Date()).getTime(),                                                      i;                                                                                                                                                                  for (i = -24; i <= 0; i++) {  //显示范围为25个数据 ，可修改                                                      data.push({                                                                             x: time + i * 1000,    //1000毫秒产生一个数据                                                          y: Math.random()      //随机数产生函数                                                      });                                                                             }                                                                                   return data;                                                                    })()                                                                            }]                                                                              });                                                                             });                                                                                                                                                                 });    </script></head><body>   <div id="container" style="min-width:400px;height:400px;"></div></body></html>
0 0