本节具体介绍如何使用RGraph插件绘制横向柱状图。在讲解实例前,先来看一下在绘制横向柱状图时所用到的属性。 绘制横向柱状图时所用到的属性 除了前面所讲的绘制所有统计图时用到的属性外,绘制横向柱状图时还会用到如下属性。 1背景相关属性 口chart.background.barcolorl 设置柱状图背景网格中的奇数行(从上往下数)的背景颜色(默认为白色)。 口chart.background.barcolor2 设置柱状图背景网格中的偶数行(从上往下致)的背景颜色(默认为白色)。 口chart.background.grid 指定是否显示背景网格。默认值为true(显示)。 口chart.background.grid.color 设置背景网格线的颜色。默认颜色为#ddd。 口chart.background.grid.hsize 设置背景网格的每格宽度。默认值为40。 口chart.background.grid.vsize 设置背景网格的每格高度。默认值为180 口chart.background.grid.width 设置背景网格线宽。允许属性值不为整数(例如0.5) 口chart.background.grid.border 设置是否在背景网格周围绘制一个边框线。默认值为true 。 口chart.background.grid.hlines 设置是否绘制背景网格中的水平线。默认值为true 。 口chart.background.grid.vlines 设置是否绘制背景网格中的垂直线。默认值为true。 口chart.background.grid.autofit 不指定背景网格中每格宽度或高度,只指定绘制多少条垂直线与水平线,然后采用自动计算方式。默认值为false(不采用这种方式) 口chart.background.grid.autofit.numhlines 指定当使用自动计算方式绘制背景网格时需要绘制的水平线条数。默认值为7 口chart.background.grid.autofit.numvlines 指定当使用自动计算方式绘制背景网格时需要绘制的垂直线条数。 口chan.background.grid.autofit.align 指定背景网格线是否自动与坐标轴刻度对齐。默认值为false。 2.标签相关属性 口chart.xlabels 用于设置是否绘制水平坐标轴 口chart.1abels.above 该值为tme时,将会在每根柱子的右端显示一个具体说明该柱子所代表数值的数字。默 认值为falseo 口chan.1abels.above.decimals 用于设置坐标轴每根柱子右端数值精度(允许精确到小数点后几位)默认值为0 3.标题相关属性 口chan.title.xaxis 设置水平坐标轴的标题文字。默认值为none(不设置标题文字) 口chan.title.yaxis 设置垂直坐标轴的标题文字。默认值为none(不设置标题文字)。 口chart.title.xaxis.pos 用该值乘以在chart.gutter属性中所设置的值得到水平坐标轴标题文字的位置。默认值为0.25。 口chart.title.yaxis.pos 用该值乘以在chart.gutter属性中所设置的值得到垂直坐标轴标题文字的位置。默认值为0.25。 4.格式与坐标轴相美属性 口chan.scale.thousand 用于指定数值的千位分隔符。默认值为“,”。 口chart.xmax 用于设置水平坐标轴上数字的最大值。如果不指定,则该值将被自动计算出来。默认值为null。(自动计算) 口chan.xmin 用于设置水平坐标轴上数字的最小值。默认值为0。 口chan.yaxispos 用于指定垂直坐标轴的位置。可以指定的值为left(左端)或center(中央)o默认值为left。 口chan.axis.color 用于指定坐标轴颜色。默认值为black(黑色) 5.其他相关属性 口chart.grouping 用于在绘制分组柱状图时指定分组形式。可以指定的值为grouped(在Y轴上的同一个单位上绘制多根柱子)或stacked(将一根柱子分为几层颜色)默认值为grouped. 口chart.vmargin 用于设置每根柱子与网格线的相隔距离(以像素为单位)o默认值为5 口chart.strokestyle 用于设置绘制柱状图中每根柱子的边框颜色。默认值为black 示例程序 接下来介绍一个使用RGraph插件制作横向柱状图的示例程序,该示例程序是反映2010年常州第一百货公司长虹彩电销售情况,不过这一次使用横向柱状图来作为统计图。该示例程序在浏览器中打开时的显示效果如图所示: ![]() 完整代码如下:
|
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2021-1-24 01:24 , Processed in 0.100975 second(s), 36 queries .