js矢量图类库:Raphaël—JavaScript Library

官方网址:http://raphaeljs.com/

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

 

最近在做一个关于客户与品牌,客户与代理关系的展示,由于用二维表展示不是很直观,所以就想做个比较直观的,在网上搜到了Raphael,就小试了一下,感觉不错;

下面是试用结果截图:

image

image

源码如下:

 

var data = {"customer": "方正电子","brands":[{ "brand": "经略广告" },{ "brand": "文韬采编" },{ "brand": "飞腾创艺" },{ "brand": "畅享全媒体" }]};var r = Raphael("holder", 500, 500);angle = 0;var interval = 36;if (data != null && data.brands.length > 0) {if (data.brands.length < 13) {interval = 360 / data.brands.length;}}var centerX = 250;var centerY = 250;var mc = Raphael.getColor();mc = Raphael.getColor();// mc = Raphael.getColor();var index = 0;while (angle < 360) {var color = Raphael.getColor();(function (t, c) {r.circle(centerX, 400, 50).attr({ stroke: c, fill: c, transform: t, "fill-opacity": .4 }).click(function () {}).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});})("r" + angle + " " + centerX + " " + centerY + "", color);var path_transform = "r" + angle + " " + centerX + " " + centerY + "";r.path("M" + centerX + "," + centerY + "L" + centerX + ",350z").attr({ stroke: mc, fill: mc, transform: path_transform + "," + mc, "fill-opacity": .4 });var brandName = r.text(centerX, 400, data.brands[index].brand).attr({font: '16px Arial',fill: '#000',transform: path_transform + "," + mc}).toFront();brandName.rotate(0 - angle, brandName.x, brandName.y);index++;angle += interval;}var s = r.set();s.push(r.circle(centerX, centerY, 60));s.attr({ stroke: mc, fill: mc }).mouseover(function () {this.animate({ "fill-opacity": 1.75 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": 1 }, 500);});s.push(r.text(centerX, centerY, data.customer).attr({ font: '16px Arial', fill: '#fff' }));
var data = {"customer": "联想集团","agents":[{ "agent": "中关村在线" },{ "agent": "苏宁电器" },{ "agent": "国美电器" },{ "agent": "京东商城" },{ "agent": "淘宝商城" }]};var containerW = 500;var containerH = 500;var r = Raphael("holder", containerW, containerH);var boxW = 70; //方框宽度var boxH = 30;  //方框高度var subBoxY = 150; //代理框的y坐标var paddingY = 10; //图的内边距 var angle = 0;var interval = 10;if (data != null && data.agents.length > 0) {if ((parseInt(boxW, 10) * data.agents.length) < containerW) {//间隔=(containerW-代理个数*boxW)/代理个数+1)interval = ((parseInt(containerW, 10) - (parseInt(boxW, 10) * data.agents.length)) / (data.agents.length + 1));}}var mainColor = Raphael.getColor();mainColor = Raphael.getColor();//画当前客户框var mainBoxX = ((parseInt(containerW, 10) - parseInt(boxW, 10)) / 2);var mainBox = r.rect(mainBoxX, paddingY, boxW, boxH).attr({ stroke: mainColor, fill: mainColor, "fill-opacity": .4 }).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});//写客户名称r.text(mainBoxX+(boxW/2), paddingY+(boxH/2), data.customer).attr({ font: '12px Arial', fill: '#fff' })//画中间横线var mX = (interval + ((parseInt(boxW, 10) / 2)));var mY = ((parseInt(subBoxY, 10) - parseInt(paddingY, 10) - parseInt(boxH, 10)) / 2) + parseInt(paddingY, 10) + parseInt(boxH, 10);r.path(Raphael.format("M{0},{1}L{2},{3}z",mX,mY,(containerW - mX),mY));//画当前客户和横线的连接线r.path(Raphael.format("M{0},{1}L{2},{3}z",(parseInt(containerW, 10)/2),mY,(parseInt(containerW, 10) / 2),parseInt(paddingY, 10) + parseInt(boxH, 10)));angle = interval;$.each(data.agents, function (i) {//生成多个代理框var color = Raphael.getColor();var box1 = r.rect(angle, subBoxY, boxW, boxH).attr({ stroke: color, fill: color, "fill-opacity": .4 }).click(function () {}).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});//画线r.path(Raphael.format("M{0},{1}L{2},{3}z",(angle+(boxW/2)),subBoxY,(angle+(boxW/2)),mY));//写代理名称r.text(angle + (boxW / 2), subBoxY + (boxH / 2), data.agents[i].agent).attr({ font: '12px Arial', fill: '#fff' })angle += parseInt(boxW, 10) + interval;});

