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

HTML5星空

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

HTML5 RGraph插件绘制统计图 第八章 绘制基本折线图

2013-11-10 18:49| 发布者: mydream| 查看: 1283| 评论: 0|原作者: mydream

摘要: 绘制基本折线图 接下来看一个绘制基本折线图的示例程序。该示例程序仍然是表现2010年常州第一百货公司长虹彩电的销售情况,在本示例程序中采用折线图的形式来进 行表现。 该示效果如图下所示: ...
绘制基本折线图
    接下来看一个绘制基本折线图的示例程序。该示例程序仍然是表现2010年常州第一百货公司长虹彩电的销售情况,在本示例程序中采用折线图的形式来进
行表现。
    该示效果如图下所示:





代码如下所示:

  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 src="RGraph.common.tooltips.js"></script>

  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制折线图,指定数据
  12.     var myGraph = new RGraph.Line('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,2500,2700,1400,2600]);
  13.     //指定折线图标题
  14.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  15.     //指定X轴标题
  16.     myGraph.Set('chart.title.xaxis','销售月份');
  17.     //指定Y轴标题
  18.     myGraph.Set('chart.title.yaxis','销售台数');
  19.     //指定X轴的坐标轴文字
  20.     myGraph.Set('chart.labels', ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']);
  21.     //指定Y轴的坐标轴文字  
  22.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  23.     //指定在折线连接点处绘制说明销售数量的文字
  24.     myGraph.Set('chart.labels.above', true);
  25.    //指定网格颜色
  26.     myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
  27.     //指定标签文字的绘制空间
  28.     myGraph.Set('chart.gutter', 60);   
  29.     //绘制折线图
  30.     myGraph.Draw();
  31. }
  32. </script>
  33. </head>  
  34. <body onload="window_onload()">  
  35. <h1>使用RGraph插件制作折线图</h1>  
  36. <canvas id="myCanvas" width="700" height="400">
  37.      [您的浏览器不支持canvas元素]
  38. </canvas>
  39. </body>  
  40. </html>
复制代码

使用getPoint方法    在绘制折线图时,可以通过obj.getPoint方法使开发者或用户知道哪个连接点获得了鼠标焦点。该方法返回一个数组,其中存放以下信息:    1)用于绘制统计图对象的canvas元素。    2)获得鼠标焦点的连接点在X轴上的坐标点。    3)获得鼠标焦点的连接点在Y轴上的坐标点。    4)获得鼠标焦点的连接点的序号(标示第几个连接点获得了鼠标焦点)。    下面来看一个使用该方法的示例当连接点获得鼠标焦点时鼠标指针会从指针形状变成手指形状,该连接点处也会突出显示一个蓝色实心圆圈,同时出现一个工具条提示信息,说明该连接点是水平坐标轴上哪一个绘制单位的连接点(在本示例的工具条提示中显示月份信息)

如下图:




完整代码如下:


  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 src="RGraph.common.tooltips.js"></script>

  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制折线图,指定数据
  12.     var myGraph = new RGraph.Line('myCanvas',[1200,1300,1400,1500,3000,1900,2000,
  13.     2100,2500,2700,1400,2600]);
  14.     //指定折线图标题
  15.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  16.     //指定X轴标题
  17.     myGraph.Set('chart.title.xaxis','销售月份');
  18.     //指定Y轴标题
  19.     myGraph.Set('chart.title.yaxis','销售台数');
  20.     //指定X轴的坐标轴文字
  21.     myGraph.Set('chart.labels', ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  22.     '11月','12月']);
  23.     //指定Y轴的坐标轴文字  
  24.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  25.     //指定在折线连接点处绘制说明销售数量的文字
  26.     myGraph.Set('chart.labels.above', true);
  27.    //指定网格颜色
  28.     myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
  29.     //指定标签文字的绘制空间
  30.     myGraph.Set('chart.gutter', 60);
  31.     //绘制折线图   
  32.     myGraph.Draw();
  33.     //注册控件
  34.     RGraph.Register(myGraph);
  35.     //书写鼠标在折线图上移动时的函数
  36.     myGraph.canvas.onmousemove = function (e)
  37.     {
  38.         //注册事件
  39.         RGraph.FixEventObject(e);
  40.       
  41.         var canvas  = e.target;//获得绘制折线图的canvas元素
  42.         var context = canvas.getContext('2d');//获得绘制折线图的canvas元素的图形上下文对象
  43.         var obj     = e.target.__object__;//获得事件对象
  44.       
  45.         // 使用getPoint方法来得到取得光标焦点的连接点
  46.         var point = obj.getPoint(e);
  47.       
  48.         if (point) //如果存在取得光标焦点的连接点
  49.         {            
  50.             canvas.style.cursor = 'pointer';//改变鼠标指针为手指形状
  51.             
  52.             //如果工具条提示已经被显示
  53.             if (RGraph.Registry.Get('chart.tooltip')
  54.             && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) {
  55.                 return;
  56.             }

  57.             //重绘折线图
  58.             RGraph.Redraw();

  59.             //显示工具条提示
  60.             RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY,
  61.             point[3]);

  62.             //突出显示连接点
  63.             context.fillStyle = 'blue';//使用蓝色填充
  64.             context.beginPath();//开始创建路径
  65.             context.moveTo(point[1], point[2]);//绘制起点移动到连接点上
  66.             context.arc(point[1], point[2], 4, 0, 6.26, 0);//创建圆形路径
  67.             context.fill();//填充圆圈
  68.             
  69.             return;
  70.         }        
  71.         canvas.style.cursor = 'default';//恢复默认鼠标指针
  72.     }
  73. }
  74. //在其他位置处点击鼠标时取消当前显示的工具条提示信息及蓝色放大折线点
  75. window.onclick = function ()
  76. {
  77.     RGraph.Redraw();
  78. }
  79. </script>
  80. </head>  
  81. <body onload="window_onload()">  
  82. <h1>使用RGraph插件制作折线图</h1>  
  83. <canvas id="myCanvas" width="700" height="400">
  84.      [您的浏览器不支持canvas元素]
  85. </canvas>
  86. </body>  
  87. </html>
复制代码







鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯

     京ICP备14042305号

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

GMT+8, 2019-12-12 21:41 , Processed in 0.140554 second(s), 35 queries .

返回顶部