- 时间:2021-07-24 23:57 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
[b]gRaphael [/b]是一个致力于帮助开发人员在网页中绘制各种精美图表的 [b]Javascript[/b] 库,基于强大的[b]Raphael[/b] 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。
[b]gRaphael[/b] 使用 SVG W3C 推荐标准和[b]VML[/b] 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
[img]http://files.jb51.net/file_images/article/201301/20130109151928118.jpg[/img]
[b]使用方法[/b]:在页面中引入 raphael.js,g.raphael.js 文件,并根据需要引入 g.line.js(曲线图),g.bar.js(条形图),g.dot.js(点图)和 g.pie.js(饼图)文件,然后根据提供的方法即可创建出你想要的精美图表,下面是两个简单示例。
[b]创建静态饼图[/b]
只需要两行代码即可,示例代码:
[url=http://xiazai.jb51.net/201301/yuanma/raphael_jb51.rar]源码下载[/url]
[b]创建交互饼图[/b]
结合 hover 和 click 事件以及动画方法,你就可以创建精美的交互式饼图,示例代码:
[url=http://xiazai.jb51.net/201301/yuanma/raphael_jb51.rar]源码下载[/url]
gRaphael 官方网站地址:http://g.raphaeljs.com/
gRaphael 英文参考文档:http://g.raphaeljs.com/reference.html
Raphael 官方网站地址:http://raphaeljs.com
Raphael 英文参考文档:http://raphaeljs.com/reference.html
Raphael 中文帮助文档:http://julying.com/lab/raphael-js/docs/
Raphael 新手入门教程:An Introduction to the Raphael JS Library
微信版

扫一扫进微信版
返回顶部