在移动设备上使用html5 canvas 实现报表

突然冒出需求要把报表显示在手机上，开始的PC端都是用svg做的;

试了下搬到手机上觉得不是蛮好用，找了其他的方法

用到了html5的canvas

用到了js库 http://www.rgraph.net 官网上有api 很多效果不错哦!

在这整理下，以备以后用到。

/------------------------------------------------------------------------------------/

到官网下载js包里面有还很多js文件根据你自己需要添加相应的js文件到自己项目中；

这里只用到了很简单的部分

柱状图线形图饼状图

先上图为证

个人觉得应用者个js还是很简单的，可以研究下这个源码。

html代码：

//核心库必不可少，
<script type="text/javascript" src="../script/three/RGraph.common.core.js"></script>

//绘制线形图
<script type="text/javascript" src="../script/three/RGraph.line.js"></script>

//绘制饼状图
<script type="text/javascript" src="../script/three/RGraph.pie.js"></script>

//绘制条形图
<script type="text/javascript" src="../script/three/RGraph.bar.js"></script>

//绘制图例图例就是给报表中的图添加说明
<script type="text/javascript" src="../script/three/RGraph.common.key.js"></script>

完整的html页面

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 实现报表</title>
<script type="text/javascript" src="chart/RGraph.common.core.js"></script>
<script type="text/javascript" src="chart/RGraph.common.key.js"></script>
<script type="text/javascript" src="chart/RGraph.bar.js"></script>
<script type="text/javascript" src="chart/RGraph.pie.js"></script>
<script type="text/javascript" src="chart/RGraph.line.js"></script>
<script type="text/javascript" src="chart/chart.js"></script>
<style>
div {
display: block;
background: #fcfcfc;
border: 1px solid silver;
margin-top: 10px;
}
button{
width: 100px;
height: 30px;
border-radius:3px;
background:#36BF36;
box-shadow: 1px 1px 5px #000;
text-shadow: 1px 1px 5px #fff;
font-size: 14px;
border: none;
}
button:hover{
background:#8FBC8F;
color: #fff;
}
</style>
</head>
<body>
<div>
<button onclick="drawpie()">绘制pie</button>
<button onclick="cleanchart('pie')">清除</button>
<canvas id="pie" width="500px" height="300px"></canvas>
</div>
<div>
<button onclick="drawline()">绘制line</button>
<button onclick="cleanchart('line')">清除</button>
<canvas id="line" width="500px" height="300px"></canvas>
</div>
<div>
<button onclick="drawbar()">绘制bar</button>
<button onclick="cleanchart('bar')">清除</button>
<canvas id="bar" width="500px" height="300px"></canvas>
</div>

</body>
</html>

js方法

function cleanchart(canid){
   var obj = document.getElementById(canid).getContext('2d');
    obj.clearRect(0,0,500,300);
}
/**
*funciont:    绘制饼状图
*/
function drawpie() {
    var canid = "pie";
    var labels = ["A","B","C"];
    var data = [10,30,80];
    var key = ["a","b","c"];
    var pie = new RGraph.Pie(canid,data);
    pie.Set('chart.labels',labels);
    pie.Set('chart.key',key);
    pie.Set('chart.linewidth', 1);
    pie.Set('chart.stroke', 'white');
    pie.Set('chart.exploded', 5);
    pie.Set('chart.gutter.left', 45); //设定坐标轴的位置
    pie.Set('chart.shadow', true);
    pie.Set('chart.key.position.gutter.boxed', true); //图例样式，可以和其他几个图形对比差别
    pie.Set('chart.key.shadow.offsetx', 7);
    pie.Set('chart.key.shadow.offsety', 7);
   // pie.Set('chart.centerx',100); //设置饼状图中心 X 坐标
    pie.Draw();
};
/**
 *
 * 绘制柱状图
 * 
 **/

function drawbar() {
    var canid = "bar";
    var labels = ["A","B","C"];
    var data = [[10,20,15],[1,20,31],[41,14,23],[9,14,50],[55,12,33]];
    var key = ["key1","key2","key3"];
    var bar = new RGraph.Bar(canid,data);
    bar.Set('chart.labels',labels);
    bar.Set('chart.key',key);
    bar.Set('chart.gutter.left',45);
    bar.Set('chart.colors',['red','blue','green']); //设定块状颜色
    bar.Set('chart.key.position', 'gutter');
    bar.Set('chart.variant', '3d'); //设为立体模式
    bar.Set('chart.units.post', 'w'); //设定Y轴单位
    bar.Set('chart.key.position.gutter.boxed', false);
    bar.Draw();
};

/**
 *
 * 绘制线性图
 *  
 **/

function drawline() {
    var canid = 'line';
    var data = [[20,70,80,10,20,0],[120,45,8,10,120,10],[60,44,50,71,120,80]];
    var labels = ["A","B","C","D","E","F"];
    var key = ["key1","key2","key3"];
    var line = new RGraph.Line(canid,data[0],data[1],data[2]);
    line.Set('chart.labels', labels);
    line.Set('chart.colors', ['red', 'green', 'blue']);
    line.Set("chart.linewidth", 2);
    line.Set('chart.gutter.left', 35);
    line.Set('chart.title', "");
    line.Set('chart.curvy', 0); //设置 线的圆滑度
    //    line.Set('chart.curvy.factor', 0.25);
    line.Set('chart.background.grid.hlines', true); // 设置背景格子 竖线 显示
    // line.Set('chart.background.grid.autofit.numvlines', 11);
    // line.Set('chart.background.grid.border', false);
    line.Set('chart.key',key);
    line.Set('chart.key.position', 'gutter');
    line.Set('chart.key.position.gutter.boxed', false);
    line.Set('chart.tickmarks', 'circle'); //设定折点样式 
    line.Draw();
};

更多设置参照官网的API

参照官网的例子进行修改.

DEMO 下载

demo 效果图

狠狠猛击 JS库下载

posted @ 2012-06-18 11:00 在那花开时节阅读(3633) 评论(2) 编辑收藏举报

刷新页面返回顶部

在那花开时节

在移动设备上使用html5 canvas 实现报表

公告