数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。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. XSS 和 CSRF 攻击

    web安全中有很多种攻击手段,除了SQL注入外,比较常见的还有 XSS 和 CSRF等 一.XSS(Cross Site Scripting)跨站脚本 XSS其实就是Html的注入问题,攻击者的输入没 ...

  2. .net4.0注册到IIS ，重新注册IIS ，iis注册

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  3. 【循序渐进学Python】5.Python常用流程控制及其他语句

    1. 赋值语句常用技巧 通过序列解包(sequence unpacking)可以将多个值的序列解开,让后一一放置到变量的序列中.解包的序列中的元素必须和等号左边变量数量一致.如下: values = ...

  4. WPF 中获取DataGrid 模板列中控件的对像

    WPF 中获取DataGrid 模板列中控件的对像 #region 当前选定行的TextBox获得焦点 /// <summary> /// 当前选定行的TextBox获得焦点 /// &l ...

  5. 优化win2d实现的萤火虫粒子效果

    前几天我发了个技术博客,告诉大家怎样用Win2D 画萤火虫动画 . 那种绘制萤火虫的方式虽然画质高,但是性能不好,萤火虫数量超过50就可以感受到帧数下降. 我今天想到了一种牺牲画质提升性能的绘制方式, ...

  6. 刚刚开通博客，分享Asp.Net的GridView的基本用法

    包含有 数据的编辑,删除, 标题的添加,自定义分页,高亮显示鼠标所在,以及数据不足时添加空行 aspx页面代码 <asp:GridView ID="GridView1" ru ...

  7. 造完美的go开发环境

    http://www.cnblogs.com/qgymje/p/3912259.html   这篇原来是给公司里使用go开发的交流用的,主要是工具的安装,用markdown写的,发布了内部gitlab ...

  8. php5.6-Apache2.4-mysql5.6环境配置（win7_64位）

    ----------------------------------------------------- ★软件工具:(下载时注意下载相应版本,不同版本安装细节可能会有差异!!) 1>http ...

  9. Verilog学习笔记设计和验证篇(三)...............同步有限状态机的指导原则

    因为大多数的FPGA内部的触发器数目相当多,又加上独热码状态机(one hot code machine)的译码逻辑最为简单,所以在FPGA实现状态机时,往往采用独热码状态机(即每个状态只有一个寄存器 ...

  10. ASP.NET WebAPI 10 Action的选择(二)

    在本系列的第二篇简要的讲述了Action的选择条件本篇深入讲述一下Action选择的过程在上一篇中我们已经讲到了Controller的激活过程中已经说到了设置Controller的Controller ...