下面对该插件进行概略介绍，重点介绍几个常见统计图的制作方法。 在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脚本文件（插件的核心代码脚本文件）是必须引入的，代码如下所示。
对统计图使用属性的方法如下所示。 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。 |
京ICP备14042305号
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2020-9-22 22:21 , Processed in 0.159768 second(s), 38 queries .
