频道栏目
首页 > 资讯 > JavaScript > 正文

gRaphael:JavaScript矢量图表库

16-12-21        来源:[db:作者]  
收藏   我要投稿

gRaphael:JavaScript矢量图表库:今天看到了gRaphael这个图标库,感觉图表交互功能挺炫酷的,csdn抽风图传不了,就不带图了。

gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的Javascript 库,基于强大的Raphael矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。

gRaphael 使用 SVG W3C 推荐标准和VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

创建静态饼图

// 在坐标(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
        });
    }
});
相关TAG标签
上一篇:微信小程序开发—小程序框架详解(一)
下一篇:HDFS集群安装配置
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站