突然冒出需求要把報表顯示在手機上，開始的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 效果圖
