javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库，基于强大的 Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。
gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，是跨浏览器的矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
使用方法：在页面中引入 raphael.js，g.raphael.js 文件，并根据需要引入 g.line.js（曲线图），g.bar.js（条形图），g.dot.js（点图）和 g.pie.js（饼图）文件，然后根据提供的方法即可创建出你想要的精美图表，下面是两个简单示例。
创建静态饼图只需要两行代码即可，示例代码：
// 在坐标（10,50）创建 600 × 450 的画布
var r = Raphael(10, 50, 600, 450);
// 创建中心坐标为（320, 200）的饼图，半径为150，数据为 [55, 20, 13, 32, 5, 1, 2, 10]的饼图
r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);
效果演示及完整源码下载：
源码下载
创建交互饼图
结合 hover 和 click 事件以及动画方法，你就可以创建精美的交互式饼图，示例代码：
// 在坐标（10,50）创建 640 × 480 的画布
var r = Raphael(10, 50, 640, 480);
// 创建中心坐标为（320, 240）的饼图，半径为100，数据为[55, 20, 13, 32, 5, 1, 2, 10]的饼图
pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], {
legend: ["%%.%% - Enterprise Users", "IE Users"],
legendpos: "west",
href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]
});
// 在坐标（320, 100）绘制文字
r.text(320, 100, "Interactive Pie Chart").attr({
font: "20px sans-serif"
});
// 给饼图添加 hover 事件
pie.hover(function() {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);
if(this.label) {
this.label[0].stop();
this.label[0].attr({
r: 7.5
});
this.label[1].attr({
"font-weight": 800
});
}
}, function() {
this.sector.animate({
transform: 's1 1 ' + this.cx + ' ' + this.cy
}, 500, "bounce");
// 添加动画效果
if(this.label) {
this.label[0].animate({
r: 5
}, 500, "bounce");
this.label[1].attr({
"font-weight": 400
});
}
});
效果演示及完整源码下载：
源码下载
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
相关文章
在web页面中，我们经常需要通过修改样式（style）来达到更好的用户体验，需要的朋友可以参考下。2010-10-10
本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
这篇文章主要介绍了JS获取日期的方法,结合具体实例分析了javascript计算昨天,今天,明天,前n天,后n天日期及对应的星期几实现技巧,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JS+CSS实现简易实用的滑动门菜单效果,涉及JavaScript鼠标事件及页面元素遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出，想通过 getElementsByName 处理后再输出相应的内容。用原生的 javascript怎样可以处理呢？2010-07-07
这篇文章主要为大家介绍了Ajv format校验使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要给大家介绍了关于js如何监听input输入事件及使用防抖封装函数处理方法的相关资料,最近有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了小程序文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
IFrame高度的设置问题一直都是前端的噩梦而且还要兼容各主流浏览器更是难上加难了，下面与大家分享下一个不错的技巧，感兴趣的你可以参考下哈2013-06-06
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数中的this，感兴趣的朋友一起看看吧2018-02-02
最新评论