[代码收集]HTML5 Canvas结合RGraph插件绘制柱状图 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-02-03 05:37:12 -0500

★HTML5 Canvas结合RGraph插件绘制柱状图★

请勿抄袭本页面

代码说明

HTML5 Canvas结合RGraph插件（这里主要是RGraph.bar.js和RGraph.common.core.js），实现产品销售情况柱状图，用图表来显示销售业绩，非常直观，而且HTML5 Canvas自身的功能也比较强大。转自源码爱好者

html代码

<script src="http://www.codefans.net/jscss/demoimg/201401/RGraph.common.core.js"></script>
<script src="http://www.codefans.net/jscss/demoimg/201401/RGraph.bar.js"></script>
<script>
function window_onload()
{
    //绘制柱状图，指定数据
    myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
    2500,2700,1400,2600]);
   //指定统计图标题
    myGraph.Set('chart.title','某个年份常州第一百货公司长虹彩电销售图');
    //指定X轴标题
    myGraph.Set('chart.title.xaxis','销售月份');
    //指定Y轴标题
    myGraph.Set('chart.title.yaxis','销售台数');
    //指定X轴的坐标轴文字
    myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
    '11月','12月']);
    //指定Y轴的坐标轴文字
    myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
    //指定在坐标轴顶部绘制说明销售数量的文字
    myGraph.Set('chart.labels.above', true);
    //指定网格自动与坐标轴单位对齐
    myGraph.Set('chart.background.grid.autofit', true);
    myGraph.Set('chart.background.grid.autofit.align', true);
    //指定标签文字所使用的空间尺寸
    myGraph.Set('chart.gutter',65);
    //绘制柱状图
    myGraph.Draw();
}
</script>
<body onload="window_onload()">
<canvas id="myCanvas" width="700" height="400">您的浏览器不支持canvas元素</canvas>

10502325.bar.js (75.37 KiB) | Meta

1863004.common.core.js (87.82 KiB) | Meta

代码演示

[代码仅供参考，转载请注明出处]

----Comments(1)----
风牙 (@1022) | @ at 2014-02-03 08:20:
很好很强大！

Subscribe | Register | Login | N