After research js chart library, I determine to use RGraph:http://www.rgraph.net/
RGraph:是基于HTML5的canvas标签,采用Javascript画图的库。
优点:由于是采用js在客户端浏览器上画图,所以它能快速显示页面和减轻服务器负载。
缺点:浏览器必须支持HTML5,不能够保存图表。(I think it can be saved as picture easierly)
本文介绍一款名叫Rgraph的插件,使用RGraph统计图制作插件的话,可以将这个资源占用减少到接近零的程度,因为所有创建统计图的工作都是在客户端完成的,就像渲染HTML网页一样,服务器端只负责发送数据,不再负责统计图的生成与发送了,同时带宽的占用情况也大大得到了改善。
另外,由于统计图是依靠JavaScript来生成的,所以当你查看这个显示统计图的HTML网页的时候,该网页是可以为离线状态的了。
chart.gutter.right就是当前chart相对于你的canvas的左边距;
chart.hmargin.grouped就是每一组bar里面的每个柱形的间距。
Some document about RGraph:
1. HTML5 canvas图形库RGraph
http://www.cnblogs.com/shanyou/archive/2012/10/22/2734570.html
2. 加载JSON文件并在 RGraph 中以 柱状图来展示
http://blog.youkuaiyun.com/lowkeyway/article/details/7967649
3. RGraph统计图制作插件的使用方法
http://www.runqian.com.cn/archives/4010.html/
4. How to use JSON data
http://www.rgraph.net/docs/howto-json-data.html
Note :
1. Many browsers restrict JavaScript from accessing localfile system owing to security reasons. The JavaScript charts, when runninglocally, will not be able to access data provided as a URL. If you run thefiles from a server, it will run absolutely fine, though. When running locally,however, if you provide the data as string (using theData Stringmethod), it works fine.
2. For support for Internet Explorer < 9, you can useExcanvas, a canvas emulator; this is used in the examples bundledwith Flot. You just include the excanvas script like this:
<!--[if lte IE8]><script language="javascript"type="text/javascript"src="excanvas.min.js"></script><![endif]-->