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

HTML5星空

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

HTML5 RGraph插件绘制统计图 第七章 绘制折线图属性介绍

2013-11-10 18:38| 发布者: mydream| 查看: 1470| 评论: 0|原作者: mydream|来自: HTML5星空社区

摘要: 绘制折线图 本节介绍如何使用RGraph插件绘制折线图。在讲解示例前,先来介绍绘制折线图时所使用到的属性。 绘制折线图时所用到的属性 除了前面讲到的绘制所有统计图都会使用到的属性外,绘制折线图时还会使 ...
绘制折线图
    本节介绍如何使用RGraph插件绘制折线图。在讲解示例前,先来介绍绘制折线图时所使用到的属性。

绘制折线图时所用到的属性
    除了前面讲到的绘制所有统计图都会使用到的属性外,绘制折线图时还会使用如下属性。


   1.背景相关属性
    口chart.background.barcolor
    设置折线图背景网格中的奇数行(从上往下数)的背景颜色(默认为白色)。
    口chart.background.barcolor2
    设置折线图背景网格中的偶数行(从上往下数)的背景颜色(默认为白色)。
    口chart.background.grid
    指定是否显示背景网格,默认值为true(显示)。
    口chart.background.grid.color
    设置背景网格线的颜色,默认颜色为#eee。
    口chart.background.grid.hsize
    设置背景网格的每格宽度。默认值为25。
    口chart.background.grid.vsize
    设置背景网格的每格高度。默认值为25。
    口chart.background.grid.width
    设置背景网格线宽。默认值为1。
    口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    指定当使用自动计算方式绘制背景网格时需要绘制的垂直线条数。默认值为20。
    口chart.background.grid.autofit.align    指定背景网格线是否自动与坐标轴刻度对齐。默认值为false
    口chart.backdrop    指定是否在折线周围绘创一圈阴影。默认值为false。
    口chart.backdrop.size    指定折线阴影的宽度。默认值为30   
   口chart.backdrop.alpha    指定折线阴影的透明度。可设置的值范围为从0(完全透明)到l(不透明)。默认值为0.2。


    2.标签相关属性
   口chart.labels.above    该值为true时,将会在每段折线的起点的上部显示一个具体说明该起点处所代表数值的数字。默认值为false。
    口chart.labels.above.size    用于设置每段折线的起点的上部所绘制数值的文字大小。默认值为8 。
    口chart.labels.ingraph    用来指定一个被显示在每段折线区域内部的文字数组。默认值为null(不指定)。
    口chart.ylabcls    用于设置是否绘制垂直坐标轴(又称做纵向坐标轴或Y坐标轴)。默认值为true。
    口chart.ylabels.invert    用于设置是否将垂直坐标轴翻转绘制(即O在最顶部,越往下数值越大)。默认值为false。
   口chart.ylabels.count
    用于设置垂直坐标轴上显示多少个单位(或者说显示多少个垂直坐标轴文字),可指定的值为1、3、5或者10。默认值为5(纵向显示5个单位)。
    口chart.ylabels.inside    用于设置垂直坐标轴上的标签文字是否被绘制在统计图内侧。默认值为false。

    口chart.ylabels.inside.color    用于设置当垂直坐标轴上的标签文字被绘制在统计图内侧时,标签所使用的背景色。默认值为rgba (255,255,255,0.5)(白色半透明)。  
    口chart.xlabels.inside    用于设置水平坐标轴上的标签文字是否被绘制在坐标轴上部。默认值为false。
    口chart.xlabels.inside.color    用于设置当水平坐标轴上的标签文字被绘制在坐标轴上部时,标签所使用的背景色。默认值为rgba (255,255,255,0.5)(白色半透明)。
    口chart.text.size    用于设置统计图的标签文字的文字大小。默认为10px。
    口chan.text.angle    用于设置统计图水平坐标轴下部标签文字的显示角度。默认值为。(横向显示)

   3.边距相美属性  
  chan.hmargin,用于设置折线起点与终点的外边距(离开背景网格线的距离)。默认值为0。


    4.颜色相关属性  
    口chart.fillstyle    用于设置绘制折线区域所使用的填充颜色。
    口chari.filled    用于设置是否填充折线区域。如果填充折线区域则会以指定的填充颜色来填充折线与水平坐标轴之间的区域。默认值为false。
    口chart.filled.range    当需要使用上下两根折线来绘制范围折线图时,需要将该属性设为true。范围折线图需要使用两个数组作为绘制的数值来源。当指定填充颜色并进行填充时,只填充两根折线图之间的区域。默认值为false。


    5.用户交互相关属性
    口chari.crosshairs    该值被设为true时,将在当前光标位置处显示一个十字光标。默认值为false。
    口chart.crosshairs.linewidth    用于设置十字光标的线宽。默认值为1。
    口 chart.crosshairs.color    用于设置十字光标的颜色。默认值为#333。
    口chart.adjustable    用于设置是否允许用户调整统计图。默认值为false 。


    6.标题相关属性  
   口chart.title.xaxis    设置水平坐标轴的标题文字。默认值为none(不设置标题文字)。
   口chart.title.yaxis    设置垂直坐标轴的标题文字。默认值为none(不设置标题文字)。
   口chart.title.xaxis.pos    用该值乘以chart.gutter属性中所设置的值得到水平坐标轴标题文字的位置。默认值为0.25。
   口chart.title.yaxis.pos    用该值乘以chart.gutter属性中所设置的值得到垂直坐标轴标题文字的位置。默认值为0.25。


    7.格式相关属性
   口chart.scale.thousand    用于指定数值的千位分隔符。默认值为“,”
   口chart.ymin    用于设置Y坐标轴上数字的最小值。如果不指定,则该值为O。默认值为null
   口chart.ymax    用于设置Y坐标轴上数字的最大值。如果不指定,该值将被自动计算出来。默认值为null(自动计算)。


   8.坐标轴相关属性
    口chart.tickdirection    用于揩定水平坐标轴上的刻度线是位于坐标轴的上方(该值为1)还是下方(该值为-1)。默认值为-1。
    口chart.axis.color    用于指定坐标轴颜色。默认值为black(黑色)。
    口chart.xaxispos    用于指定水平坐标轴的位置。可以指定的值为bottom(底部)或center(中央)。默认值为bottom(底部)
    口chart.yaxispos    用于指定垂直坐标轴的位置。可以指定的值为left(统计图左侧)或right(统计图右侧)。默认值为left.  
    口chart.noaxes    指定是否不绘制坐标轴。默认值为false(绘制坐标轴)

  9.其他属性
