数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作。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://julying.com/lab/raphael-js/docs/ (中文文档,感谢王子墨,他是Raphael.js国内的先行者)
https://developer.mozilla.org/en-US/docs/Web/SVG?redirectlocale=en-US&redirectslug=SVG
http://bl.ocks.org/mbostock/3750941
https://github.com/mbostock/d3/wiki
http://msdn.microsoft.com/en-us/library/bb263898(VS.85).aspx
相关推荐
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
raphael画流程图,实现可自定义缩放的效果。raphael画流程图,实现可自定义缩放的效果。
该 Demo 是使用 Raphael 制作中国省份地图,结合 jquery 实现一 些动态点击效果,并且使用扩展 Raphael 内核,可以动态调整地图画布的大 小,还实现了点击动态生成热点数据的图形开发,具体界面请参照工程包中 图...
使用raphael、jquery实现3D饼状图,鼠标点击划出等效果;
在使用raphael时,实现了双击所化的文字即可实现在线编辑的功能
用Raphael做的拓扑图,可以拖动,可以定义节点的坐标,链路等
raphael制作的吉林省地图。显示各个市区域、采用svg的矢量图技术。 附赠google吉林省地图
本人搜集很多资料独立开发的简单易学的raphael绘制柱状图模板,直接下载不需要任何配置就能本地跑起来,如果你正在学习raphael绘制柱状图,那么这是最好的一个范例;可以直接跨平台移植;
用Raphael做的拓扑图
该 Demo 是使用 Raphael 制作中国省份地图,结合 jquery 实现一 些动态点击效果,并且使用扩展 Raphael 内核,可以动态调整地图画布的大 小,还实现了点击动态生成箭头数据的开发,在一个画布上勾勒箭头图形,具 ...
用raphael 画柱状图,对于一组数据,在其上方显示该数据的名称和柱状图的各个数值
基于jquery+raphael实现(矩形+线条)可拖动的树形图或流程图,支持各种浏览器,适合需按树形结构展示的流程图,可用于工作流,以及信用分险行业的决策流展示
为了明天的工作,我跑遍了很多的网站,收集整理出来的柱状图
Raphael 简单的一个流程图,自己没事的时候瞎琢磨的。 大家以前讨论讨论
javascript raphael 画饼图,很方便 很简单 很容易懂!不用更改代码,直接写相应的html格式就好了!全自动生成饼图
使用raphael类库 进行绘制,可直接拿来运行
web 绘图 工具,raphael.可以在网页上绘图,功能非常强大!
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
NULL 博文链接:https://heiwado.iteye.com/blog/1985573
raphael是jquery的插件,可以轻松实现SVG能实现的功能,在WEB前端进行绘制图形,由于SVG只能在IE9以上使用,该插件兼容了IE9以下版本使用VML进行绘制,而且操作比SVG更加简单,是绘制WEB自定义图形的较好的插件,内...