javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

 更新时间:2013年01月09日 15:33:55   作者:  
gRaphael是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript库,你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图,感兴趣的朋友可以了解下

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

相关文章

  • Maps Javascript

    Maps Javascript

    Maps Javascript...
    2007-01-01
  • 从零搭一个自用的前端脚手架的方法步骤

    从零搭一个自用的前端脚手架的方法步骤

    这篇文章主要介绍了从零搭一个自用的前端脚手架的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript中Window对象的属性及事件

    JavaScript中Window对象的属性及事件

    这篇文章主要介绍了JavaScript中Window对象的属性及事件 的相关资料,需要的朋友可以参考下
    2015-12-12
  • JS中Attr的用法详解

    JS中Attr的用法详解

    本文通过实例代码给大家介绍了js中的attr的用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-10-10
  • webpack配置打包后图片路径出错的解决

    webpack配置打包后图片路径出错的解决

    本篇文章主要介绍了webpack配置打包后图片路径出错的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JS实现动态无缝轮播

    JS实现动态无缝轮播

    这篇文章主要为大家详细介绍了JS实现动态无缝轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js表达式计算器代码

    js表达式计算器代码

    js表达式计算器代码,需要的朋友可以参考下。
    2011-10-10
  • javascript trie前缀树的示例

    javascript trie前缀树的示例

    这篇文章主要介绍了javascript trie单词查找树的示例,详细的介绍了trie的概念和实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JS Array创建及concat()split()slice()的使用方法

    JS Array创建及concat()split()slice()的使用方法

    下面小编就为大家带来一篇JS Array创建及concat()split()slice()的使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript中setInterval的用法总结

    JavaScript中setInterval的用法总结

    这篇文章主要是对JavaScript中setInterval的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论