口chart.tickmarks  用于指定每段折线段之间的连接符号。可以设定的值为:  
dot(点)  circle(空心圆圈)  filledcircle(实心圆圈)  endcircle(只在整条折线的起点与终点处绘制空心圆圈)  square(空心方块)  endsquare(只在整条折线的起点与终点处绘制空心方块)  filledsquare(实心方块)  filledendsquare(只在整条折线的起点与终点处绘制实心方块)  tick(刻度线)  half/ick(半刻度线)  endtick(只在整条折线的起点与终点处绘制刻度线)  cross(叉线)  borderedcircle(绘制效果与dot相同)  arrow(只在整条折线的终点处绘制一个箭头)  filledarrow(只在整条折线的终点处绘制一个实心箭头)  默认值为null(没有连接符号)。

  口chart.tickmarks.dot.color  当chart.tickmarks的属性值被指定为dot或borderedcircle时绘制点的颜色。
  口chart.stepped    周于设置是否将折线绘制为阶梯形式(没有斜线,只有竖线与横线)默认值为false  
  口chart.chromefix    在Google Chrome浏览器中,当一起使用阴影和晕开效果的时候,存在一个很明显的bug.通过将这个属性值设为true来修正该bugo默认值为true

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯

     京ICP备14042305号

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

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

返回顶部