请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 查看内容

HTML5 RGraph 第十一章 绘制动态折线图

2013-11-11 15:50| 发布者: mydream| 查看: 2111| 评论: 0|原作者: mydream|来自: html5星空论坛

摘要: HTML5 RGraph绘制动态折线图 再来看一个绘制实时更新的动态折线图的示例程序。在实际应用中,可以通过AJAX等方法从后台取得服务器端的动态数据来实时更新折线图。在本示例程序中,只采用每250毫秒产生一个随 ...
HTML5 RGraph  绘制动态折线图


    再来看一个绘制实时更新的动态折线图的示例程序。在实际应用中,可以通过AJAX等方法从后台取得服务器端的动态数据来实时更新折线图。在本示例程序中,只采用每250毫秒产生一个随机数的方法来模拟动态数据。这种实时更新的折线图可以应用在反映网络带宽、频率和实时用电信息等很多需要根据现场情况进行实时更新的统计图中。


本示例页面在浏览器中的显示效果如(注意:每250毫秒折线图会更新一次)。


使用RGraph插件绘制动态折线图
完整代码如下:

  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>使用RGraph插件制作动态折线图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.line.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     d1 = [];//存放上部折线图使用数据的数组
  11.     d2 = [];//存放下部折线图使用数据的数组
  12.    
  13.     // 用null值填充数组
  14.     for (var i=0; i< 100; ++i)
  15.     {
  16.         d1.push(null);
  17.         d2.push(null);
  18.     }
  19.     //绘制折线图
  20.     drawGraph();
  21. }

  22. //设置折线图属性
  23. function getGraph(id, d1, d2)
  24. {
  25.     var graph = new RGraph.Line(id, d1, d2);//获取折线图数据
  26.     graph.Set('chart.gutter', 25);//设置标签文字使用空间
  27.     graph.Set('chart.title.xaxis', '时间');//设置水平坐标轴标题
  28.     graph.Set('chart.filled', true);//使用填充色填充折线区域
  29.     graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);//指定上部折线区域与下部折线区域的填充色
  30.     graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);//指定上部折线与下部折线的颜色
  31.     graph.Set('chart.linewidth', 3);//指定线宽
  32.     graph.Set('chart.ymax', 20);//指定垂直坐标轴上的最大数值
  33.     graph.Set('chart.xticks', 25);//指定水平坐标轴上的刻度线
  34.     return graph;//返回设置好的折线图
  35. }
  36. //绘制折线图
  37. function drawGraph (e)
  38. {
  39.     //清除之前绘制的折线图
  40.     RGraph.Clear(document.getElementById("myCanvas"));
  41.    
  42.     var graph = getGraph('myCanvas', d1, d2);//获取设置好属性的折线图
  43.     graph.Draw();//绘制折线图
  44.         
  45.     //使用随机数字填充折线图所使用的数据数组
  46.     d1.push(RGraph.random(5, 10));
  47.     d2.push(RGraph.random(5, 10));
  48.         
  49.     //如果数组已经填满,则移出数组中最前面的数字,并将数组中每个数字朝前移位
  50.     if (d1.length > 100) {
  51.         d1 = RGraph.array_shift(d1);
  52.         d2 = RGraph.array_shift(d2);
  53.     }
  54.     //设置每250毫秒更新折线图
  55.     setTimeout(drawGraph,250);
  56. }
  57. </script>
  58. </head>  
  59. <body onload="window_onload()">  
  60. <h1>使用RGraph插件制作动态折线图</h1>  
  61. <canvas id="myCanvas" width="700" height="400">
  62.      [您的浏览器不支持canvas元素]
  63. </canvas>
  64. </body>  
  65. </html>
复制代码





鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:49 , Processed in 0.083825 second(s), 32 queries .

返回顶部