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

HTML5星空

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

使用HTML5 RGraph插件绘制统计图 第一章 基本介绍

2013-11-6 21:49| 发布者: admin| 查看: 4648| 评论: 4|原作者: admin

摘要: 本章给大家介绍一个专业统计图制作的插件,该插件的名称为RGraph,利用HTML 5中canvas元素进行绘图。使用该插件可以在利用HTML 5开发的网站或Web应用程序中制作出各种功能强大的统计图。 下面对该插件进行概略介 ...
     本章给大家介绍一个专业统计图制作的插件,该插件的名称为RGraph,利用HTML 5中canvas元素进行绘图。使用该插件可以在利用HTML 5开发的网站或Web应用程序中制作出各种功能强大的统计图。

     下面对该插件进行概略介绍,重点介绍几个常见统计图的制作方法。

     在HTML 5中,新增了一个非常重要的元素-canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。使用该元素绘制统计图,比之前使用服务器端控件生成统计图的方法更加具有优越性,因为使用该元素后,绘制统计图的工作直接在客户端进行,而不是在服务器端完成。这不仅意味着不再占用服务器端资源,而且可以直接利用客户端计算机的强大资源,大大提高了绘制统计图的速度。控制canvas图形绘制的脚本代码是可以被压缩(例如,在使用Apache服务器的时候,mod_gzip将自动执行代码压缩工作)和被缓存的,大幅度减少了对带宽的占用。


    设想一下,由于客户端的访问,服务器端每天需要创建100000幅统计图,这对服务器端来说,会占用非常巨大的资源。使用RGraph统计图制作插件可以将资源占用减少到接近零的程度,因为所有创建统计图的工作都在客户端完成,就像渲染HTML网页一样,服务器端只负责发送数据,不再负责统计图的生成与发送,同时带宽的占用情况也得到大大改善。


     另外,由于统计图是依靠JavaScript生成的,因此在查看这个显示统计图的HTML网页的时候,该网页可以处于离线状态。
    目前该插件受到了Firebox 4、Google Chrome 10、Opera II、Safari5和IE 9等浏览器的支持。

    使用RGraph插件
    RGraph插件使用起来非常方便,具体分为以下几个步骤。
    1)在页面中引入RGraph插件所使用的脚本文件,其中RGraph.common.core.js脚本文件(插件的核心代码脚本文件)是必须引入的,代码如下所示。
  1. <script   src=”RGraph. common. core.j s”></script>
复制代码
2)根据页面中需要绘制的统计图的类型与功能引入对应的脚本文件,例如,绘制柱状图时需要引入RGraph.bar.js脚本文件,代码如下所示。
  1. <script src=”RGraph.bar.js”></script>
复制代码
3)添加canvas元素(用来绘制与显示统计图),代码类似如下所示。
  1. <canvas id="myCanvas">
  2.     您的浏览器不支持canvas元素
  3. </canvas>
复制代码
4)创建统计图,代码类似如下所示。
  1. <script>
  2. function window_onload()
  3. {
  4.     myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100, 2500,2700,1400,2600]);
  5.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']);
  6.     myGraph.Set('chart.gutter',65);
  7.     myGraph.Draw();
  8. }
  9. </script>
复制代码
绘制HTML5统计图时所用到的公共属性下面介绍一下使用RGraph插件绘制各种HTML5统计图时会使用到的一些公共属性。
对统计图使用属性的方法如下所示。
myGraph.Set(’name’,  ’value’);//myGraph代表统计图对象


1.整体设置相关属性
chart.width
用来设置柱状图的整体宽度。例如,可以将该值设为600,将canvas元素宽度设为650,为柱状图左侧(或右侧)的坐标轴数字或文字留下50px的宽度。不设置该属性值时柱状图宽度为显示柱状图所用的canvas元素的宽度。

chart.height
用来设置柱状图的整体高度。例如,可以将该值设为250,将canvas元素宽度设为300,为柱状图下侧或上侧的坐标轴数字或文字留下50px的高度。不设置该属性值时柱状图高度为显示柱状图所用的canvas元素的高度。

