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

HTML5星空

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

HTML5 RGraph插件绘制统计图 第六章 使用上下文菜单

2013-11-9 23:53| 发布者: admin| 查看: 1269| 评论: 0|原作者: admin|来自: HTML5社区

摘要: HTML5 RGraph使用上下文菜单 最后来看一下在统计图中使用上下文菜单的方法。使用上下文菜单的步骤分为如下两步: 1)添加对上下文菜单脚本文件的引用,代码如下所示。 script srcd RGraph.common.context.js/s ...
HTML5 RGraph使用上下文菜单
最后来看一下在统计图中使用上下文菜单的方法。使用上下文菜单的步骤分为如下两步:


1)添加对上下文菜单脚本文件的引用,代码如下所示。
<script   srcd RGraph.common.context.js></script>


2)添加使用统计图的chart.contextmenu属性,并且在该属性值中指定单击某个菜单项时所执行的函数,代码类似如下所示。
myGraph.Set('chart.contextmenu',[[’在一个坐标单位上绘制多根柱子',drawGroupedBarl],[将一根柱子分为几层颜色','drawGroupedBar2']]);


接下来介绍一个使用上下文菜单的示例:
  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.bar.js"></script>
  7. <script src="RGraph.common.context.js"></script>
  8. <script>
  9. function drawGroupedBar1()
  10. {
  11.     //清除已绘制的柱状图
  12.     canvas=document.getElementById("myCanvas");
  13.     context=canvas.getContext('2d');
  14.     context.clearRect(0,0,canvas.width,canvas.height);

  15.     myGraph = new RGraph.Bar('myCanvas',[[1200,1600],[1300,1200],[1400,1200],
  16.      [1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],
  17.      [2500,1100],[2700,1000],[1400,1600],[2600,1200]]);
  18.     //指定统计图标题
  19.     myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
  20.     //指定X轴标题
  21.     myGraph.Set('chart.title.xaxis','销售月份');
  22.     //指定Y轴标题
  23.     myGraph.Set('chart.title.yaxis','销售台数');
  24.     //指定柱状图图例被绘制在图例区域中
  25.     myGraph.Set('chart.key.position', 'graph');
  26.    //指定图例文字   
  27.     myGraph.Set('chart.key', ['长虹', '康佳']);   
  28.     //指定柱子颜色
  29.     myGraph.Set('chart.colors', ['blue', 'green']);
  30.     //指定X轴的坐标轴文字
  31.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  32.     '11月','12月']);
  33.     //指定Y轴的坐标轴文字
  34.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  35.     //指定在坐标轴顶部绘制说明销售台数的文字
  36.     myGraph.Set('chart.labels.above',true);
  37.     //用文字说明销售量最少的柱子
  38.     myGraph.Set('chart.labels.ingraph', [19,'销售最少']);
  39.     //指定网格自动与坐标轴单位对齐
  40.     myGraph.Set('chart.background.grid.autofit', true);
  41.     myGraph.Set('chart.background.grid.autofit.align', true);
  42.     //指定标签文字所使用的空间尺寸
  43.     myGraph.Set('chart.gutter',65);
  44.     myGraph.Set('chart.contextmenu', [['在一个坐标单位上绘制多根柱子',drawGroupedBar1],
  45.      ['将一根柱子分为几层颜色',drawGroupedBar2]]);     
  46.     myGraph.Draw();  
  47. }

  48. function drawGroupedBar2()
  49. {
  50.     //清除已绘制的柱状图
  51.     canvas=document.getElementById("myCanvas");
  52.     context=canvas.getContext('2d');
  53.     context.clearRect(0,0,canvas.width,canvas.height);
  54.     //绘制分组柱状图,指定数据
  55.     myGraph = new RGraph.Bar('myCanvas',[[1200,1600],[1300,1200],[1400,1200],
  56.      [1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],[2500,1100],
  57.      [2700,1000],[1400,1600],[2600,1200]]);
  58.     //指定统计图标题
  59.     myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
  60.     //指定X轴标题
  61.     myGraph.Set('chart.title.xaxis','销售月份');
  62.     //指定Y轴标题
  63.     myGraph.Set('chart.title.yaxis','销售台数');
  64.     //指定柱状图图例被绘制在图例区域中
  65.     myGraph.Set('chart.key.position', 'graph');
  66.    //指定图例文字   
  67.     myGraph.Set('chart.key', ['长虹', '康佳']);   
  68.     //指定柱子颜色
  69.     myGraph.Set('chart.colors', ['blue', 'green']);
  70.     //指定X轴的坐标轴文字
  71.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  72.     '11月','12月']);
  73.     //指定Y轴的坐标轴文字
  74.     myGraph.Set('chart.ylabels.specific',['5000','4500','4000','3500','3000','2500',
  75.     '2000','1500','1000','500']);
  76.     //指定在坐标轴顶部绘制说明销售总数量的文字
  77.     myGraph.Set('chart.labels.above',true);
  78.    //指定网格自动与坐标轴单位对齐
  79.     myGraph.Set('chart.background.grid.autofit', true);
  80.     myGraph.Set('chart.background.grid.autofit.align', true);
  81.     //指定坐标轴文字的绘制空间
  82.     myGraph.Set('chart.gutter',65);
  83.     myGraph.Set('chart.grouping', 'stacked');
  84.     myGraph.Set('chart.contextmenu', [['在一个坐标单位上绘制多根柱子',drawGroupedBar1],['将一根柱子分为几层颜色',drawGroupedBar2]]);  
  85.     myGraph.Draw();     
  86. }
  87. </script>
  88. </head>  
  89. <body onload="drawGroupedBar1()">  
  90. <h1>使用RGraph插件制作柱状图</h1>  
  91. <canvas id="myCanvas" width="900" height="400">
  92.      [您的浏览器不支持canvas元素]
  93. </canvas>
  94. </body>  
  95. </html>
复制代码
画面打开时使用在一个坐标单位上绘制多根柱子的方法来绘制分组柱状图,单击上下文菜单中的“将一根柱子分为几层颜色”菜单项时使用一个坐标单位上只绘制一根柱子,将每根柱子分为几层颜色的方法来绘制分组柱状图,单击上下文菜单中的“在一个坐标单位上绘制多根柱子”菜单项时仍然使用在一个坐标单位上绘制多根柱子的方法来绘制分组柱状图。

如下图:









鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯

     京ICP备14042305号

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

GMT+8, 2019-12-11 10:34 , Processed in 0.127097 second(s), 37 queries .

返回顶部