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

HTML5星空

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

HTML5 RGraph 第十三章 绘制横向柱状图

2013-11-11 23:33| 发布者: mydream| 查看: 1322| 评论: 0|原作者: mydream|来自: html5星空论坛

摘要: HTML5 RGraph绘制横向柱状图 本节具体介绍如何使用RGraph插件绘制横向柱状图。在讲解实例前,先来看一下在绘制横向柱状图时所用到的属性。 绘制横向柱状图时所用到的属性 除了前面所讲的绘制所有统计图时用 ...
HTML5 RGraph绘制横向柱状图
    本节具体介绍如何使用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年常州第一百货公司长虹彩电销售情况,不过这一次使用横向柱状图来作为统计图。该示例程序在浏览器中打开时的显示效果如图所示:

HTML5 RGraph绘制横向柱状图




完整代码如下:
  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>使用RGraph插件制作横向柱状图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.hbar.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     //绘制横向柱状图,指定数据
  11.     myGraph = new RGraph.HBar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,2500,2700,1400,2600]);
  12.     //指定统计图标题
  13.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  14.      //指定X轴标题
  15.     myGraph.Set('chart.title.xaxis','销售台数');
  16.     //指定Y轴标题
  17.     myGraph.Set('chart.title.yaxis','销售月份');   
  18.     //指定Y轴的坐标轴文字
  19.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  20.     '11月','12月']);
  21.     //指定在坐标轴右端绘制说明销售数量的文字
  22.     myGraph.Set('chart.labels.above', true);   
  23.     //指定网格自动与坐标轴单位对齐
  24.     myGraph.Set('chart.background.grid.autofit', true);
  25.     myGraph.Set('chart.background.grid.autofit.align', true);
  26.     //指定标签文字所使用的空间尺寸
  27.     myGraph.Set('chart.gutter',45);
  28.      //绘制横向柱状图
  29.     myGraph.Draw();
  30.    
  31. }
  32. </script>
  33. </head>  
  34. <body onload="window_onload()">  
  35. <h1>使用RGraph插件制作横向柱状图</h1>  
  36. <canvas id="myCanvas" width="700" height="400">
  37.      [您的浏览器不支持canvas元素]
  38. </canvas>
  39. </body>  
  40. </html>
复制代码









鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

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

GMT+8, 2019-8-26 17:40 , Processed in 0.095939 second(s), 35 queries .

返回顶部