chart.gutter
用于设置统计图标签所使用的空间尺寸,默认值为25 0如果标签文字由于空间不够而没有被全部显示出来,可以增加这个尺寸。在柱状图或折线图等具有坐标轴的统计图中,统计图标签位于垂直坐标轴旁边或水平坐标轴下部。垂直坐标轴旁的标签文字显示垂直坐标轴的刻度数字(如500、1000、1500、200等),水平坐标轴下部的标签文字显示水平坐标轴中的绘制单位(如1月、2月、3月等)。

    在饼图或其他没有坐标轴的统计图中,统计图标签位于每个绘制区域(如饼图中的每个饼块)旁边,用于说明每个绘制区域的具体数值。


2. 颜色相关属性   
chart.colors
通过数组来指定绘制统计图中每个绘制区域所使用的填充颜色(例如,柱状图中为每根柱子的颜色,饼图中为氰个饼块所使用的颜色)。默认值为数[’rgb(0,0,255)’,’#0f0’,’#00f,’#ff0’,’#0ff',’#0f0’]。


3.统计图标签相关属性
chart.text.color 用于设置统计图的标签文字的文字颜色。默认为黑色。
chart.text.size 用于设置统计图的标签文字的文字大小。默认为10px。
chart.text.font 用于设置坐标轴数字或文字所使用的字体。默认值为Verdanao
chart.labels 用一个数组来显示统计图的标签文字。在柱状图或折线图等具有坐标轴的统计图中,该属性只用于指定水平坐标轴下部的标签文字。默认值为一个空数组。


4.统计图标题相关属性

chart.title
用于设置统计图的标题文字。默认值为null(不设置标题)。
chart.title.background
用于设置统计图标题的背景色。默认值为null(不设置背景色)。
chart.title.color
用于设置统计图标题的文字颜色。默认值为black(黑色)。
chart.title.hpos
用于设置统计图标题的横向位置。该值必须为从0到l中的一个数字,然后将该数字乘以canvas元素的宽度,得到坐标轴标题文字中心点的x坐标。默认值为null(中央显示)。
chart.title.vpos
用于设置统计图标胚的纵向位置。该值必须为从O到l中的一个数字,然后用该数字乘以chart.gutter属性中所设置的值,得到统计图标题的纵向坐标。默认值为null(自动设置)。


5.阴影相关属性
chart.shadow
用于设置是否在统计图中使用阴影效果。默认值为false(不绘制)。

chart.shadow.color
用于设置统计图中阴影的颜色。默认值为#6660

chart. shadow.offsetx
用于设置统计图中阴影的横向宽度。默认值为30

chart.shadow.offsety
用于设置统计图中阴影的垂直方向的投射位移量。默认值为3 0

chart.shadow.blur
用于设置统计图中阴影的向外晕开程度。默认值为3 0


6.用户交互相关属性
chart.contextmenu
使用一个数组来指定上下文菜单申所有菜单项。默认值为一个空数组。

chart.resizable
允许用户通过拖曳操作来改变统计图尺寸。默认值为false。

chart.tooltips
一个带有index编号的数组,其中存放用户单击每根柱子时显示的工具条提示信息,该提示信息可以被书写成HTML的形式。默认值为null。

chart.tooltips.effect
显示工具条提示信息时的动态效果。可以指定的值为fade(淡入)或expand(扩展)。默认值为fade(淡入)。

chart.tooltips.event
用于指定触发工具条提示的事件。可以指定的值为onclick与onmousemoveo默认值为onclick。

chart.tooltips.css.class
工具条提示信息所使用的CSS类名。默认值为Rgraph_tooltip。

chart.tooltips.o,verride
如果用户自己处理工具条提示信息的显示方式,可以在该值中指定一个自定义函数。默认值为null。

chart.annotatable
用于设置是否能对统计图使用注解(例如,用户可以在统计图上自己绘制注解)o默认值为false。

chart.annotate.color
用于设置绘制注解时所使用的颜色。默认值为black(黑色)。


7.图例相关属性

chart.key
用于设置一个存放图例信息的数组。默认值为一个空数组。

chart.key.background
用于设置柱状图所用图例的背景色。默认为白色,可以设置为其他颜色,或设置为类似rgba (255,255,255,0.7)的值来使其产生透明效果。默认值为白色。

chart.key.halign
不通过指定坐标点的方式来设置其位置,而是简单指定图例为左对齐方式或右对齐方式。默认值为right。

chart.key.position
用于设置图例是否被绘制在一个单独的图例区域中。默认值为graph(在图例区域中绘制图例),可以被设置为gutter(直接在坐标轴旁边绘制图例文字)。

chart.key.position.x
用于设置指定图例在X轴上的坐标点。

chart.key.position.y
用于设置指定图例在Y轴上的坐标患。

chart.key.position.gutter.boxed
如果在图例区域中绘制图例,该值用来指定是否对图例区域使用背景色。默认值为true。

chart.key.shadow
用于设置是否对图例绘制阴影。默认值为false。

chart.key.shadow.color
用于设置图例阴影的颜色。默认值为#666。

chart.key.shadow.blur
用于设置图例阴影的晕开半径。默认值为3 0

chart.key.shadow.offsetx
用于设置图例阴影在X轴方向上的位移值。

chart.key.shadow.offsety
用于设置图例阴影在Y轴方向上的位移值。

chart.key.rounded
用于设置是否将图例区域的边框绘制成圆角边框。如果直接在柱状图旁绘制图例文字,那么该属性不起作用。默认值为false。

chart.key.color.shape
用于设置图例中的颜色块的形状。可设置为square(方形)、circle(圆形)和line(直线)。默认值为square(方形)。

chart.key.linewidth
用于设置图例边框的线宽。默认值为1。


8.统计图放大相关属性
chari.zoom.mode
用于指定使用缩略图模式还是canvas元素模式放大显示统计图中某个局部。可以指定的值为thumbnail(缩略图模式)与canvas(canvas元素模式)。默认值为canvas 。

chart.zoom. factor
用于设置放大统计图时所使用的放大倍数。默认值为1.5倍。

chart.zoom.fade.in
用于设置是否使用淡入的方式来放大显示统计图。默认值为true 。

chart.zoom.fade.out
用于设置是否使用淡出的方式来结束统计图的放大显示。默认值为true。

chart.zoom.delay
周于设置缩放时帧与帧之间的间隔毫秒数。默认值为50。

chart.zoom.frames
用于设置执行缩放动画时所使用的帧数。默认值为100

chart.zoom.shadow
用于设置被放大显示的统计图是否具有阴影效果。

chart.zoom.thumbnail.width
用于设置当缩放模式为缩略图模式时的缩略图宽度。默认值为75。

chart.zoom.thumbnail.hcight
用于设置当缩放模式为缩略图模式时的缩略图高度。默认值为75。

chart.zoom.background
用于设置统计图的放大图是否具有一个深色半透明的背景(可以看见网页)。默认值为true。



9.格式相关属性
chart.units.pre
用于设置在数值类型的标签文字中增加一个单位。该单位被放置在数值前边,例如可以将数值指定为“$50"。默认值为none(不指定)。

chart.units.post
用于设置在数值类型的标签文字中增加一个单位。该单位被放置在数值后边,例如可以将数值指定为“50ms”o默认值为none(不指定)。


1 0.其他属性   
chart.align,用于指定统计图的横向对齐方式,可以指定的值为left(左对齐)、center(中央对齐)与right(右对齐)。默认值为center。



鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 xiaohuoban 2013-11-7 10:26
楼主辛苦了,这统计图强大,果断得学一下,希望楼主要持续更新啊。。。。
{:soso__3409329614010722382_3:}
引用 dreamboy 2013-11-7 10:27
目前正在找这方面的插件呢{:soso__3409329614010722382_3:}
引用 snice 2014-11-9 09:02
楼主发贴辛苦了,谢谢楼主分享!我觉得HTML5星空网是注册对了!
引用 snice 2014-12-5 19:50
既然你诚信诚意的推荐了,那我就勉为其难的看看吧!HTML5星空网不走平凡路。

查看全部评论(4)

快讯
发布主题

     京ICP备14042305号

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

GMT+8, 2017-9-25 08:36 , Processed in 0.090461 second(s), 35 queries .

返回顶部