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

HTML5星空

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

HTML5 RGraph绘图 第十八章 制作统计图放大镜

2013-11-12 10:12| 发布者: mydream| 查看: 993| 评论: 0|原作者: mydream

摘要: HTML5 RGrap制作统计图放大镜 第二种放大统计图的方法被称为缩略图方法,这种方法不是针对整个统计图进行的,而是通过一个“放大镜”来放大统计图中的局部。当光标移动到统计图上时会出现一个“放大镜”,在该“ ...
HTML5 RGrap  制作统计图放大镜
    第二种放大统计图的方法被称为缩略图方法,这种方法不是针对整个统计图进行的,而是通过一个“放大镜”来放大统计图中的局部。当光标移动到统计图上时会出现一个“放大镜”,在该“放大镜”中放大显示鼠标指针所在的局部区域,随着鼠标指针在统计图上的移动来更新“放大镜”中的放大区域。
   当鼠标指针移动到统计图上时会出现一个“放大镜”,将鼠标指针所在局部区域放大显示,并且随着鼠标指针在统计图上的移动来更新“放大镜”中的放大区域,
  如图:
HTML5 RGraph 缩略图模式(统计图放大镜)



    另外,通过如下所示的样式可以使“放大镜”由方形变为圆形,使其看起来更加具有放
大镜的显示效果。
  1. <style)
  2. .RGraph_zoom window {
  3.     border-radius: 50px ! important;
  4. }
  5. </style>
复制代码
完整代码如下:
  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.common.context.js"></script>
  7. <script src="RGraph.common.zoom.js"></script>
  8. <script src="RGraph.bar.js"></script>
  9. <script>
  10. function window_onload()
  11. {   
  12.    //绘制柱状图,指定数据
  13.     myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
  14.     2500,2700,1400,2600]);
  15.    //指定统计图标题
  16.     myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
  17.     //指定X轴标题
  18.     myGraph.Set('chart.title.xaxis','销售月份');
  19.     //指定Y轴标题
  20.     myGraph.Set('chart.title.yaxis','销售台数');
  21.     //指定X轴的坐标轴文字
  22.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  23.     '11月','12月']);
  24.     //指定Y轴的坐标轴文字
  25.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  26.     //指定在坐标轴顶部绘制说明销售数量的文字
  27.     myGraph.Set('chart.labels.above', true);
  28.      //指定网格自动与坐标轴单位对齐
  29.     myGraph.Set('chart.background.grid.autofit', true);   
  30.     myGraph.Set('chart.background.grid.autofit.align', true);
  31.     //指定标签文字所使用的空间尺寸
  32.     myGraph.Set('chart.gutter',65);
  33.     //使用缩略图模式放大统计图
  34.     myGraph.Set('chart.zoom.mode', 'thumbnail');
  35.     //放大镜的宽度
  36.     myGraph.Set('chart.zoom.thumbnail.width', 100);
  37.     //放大镜的高度
  38.     myGraph.Set('chart.zoom.thumbnail.height', 100);
  39.     //指定弹出菜单,点击菜单项时放大统计图
  40.     myGraph.Set('chart.contextmenu',[['放大柱状图', RGraph.Zoom]]);
  41.     //绘制柱状图
  42.     myGraph.Draw();     
  43. }

  44. </script>
  45. <style>
  46.    .RGraph_zoom_window {
  47.         border-radius: 50px ! important;
  48.     }
  49. </style>
  50. </head>  
  51. <body onload="window_onload()">  
  52. <h1>使用RGraph插件制作柱状图</h1>  
  53. <canvas id="myCanvas" width="700" height="400">
  54.      [您的浏览器不支持canvas元素]
  55. </canvas>
  56. </body>  
  57. </html>
复制代码








鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

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

GMT+8, 2019-8-26 18:16 , Processed in 0.096401 second(s), 31 queries .

返回顶部