本章介绍如何使用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 用于设置背景网格的每格高度。默认值为18。 口chart.background.grid.width 用于设置背景网格线宽。允许属性值不为整数（如0.5>o默认值为1。 口chart.background.grid.border 用于设置是否在背景网格周围绘制一个边框线。默认值为true。 口chart.background.grid.hlines 用于设置是否绘制背景网格中的水平线。默认值为true 。 口chart.background.grid.vlines 用于设置是否绘制背景网格中的垂直线。默认值为true。 口chart.background.grid.autofit 不指定背景网格中每格宽度或高度，只指定绘制多少条垂直线与水平线，然后采用自动计算方式。默认值为false（不采用这种方式）o 口chart.background.grid.autofit.numhlines 用于指定当使用自动计算方式绘制背景网格时需要绘制的水平线条数。默认值为7。 口chart.background.grid.autofit.numvlines 用于指定当使用自动计算方式绘制背景网格时需要绘制的垂直线条数。默认值为20。 口chart.background.grid.autofit.align 用于指定背景网格线是否自动与坐标轴刻度对齐。默认值为false。 2．坐标轴相关属性 口chart．noaxes 用于指定是否绘制坐标轴。默认值为false（绘制坐标轴）。 口chart．noxaxis 用于指定是否不绘制水平坐标轴。默认值为false（绘制水平坐标轴）。 口chart．noyaxis 用于指定是否绘制垂直坐标轴。默认值为false（绘制垂直坐标轴）。 3．颜色相关属性 口chart．strokecolor 周于设置绘制柱状图中每根柱子的边框颜色。默认值为#666。 口chart.colors.sequential 用于指定是否只能由相同的颜色来绘制柱状图中每根柱子的颜色。当该值为false时只能用指定的第一根柱子的颜色来绘制其他柱子的颜色。当该值为true时可以对每根柱子指定不同的颜色。默认值为false 。 4．边距相关属性 chart．hmargin，用于设置每根柱子与两侧网格线的相隔距离（以像素为单位）o默认值为5。 5．标签相关属性 口chart．text．angle 用于设置柱状图水平坐标轴下部标签文字的显示角度。允许设置该属性值为：0、45与90。默认值为0（横向显示）。 口chart．labels．above 该值为true时，将会在每根柱子的上部显示一个具体说明该柱子所代表数值的数字。默认值为false。 口chart.labels.above.decimals 用于设置坐标轴每根柱子上部数值精度（允许精确到小数点后几位）o默认值为0。 口chart.labels.above.size 用于设置坐标轴每根柱子上部数值所使用的文字大小。默认值为false（不指定）o 口chart.labels.above.angle 用于设置坐标轴每根柱子上部数值的显示角度。允许的指定值范围为-90到90。默认值为null（横向显示）。 口chart.labels.ingraph 用来指定一个被显示在每根柱子内部的文字数组。默认值为null(不指定)o 口chart．ylabels 用于设置是否绘制垂直坐标轴（即纵向坐标轴或Y坐标轴）o默认值为trueo 口chart.ylabels.count 用于设置垂直坐标轴上显示多少个单位（或者说显示多少个垂直坐标轴文字），可以为任何数字，但垂直坐标轴上的最大数字除以这个数字后必须得到一个整数，否则所有垂直坐标轴文字均不显示。默认值为5（纵向显示5个单位）。 口chart.xlabels.offset 用于设置坐标轴底部文字离开水平坐标轴的位移距离。默认值为0。 口chart.numyticks 用于设置垂直坐标轴上显示多少根刻度线。默认值为10。 6．标题相关属性 口chart.title，xaxis 用于设置水平坐标轴的标题文字。默认值为none（不设置标题文字）o 口chart.title．yaxis 用于设置垂直坐标轴的标题文字。默认值为none（不设置标题文字）。 口chart.title.xaxis.pos 用该值乘以clwtgutter属性中所设置的值得到水平坐标轴标题文字的位置。默认值为0.25。 口chart.title.yaxis.pos 用该值乘以chartgutter属性中所设置的值得到垂直坐标轴标题文字的位置。默认值为0.25。 7．格式相关属性 chart.ymax，用于设置Y坐标轴上数字的最大值。如果不指定则会被自动计算出来。默认值为null（自动计算）。 8．用户交互相关属性 口chart．crosshairs 该值被设为true时，当前鼠标位置处会显示一个十字光标。默认值为false. 口chart.crosshairs.linewidth 用于设置十字光标的线宽。默认值为1。 口chart.crosshairs.color 用于设置十字光标的颜色。默认值为#333。 口chart．adjustable 用于设置是否允许用户调整统计图。默认值为false。 9．其他属性 口chart．line 以一个折线图作为属性值，用于将柱状图与折线图结合成为一张统计图。 口chart．xaxlspos 用于指定水平坐标轴的位置，可设定的值为bottom（底部）或center（中央）。默认值为bottom。 口chart．axis．color 用于指定坐标轴的颜色。默认值为black（黑色）。 口chart．grouping 在绘制分组柱状图时指定分组形式。可以设定的值为grouped（在X轴的同一个单位上绘制多根柱子）或stacked（将一根柱子分为几层颜色）。默认值为grouped. |
京ICP备14042305号
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2020-9-19 23:22 , Processed in 0.129863 second(s), 35 queries .
