数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。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. 安装win8、ubuntu双系统的过程

    弄了一个晚上,终于完成了,之前是用虚拟机的,但是觉得不带劲,并且折腾来时菜鸟变大神的捷径,虽然现在还一直在爬坑.继续奋斗吧...王小二 首先是看 ubuntu 百度贴吧的安装帖子(http://tie ...

  2. AssemblyInfo文件

    程序生成版本信息 AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些参数 请看以下具体说明: //备注:  [assembly:AssemblyDescription ...

  3. 老外还是喜欢Ubuntu的

    有图为证? 开效果应该是Ubuntu的界面了,当然,不知是不是backtrack. 这里面的Hacker用的电脑都不是水果.是没有给钱么.

  4. linux下socket编程

    相关结构 //下边这两个结构定义在<sys/types.h>里 //一般的地址结构,只能用于覆盖(把其他地址转换为此类型),且只能引用该地址的sa_family字段 struct sock ...

  5. 切换到percona server各种问题

    这两天把七八台服务器全部切换到了percona server,相关注意事项如下: 1.JDBC报ERROR 1862 (HY000): Your password has expired. To lo ...

  6. 在sap系统设置纸张打印格式(针式打印机)

    在sap做一个打印报表,要先设置一个纸张打印格式,下面以工厂中常用来打印的针孔纸为例,在sap设置该纸张的打印格式,以用于报表: 1.运行事务代码SPAD:选择工具栏上的[完全管理]按钮——>选 ...

  7. ArcGIS快捷键导出

    在以前的文章中说过怎样恢复ArcGIS默认界面.今天同事的电脑用ArcMap打开数据后,移动或缩放数据时莫名的闪动. 于是使用排除法来查找原因:(1)先以为是数据的原因,换个数据还是有问题:(2)后以 ...

  8. SharePoint 2013开发环境准备一些小事项

    开发慢慢向着SharePoint 2013迁移,环境也开始慢慢准备起来了.由于FAST Search的集成,和缓存服务的加入,SharePoint 2013对开发机器要求的不是一般的高.这里介绍一下如 ...

  9. iOS设计模式之原型模式

    原型模式 基本理解 原型模式(Prototype),用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式其实就是从一个对象再创建另外一个可定制的对象,而且不需要知道任何创建的细节 ...

  10. IOS 网络浅析 （二 网络异步请求）

    学习网络,无论是C/S还是B/S首要的当然是向服务器发送请求,并得到响应,么有请求没有响应,那就不叫做网络了. 这边文章向大家介绍境界一下网路异步请求. *大家不要觉得我写的知识点太零散,我只是想给大 ...