您的位置：首页 > Web前端 > HTML5

Web : 使用RGraph(HTML5)绘制折线图(一)

2012-07-27 12:51 369 查看
项目最终部分效果图



项目目录

EnjoyHTML5

　　—— page

　　　　—— ViewAllTeam.htm

　　—— Js

　　　　—— RGraph/RGraph.common.core.js

　　　　—— RGraph/RGraph.common.dynamic.js

　　　　—— RGraph/RGraph.common.tooltips.js

　　　　—— RGraph/RGraph.common.effects.js

　　　　—— RGraph/RGraph.common.key.js

　　　　—— RGraph/jquery.min.js

　　　　—— RGraph/RGraph.line.js

　　　　—— RGraph/excanvas.js

　　　　—— ShowRGraph.js

其中以GRraph打头的文件可从http://www.rgraph.net/下载

ViewAllTeam.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<center>
<div id="divMain" style="width: 100%; display: block;">
<div style="height: 10px">
 </div>
<div id='div1' style="width: 100%">
<span>Users</span>
<br />
<br />
<canvas id="line1" width="700" height="400">该浏览器不支持canvas，请更换支持HTML5的浏览器</canvas>
</div>
<div style="height: 10px">
 </div>
<div id='div2' style="width: 100%">
<span>Employees</span>
<br />
<br />
<canvas id="line2" width="700" height="400">该浏览器不支持canvas，请更换支持HTML5的浏览器</canvas>
</div>
<div style="height: 10px">
 </div>
<div id='div3' style="width: 100%">
<span>Boss</span>
<br />
<br />
<canvas id="line3" width="700" height="400">该浏览器不支持canvas，请更换支持HTML5的浏览器</canvas>

</div>
</div>
</center>
<script type="text/javascript" src="../Js/RGraph/RGraph.common.core.js"></script>
<script type="text/javascript" src="../Js/RGraph/RGraph.common.dynamic.js"></script>
<script type="text/javascript" src="../Js/RGraph/RGraph.common.tooltips.js"></script>
<script type="text/javascript" src="../Js/RGraph/RGraph.common.effects.js"></script>
<script type="text/javascript" src="../Js/RGraph/RGraph.common.key.js"></script>
<script type="text/javascript" src="../Js/RGraph/jquery.min.js"></script>
<script type="text/javascript" src="../Js/RGraph/RGraph.line.js"></script>
<script type="text/javascript" src="../Js/RGraph/excanvas.js"></script>
　　　　　<script type="text/javascript" src="../Js/ShowRGraph.js"></script>