转载于:https://www.cnblogs.com/HeroBeast/archive/2011/12/20/2295021.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/434720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sklearn 绘制roc曲线_如何用Tensorflow和scikit-learn绘制ROC曲线?

我试图从tensorflow提供的CIFAR-10示例的修改版本绘制ROC曲线。它现在为2类&#xff0c;而不是10如何用Tensorflow和scikit-learn绘制ROC曲线&#xff1f;的网络的输出被称为logits并采取以下形式&#xff1a;[[-2.57313061 2.57966399] [0.04221377 -0.04033273] [-1.42880082…

Linux的I2C 设备驱动 -- mini2440 上i2c接口触摸屏驱动

本篇记录在友善之臂 mini2440 平台上挂载I2C接口触摸屏的驱动开发过程。内核版本linux-2.6.32.2, 平台是ARM9 S3C2440I2C接口的触摸屏如上篇 Linux的I2C驱动体系结构讲述http://www.lupaworld.com/273398/viewspace-204237.html要挂载新的I2C设备&#xff0c;需要实现3部分&…

十六进制字符串转整形

System.Convert.ToInt32( "字符串 ",16); 转载于:https://www.cnblogs.com/dashi/archive/2011/12/22/4034737.html

gridview databind 会导致页面刷新马_Innodb批量页面刷盘情况下的quot;两次写quot;

//Innodb批量页面刷盘情况下的"两次写"//之前的文章中&#xff0c;我们介绍过innodb的两次写特性&#xff0c;这里给出链接&#xff1a;InnoDB的两次写特性今天我们完善一下这部分的内容。我们知道innodb数据页的默认大小是16kb&#xff0c;磁盘和内存通过数据页进行…

linux内核I2C子系统学习(一)

这部分准备分几个部分进行分析总结 因为I2C的通信肯定至少要有2个芯片完成&#xff0c;所以它的驱动是由2大部分组成&#xff1a;主芯片的i2c的驱动从芯片的i2c的驱动 注&#xff1a;万一选的都不支持咋办&#xff1f;&#xff1f;&#xff1f;&#xff08;惨了&#xff0c;只能…

【转】excel表格导出集锦repeater实用,和普通用法

【http://www.cnblogs.com/s-y-l/archive/2011/12/23/2299008.html】下面导出excel主要解决repeater产生乱码的问题publicvoid CreateExcel(DataSet ds,string typeid,string FileName) { HttpResponse resp; resp Page.Response; …

什么是流量攻击? 流量攻击怎么处理?

由于DDoS攻击往往采取合法的数据请求技术&#xff0c;再加上傀儡机器&#xff0c;造成DDoS攻击成为最难防御的网络攻击之一。据美国最新的安全损失调查报告&#xff0c;DDoS攻击所造成的经济损失已经跃居第一。 传统的网络设备和周边安全技术&#xff0c;例如防火墙和IDSs(Intr…

django批量修改table_django-formset实现数据表的批量操作

什么是formset我们知道forms组件是用来做表单验证&#xff0c;更准确一点说&#xff0c;forms组件是用来做数据库表中一行记录的验证。有forms组件不同&#xff0c;formset是同科同时验证表中的多行记录&#xff0c;即formset是做表单批量验证的组件。批量添加首先要实例化form…

linux内核I2C子系统学习(二)

下面具体分析如何写第一部分&#xff1a;主控芯片的i2c驱动分为2个步骤&#xff1a;写总线驱动&#xff1a;选了个主控芯片&#xff0c;比如&#xff1a;S3C8900&#xff08;自己瞎编的芯片&#xff09;在driver/i2c/busses/i2c-s3c2410.c中没有找到这个芯片的I2C支持(总线驱动…

20111228_给窗体设置默认输入法

//给窗体设置默认输入法 //新建一个窗体类ImeForm&#xff0c;设置Form1:ImeForm public class ImeForm:System.Windows.Forms.Form { [DllImport("imm32.dll")] public static extern IntPtr ImmGetContext(IntPtr hWnd); [DllImport("imm32.dll")] publ…

