HTML5 Canvas结合RGraph插件制作柱状图

2024-09-05 12:19:05

字体：大中小

来源：转载

供稿：网友

HTML5 Canvas结合RGraph插件（这里主要是RGraph.bar.js和RGraph.common.core.js），实现产品销售情况柱状图，用图表来显示销售业绩，非常直观，而且HTML5 Canvas自身的功能也比较强大，长远点来说，HTML5必将普及。因此本代码值得参考。代码中的丰富注释同时也是你学习HTML5技术的不错参考。

<!DOCTYPE html><head><meta charset="UTF-8"><title>使用RGraph插件制作柱状图</title><script src="/jscss/demoimg/201401/RGraph.common.core.js"></script><script src="/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></head><body onload="window_onload()"><h1>使用RGraph插件制作柱状图</h1><canvas id="myCanvas" width="700" height="400">     [您的浏览器不支持canvas元素]</canvas></body></html>

上一篇：HTML5多种动画效果加载图片

下一篇：html5练习代码 Div圆角阴影菜单旋转实例

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注