<script type="text/javascript">
var line1JsonObj = eval("([{'DataTitle':'user1','DataList':[{'DataTime':new Date(1341072000000),'Value':0},{'DataTime':new Date(1341158400000),'Value':null},{'DataTime':new Date(1341244800000),'Value':null},{'DataTime':new Date(1341331200000),'Value':null},{'DataTime':new Date(1341417600000),'Value':null},{'DataTime':new Date(1341504000000),'Value':null},{'DataTime':new Date(1341763200000),'Value':null},{'DataTime':new Date(1341849600000),'Value':null},{'DataTime':new Date(1341936000000),'Value':null},{'DataTime':new Date(1342108800000),'Value':null}]},{'DataTitle':'user2','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':11.35},{'DataTime':new Date(1341244800000),'Value':24.32},{'DataTime':new Date(1341331200000),'Value':22.71},{'DataTime':new Date(1341417600000),'Value':23.97},{'DataTime':new Date(1341504000000),'Value':42.77},{'DataTime':new Date(1341763200000),'Value':37.52},{'DataTime':new Date(1341849600000),'Value':null},{'DataTime':new Date(1341936000000),'Value':23.22},{'DataTime':new Date(1342108800000),'Value':19.79}]},{'DataTitle':'user3','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':36.16},{'DataTime':new Date(1341244800000),'Value':32.05},{'DataTime':new Date(1341331200000),'Value':39.56},{'DataTime':new Date(1341417600000),'Value':26.36},{'DataTime':new Date(1341504000000),'Value':30.36},{'DataTime':new Date(1341763200000),'Value':26.99},{'DataTime':new Date(1341849600000),'Value':29.86},{'DataTime':new Date(1341936000000),'Value':31.87},{'DataTime':new Date(1342108800000),'Value':null}]},{'DataTitle':'user4','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':null},{'DataTime':new Date(1341244800000),'Value':28.62},{'DataTime':new Date(1341331200000),'Value':33.82},{'DataTime':new Date(1341417600000),'Value':23.47},{'DataTime':new Date(1341504000000),'Value':36.35},{'DataTime':new Date(1341763200000),'Value':28.96},{'DataTime':new Date(1341849600000),'Value':34.94},{'DataTime':new Date(1341936000000),'Value':33.01},{'DataTime':new Date(1342108800000),'Value':null}]},{'DataTitle':'user5','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':null},{'DataTime':new Date(1341244800000),'Value':null},{'DataTime':new Date(1341331200000),'Value':null},{'DataTime':new Date(1341417600000),'Value':null},{'DataTime':new Date(1341504000000),'Value':null},{'DataTime':new Date(1341763200000),'Value':null},{'DataTime':new Date(1341849600000),'Value':null},{'DataTime':new Date(1341936000000),'Value':null},{'DataTime':new Date(1342108800000),'Value':943.47}]},{'DataTitle':'user6','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':24.22},{'DataTime':new Date(1341244800000),'Value':45.31},{'DataTime':new Date(1341331200000),'Value':43.51},{'DataTime':new Date(1341417600000),'Value':40.14},{'DataTime':new Date(1341504000000),'Value':41.42},{'DataTime':new Date(1341763200000),'Value':50.57},{'DataTime':new Date(1341849600000),'Value':45.68},{'DataTime':new Date(1341936000000),'Value':44.04},{'DataTime':new Date(1342108800000),'Value':null}]},{'DataTitle':'user7','DataList':[{'DataTime':new Date(1341072000000),'Value':null},{'DataTime':new Date(1341158400000),'Value':33.79},{'DataTime':new Date(1341244800000),'Value':0},{'DataTime':new Date(1341331200000),'Value':42.06},{'DataTime':new Date(1341417600000),'Value':36.14},{'DataTime':new Date(1341504000000),'Value':37.37},{'DataTime':new Date(1341763200000),'Value':51.88},{'DataTime':new Date(1341849600000),'Value':45.92},{'DataTime':new Date(1341936000000),'Value':51.55},{'DataTime':new Date(1342108800000),'Value':null}]}])")
showCheckBox('line1', line1JsonObj);

var line2JsonObj = eval("([{'DataTitle':'employee1','DataList':[{'DataTime':new Date(1341158400000),'Value':5},{'DataTime':new Date(1341244800000),'Value':5},{'DataTime':new Date(1341331200000),'Value':7},{'DataTime':new Date(1341417600000),'Value':23},{'DataTime':new Date(1341504000000),'Value':null},{'DataTime':new Date(1341763200000),'Value':104},{'DataTime':new Date(1341849600000),'Value':102},{'DataTime':new Date(1341936000000),'Value':null}]},{'DataTitle':'employee2','DataList':[{'DataTime':new Date(1341158400000),'Value':340},{'DataTime':new Date(1341244800000),'Value':401},{'DataTime':new Date(1341331200000),'Value':263},{'DataTime':new Date(1341417600000),'Value':null},{'DataTime':new Date(1341504000000),'Value':271},{'DataTime':new Date(1341763200000),'Value':402},{'DataTime':new Date(1341849600000),'Value':417},{'DataTime':new Date(1341936000000),'Value':90}]}])")

showCheckBox('line2', line2JsonObj);
var line3JsonObj = eval("([{'DataTitle':'trump','DataList':[{'DataTime':new Date(1341158400000),'Value':28.11},{'DataTime':new Date(1341244800000),'Value':34.6},{'DataTime':new Date(1341331200000),'Value':37.68},{'DataTime':new Date(1341417600000),'Value':30.25},{'DataTime':new Date(1341504000000),'Value':40.36},{'DataTime':new Date(1341763200000),'Value':41.71},{'DataTime':new Date(1341849600000),'Value':41.69},{'DataTime':new Date(1341936000000),'Value':37.64},{'DataTime':new Date(1342108800000),'Value':481.63}]}])")

showCheckBox('line3', line3JsonObj);
</script>
</body>
</html>


显然其中最关键为showCheckBox(canvasId, jsonResult)函数，想必从函参名以及示例中代码大家能猜出，函参分别表示要绘制区域canvas名称和Json对象

下篇将详细介绍该函数
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航