数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。Web上的各种图形（饼状图，柱状图等）一直被flash所垄断，随着HTML5的发展，SVG和Canvas也逐渐走上舞台。这不，产品要求跨平台，这次不能使用flash。考虑到第一次接触，开发周期较短，评估后决定使用Raphael.js。

Raphael，意为拉斐尔（姓氏），另外拉斐尔也是意大利画家、建筑学家。Raphael.js 作者是 Dmitry Baranovskiy ，请记住该人，他应该和 John Resig 一样绽放光芒。该库已经被合并至 Sencha，他本人也已加入 Sencha 团队。

我做的这个叫做 “商品来源去向” 分析，如图

数据由后台提供

1. 接口我来约定（早期由我尝试开发）

2. 各图的位置｜大小｜偏移等固定 / 商品名｜百分比变化

3. 点击来源图，会出现箭头指向去向

开发时碰到一些问题

1. svg是谁最后append，那么谁就在最上面，把下面的盖住了。Raphael没有insert方法，指定层级

2. 需要复习和补习一些数学，线性代数（矩阵）等知识

3. 需要学习SVG，VML相关技术

4. ......

源码及DEMO：http://snandy.github.io/lib/graph/raphael/ ，特别感谢下 nick ，他正在做这方面的研究，开发过程中总是向他请教。

相关：

http://raphaeljs.com/

http://julying.com/lab/raphael-js/docs/ （中文文档，感谢王子墨，他是Raphael.js国内的先行者）

http://www.w3.org/TR/SVG/

https://developer.mozilla.org/en-US/docs/Web/SVG?redirectlocale=en-US&redirectslug=SVG

http://infogr.am/beta/

http://bl.ocks.org/mbostock/3750941

https://github.com/mbostock/d3/wiki

http://msdn.microsoft.com/en-us/library/bb263898(VS.85).aspx

Raphael实现商品来源去向图的更多相关文章

  1. 使用 QuickBI 搭建酷炫可视化分析

    随着各行各业大数据的渗透,BI 类数据分析需求与日俱增,如何让可视化更好的展现数据的价值,是 BI 类产品一直努力的方向.对此国内外的BI产品都有自己的方法,如国外大牌的 PowerBI.Tablea ...

  2. 分布式爬虫系统设计、实现与实战：爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储

    http://blog.51cto.com/xpleaf/2093952 1 概述 在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HB ...

  3. 微擎 人人商城 对接京东vop 对接京东商品，同步商品 地址，库存，价格，上下架等。（二） 设置后台管理界面

    昨天提到了,由于vop商品池未开通,故对接工作只能暂缓,现在要做一个专门针对vop商品的后台管理, 老规矩,先上设计链路图 因为后台本来就是有比较完善的商品管理系统, 所以我们只是针对vop 进行简单 ...

  4. DDD 领域驱动设计-商品建模之路

    最近在做电商业务中,有关商品业务改版的一些东西,后端的架构设计采用现在很流行的微服务,有关微服务的简单概念: 微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独 ...

  5. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  6. Java开源生鲜电商平台-商品表的设计(源码可下载）

    Java开源生鲜电商平台-商品表的设计(源码可下载) 任何一个电商,无论是B2C还是B2B的电商,商品表的设计关系到整个系统架构的核心. 1. 商品基本信息表:用单词:goods做为商品表 2. 商品 ...

  7. [Web][DreamweaverCS6][高中同学毕业分布去向网站+服务器上挂载]一、安装与破解DreamweaverCS6+基本规划

    DreamweaverCS6安装与破解 一.背景介绍:同学毕业分布图项目计划简介 哎哎哎,炸么说呢,对于Web前端设计来说,纯手撕html部分代码实在是难受. 对于想做地图这类的就“必须”用这个老工具 ...

  8. 42、生鲜电商平台-商品的spu和sku数据结构设计与架构

    说明:Java开源生鲜电商平台中商品的spu和sku数据结构设计与架构,包括数据库图标与架构分析. 1. 先说明几个概念. 电商网站采用在商品模块,常采用spu+sku的数据结构算法,这种算法可以将商 ...

  9. Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战

    Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...

随机推荐

  1. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. javaScript一些函数包括调试方法（二）

    Number():设法把括号里面的值,转换成一个数,转换不了为数字的话,就返回NaN. 注意:Number()函数,会拒绝任何包含,非数字字符的字符串(阿拉伯数字.一个有效的小数位.+.-符号是允许的 ...

  3. P6 EPPM手动安装指南（Oracle数据库）(一)

    P6 EPPM手动安装指南(Oracle数据库) P6 EPPM Manual Installation Guide (Oracle Database) 1.      内容... 1 1.1.    ...

  4. 重构第31天 使用多态替代条件语句( Replace conditional with Polymorphism)

    理解:本文中的”使用多态代替条件判断”是指如果你需要检查对象的类型或者根据类型执行一些操作时,一种很好的办法就是将算法封装到类中,并利用多态性进行抽象调用. 详解:本文展示了面向对象编程的基础之一“多 ...

  5. WinForm公共控件

    公共控件:1.Button:按钮 用户点击时触发事件 行为属性 Enabled -是否启用 Visible -是否隐藏2.CheckBox .CheckListBox - 复选框 复选框组 3.Com ...

  6. 若干道Swift面试题

    1,说说你认识的Swift是什么?Swift是苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C共同运行于MAC OS和iOS平台,用于搭建基于苹果平台的应用程序. ...

  7. MyBatis中的特殊符号[20160713]

    今天中午回到工位已经是12:20多了,没有时间睡觉了,本想着还能提前开始,结果看了点新闻之后,又是12:40了,所以新闻坚决不能看,执行力. 今天主要记录一下MyBatis中的特殊符号的问题,这个问题 ...

  8. 蒙特卡洛树搜索算法（UCT）: 一个程序猿进化的故事

    前言: 本文是根据的文章Introduction to Monte Carlo Tree Search by Jeff Bradberry所写. Jeff Bradberry还提供了一整套的例子,用p ...

  9. Webform（简单控件、复合控件）

    一.简单控件: 1.label控件 <asp:Label ID="Label1" runat="server" Text="账 号:" ...

  10. ArrayList 与 LinkedList

    ArrayList:数组结构,插入删除的效率低,查询的效率较高. LinkedList:链接数据结构,插入删除的效率较高,查询的效率低. 两者的使用 ArrayList:适合用作添加数据,做查询. L ...