efishell无法开机shell_开机出现efi shell卡住不动了解决方法全集

[文章导读] 最近有很多网友问我&#xff0c;为什么我的电脑开机后出现efi shell提示进不了系统&#xff0c;开机出现efi shell提示时&#xff0c;一般是由于第一启动项设置的是efi shell启动的&#xff0c;有的网友告诉我&#xff0c;我第一启动项明明设置的是硬盘启动&#xf…

linux内核I2C子系统学习(三)

写设备驱动&#xff1a;四部曲&#xff1a;构建i2c_driver注册i2c_driver构建i2c_client &#xff08; 第一种方法&#xff1a;注册字符设备驱动、第二种方法&#xff1a;通过板文件的i2c_board_info填充&#xff0c;然后注册&#xff09; 注销i2c_driver 具体如下&#xff1a;…

Delphi环境中编写调用DLL的方法和技巧

Delphi环境中编写调用DLL的方法和技巧第一章 为什么要使用动态链接库&#xff08;DLL&#xff09; top 提起DLL您一定不会陌生&#xff0c;在Windows中有着大量的以DLL为后缀的文件&#xff0c;它们是保证Windows正常运行和维护升级的重要保证。&#xff08;举个例子&#xff0…

信道容量受哪三个要素_影响信道容量的主要因素有哪些

匿名用户 1级 2015-03-23 回答 化。编码器输出的数字序列与到译码器输入的数字序列之间的关系,通常用多端口网络的转移概率作为编码信道的数学模型进行描述。 三、信道的数学模型 (一)调制信道模型 调制信道模型描述的是调制信道的输出信号和输入信号之间的数学关系。调制信道…

实例解析linux内核I2C体系结构(1)

作者&#xff1a;刘洪涛,华清远见嵌入式学院讲师。 一、概述 谈到在linux系统下编写I2C驱动&#xff0c;目前主要有两种方式&#xff0c;一种是把I2C设备当作一个普通的字符设备来处理&#xff0c;另一种是利用linux I2C驱动体系结构来完成。下面比较下这两种驱动。 第一种方…

git hook分支_编写一个git post-receive hook来处理特定的分支

来自pauljz的答案适用于某些git钩子&#xff0c;如pre-push&#xff0c;但pre-commit无法访问这些变量oldrev newrev refname所以我创建了这个替代版本&#xff0c;适用于预提交&#xff0c;或者真正和钩子。这是一个pre-commit挂钩&#xff0c;如果我们不在master分支上&#…

★ Flex を使って Scalable Vector Graphics とビットマップを描画する

from: http://www.ibm.com/developerworks/jp/web/library/wa-svgbitmap/Flex を使って Scalable Vector Graphics とビットマップを描画するSandeep Malik, Tech Lead, IBM 概要&#xff1a; SVG (Scalable Vector Graphics) はグラフィックスの領域で最も重要な技術の 1 つで…

g5420 win7集显驱动_台式机装WIN7?雷我已经趟完了

注&#xff1a;本文只用于PC爱好者交流测试&#xff0c;文中所有测试版系统均只用于测试&#xff0c;不得用于个人或商业用途。Windows全面更新至win10版本后&#xff0c;改装Win7系统逐渐变得越来越艰难。厂商BIOS中逐渐舍弃了原始界面改为图形化&#xff0c;传统Legacy模式无…

实例解析linux内核I2C体系结构(2)

作者&#xff1a;刘洪涛,华清远见嵌入式学院讲师。 四、在内核里写i2c设备驱动的两种方式 前文介绍了利用/dev/i2c-0在应用层完成对i2c设备的操作&#xff0c;但很多时候我们还是习惯为i2c设备在内核层编写驱动程序。目前内核支持两种编写i2c驱动程序的方式。下面分别介绍这两种…

制作完整的java可执行文件

帮教务处的老师做了一个小软件&#xff0c;所以学习了一下制作java可执行文件&#xff0c;在此分享一下。 说明&#xff1a;因为是做完很长一段时间后再截的图&#xff0c;可能有点纰漏&#xff0c;大体应该没什么问题。 我的eclipse工程文件目录: bin | images&#xff08;放图…