数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。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. 收集数据至泛型Dictionary

    开发时,我们经常使用到泛型,不管是List<T>,还是Dictionary<T,V>,下面Insus.NET在测试一些功能,当使用到一些临时数据集时,有好几种方法把数据收集至D ...

  2. 【JavaScript回顾】对象创建的几种模式

    组合使用构造函数模式和原型模式 创建自定义类型的常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实 例属性,而原型模式用于定义方法和共享的属性.结果,每个实例都会有自己的一份实例属性 ...

  3. 【循序渐进学Python】1. Python基础知识

    1. Python安装和配置 首先需要到Python的官方网站(http://www.python.org/getit/) 下载安装包,现在Python的发行版分为兼容之前Python程序的Pytho ...

  4. vs 2012 设置选中的引用高亮 颜色

    一个简单的小技巧,不用插件也可以做到,vs 2012 设置选中的引用高亮 颜色 .vs 默认的单击引用的变量时,显示的颜色是灰色,基本看不出来,所有特意抽空捣鼓了下 还真让我给找出来 工具==> ...

  5. edittext 监听内容变化

    给EditText追加ChangedListener可以监听EditText内容变化的监听 如图是效果图  类似于过滤的一种实现 1  布局也就是一个EditText,当EditText内容发生变化时 ...

  6. yii2时间日期控件的使用[转]

    注:原文http://www.manks.top/yii2-datetimepicker.html 有更改 1.安装 进入到项目文件中D:\phpStudy\WWW\yii2blog    使用cmd ...

  7. jquery重置html form

    很多时候在ajax提交或者对话框隐藏之后,我们希望重置默认值以便下次打开对话框时保持干净. 因为jquery选择器返回的是list,并且没有对此提供reset方法,所以需要针对单个元素进行reset. ...

  8. mysql=null的优雅解决方法

    对于不是采用所有字段都是not null的mysql表设计而言,mysql提供了一个<=>操作符. 在oracle中我们的处理方式通常类似: where a = #{var} or #{v ...

  9. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  10. 详解JavaScript函数模式

    JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展.在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建 ...