突然冒出需求要把报表显示在手机上，开始的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.common.context.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 效果图
