`
weitao1026
  • 浏览: 1047983 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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(饼图)文件,然后根据提供的方法即可创建出你想要的精美图表,下面是两个简单示例。

  创建静态饼图

  只需要两行代码即可,示例代码:

1
2
3
4
// 在坐标(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 事件以及动画方法,你就可以创建精美的交互式饼图,示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 在坐标(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

分享到:
评论

相关推荐

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

    总的来说,gRaphael作为一个功能强大的JavaScript矢量图表库,不仅操作简便,而且提供了丰富的图表类型和定制化选项,使得在Web开发中实现图形化数据展示变得更加高效和直观。无论是静态还是动态交互式的图表,...

    前端项目-graphael.zip

    总之,Graphael 是一个强大的前端工具,结合Raphaël库,能够帮助开发者轻松实现网页上的矢量图表绘制,无论是在数据可视化还是界面设计方面,都能提供高效的解决方案。通过深入研究`g.raphael-master`中的内容,...

    iOS游戏应用源代码——tomaszj-graphael-objc-499a2bf.zip

    二、图形库——Graphael “Graphael”可能是该游戏中使用的图形库,它可能是一个用于绘制2D图形的框架。在iOS游戏开发中,图形库是至关重要的,用于创建游戏场景、角色和动画效果。开发者可以利用这类库实现复杂的...

    GraphaelReactTest:测试 Graphael 和 React

    通过这个项目,开发者可以学习到如何将传统的图表库集成到现代前端框架中,从而在React应用中实现复杂的数据可视化。这对于那些希望在React项目中使用图形库,尤其是对性能和交互性有较高要求的项目,是非常有价值的...

    graphael-rails:拉斐尔和石墨的宝石

    graphael护栏 (g)raphael 的 Gem,包括 graphael 和 raphael 作为子模块。 要在 Rails 应用程序中使用它,请将它包含在您的 gemfile 中,并需要 raphael/raphael.js 以及您在 css 文件中需要的任何 g.raphael 图。 ...

    TrollPoll:使用 Texts、Twilio、Pusher 进行实时投票

    ##巨魔民意调查 Poll Everywhere ... 单页应用程序 (SPA),广泛使用 Backbone.js、jQuery 和 RoR。... 整合了 Pusher API,用于从服务器进行实时更新。 使用 gRaphael(为甜甜圈定制)的交互式图表。 自定义 CSS 和设计。

    ProgrammingAssignments:我为硅谷公司解决的编程作业任务以展示技能

    编程作业我为硅谷公司解决的编程任务/任务以展示技能请先阅读“编程作业-answers.pdf ”文档。 对于 gRaphael/Visual 任务,请检查: 任务 1 (PSD 到 HTML5/CSS) 任务 2 (折线图绘制) 任务 3 (饼图绘制)

Global site tag (gtag.js) - Google Analytics