Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,本文主要研究在随机数展示上的应用。
具体代码如下:
- <html>
- <head>
- <script type="text/javascript" src1="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <script type="text/javascript" src1="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>
来源: http://www.phpxs.com/code/1003780/