数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。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
相关推荐
7. **优化和调整**：为了提高性能和用户体验，可以考虑对大量图形进行分批绘制，或者使用`animate()`函数实现平滑过渡效果。 通过Raphaël.js，开发者能够轻松创建出美观且交互性强的流程图，这对于教学、项目管理...
在"raphael画流程图"中，你可以利用Raphaël提供的API来创建和操作这些图形元素。首先，你需要在HTML中引入Raphaël库的脚本文件，然后创建一个绘图区域，通常是一个`<div>`元素。接着，你可以使用`Raphael paper`...
该 Demo 是使用 Raphael 制作中国省份地图，结合 jquery 实现一 些动态点击效果，并且使用扩展 Raphael 内核，可以动态调整地图画布的大 小，还实现了点击动态生成热点数据的图形开发，具体界面请参照工程包中 图...
今天我们将深入探讨如何使用`Raphael.js`来绘制柱状图。 `Raphael.js`库的核心在于其提供了一套丰富的API，允许开发者在HTML文档中创建、操作和管理矢量图形。这个库支持多种图形类型，包括矩形、圆形、线条、文本...
在使用jQuery和Raphael实现3D饼状图时，我们需要遵循以下步骤： 1. **引入库**：首先，在HTML文件（如text.html）中，我们需要引入jQuery和Raphael库的链接。这通常通过`<script>`标签完成，确保jQuery在Raphael...
本文将深入探讨如何利用Raphaël库实现双击文字后进行在线编辑的功能。 首先，理解Raphaël中的文字对象是关键。在Raphaël中，你可以通过`paper.text(x, y, text)`方法创建一个文本元素，其中`x`和`y`是文字的起始...
使用Raphael来制作拓扑图，可以实现动态交互、可缩放和自定义布局的功能。 在Raphael中创建拓扑图的关键步骤如下： 1. **初始化画布**：首先，你需要在HTML页面中创建一个div元素作为Raphael画布的容器，然后通过...
Raphael.js是一个强大的JavaScript库，专门用于在Web浏览器中创建矢量图形。它提供了一种在SVG（可缩放矢量图形）和VML（Vector Markup Language）之间无缝切换的方法，使得开发者能够在所有现代浏览器以及IE5.5及更...
在描述中提到的"Jquery Raphael 走势图"，指的是使用jQuery库与Raphael库结合来实现动态的图表展示，特别是用于呈现数据的趋势变化。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作。将...
用Raphael做的拓扑图，可以拖动，可以定义节点的坐标，链路等
此外，由于Raphaël支持自定义图形和动画，还可以实现动态的效果，如高亮选中区域、平滑过渡等。 总之，“raphael吉林省地图”项目展示了Raphaël库在创建互动式、高清晰度地图方面的强大能力，结合谷歌地图的资源...
在Raphaël中实现曲线图： - 准备数据：数据应包含时间轴上的点和对应的值。 - 创建路径：使用`raphael.path()`函数，通过计算每个点的坐标来构建SVG路径字符串。 - 添加轴：绘制x轴和y轴，同样包括刻度和标签。 ...
在Raphaël中，我们可以通过创建矩形并调整它们的大小和位置来实现柱状图的绘制。以下是一些关键步骤： 1. **初始化画布**：使用Raphaël.js库，你需要首先在HTML页面中创建一个元素，然后通过Raphaël的`paper`...
JavaScript Raphael 是一个强大的矢量图形库，它允许开发者在网页上创建复杂的图形，包括饼图。Raphael 使用SVG（Scalable Vector ...Raphael库还提供了许多其他图形和功能，如线图、柱状图等，可以进一步探索和学习。
该 Demo 是使用 Raphael 制作中国省份地图，结合 jquery 实现一 些动态点击效果，并且使用扩展 Raphael 内核，可以动态调整地图画布的大 小，还实现了点击动态生成箭头数据的开发，在一个画布上勾勒箭头图形，具 ...
用raphael 画柱状图，对于一组数据，在其上方显示该数据的名称和柱状图的各个数值
总的来说，这个Raphael流程图示例提供了一个全面的解决方案，不仅解决了在IE8上绘制矢量图形的问题，还实现了交互性和动态数据加载。对于那些需要在老旧浏览器上展示复杂图形和流程的开发者来说，这是一个非常有价值...
《raphaeljs_starter》是一本专注于RaphaelJS这一强大跨浏览器兼容的矢量图形库的教程书籍，由A. Krishnasagar编写，旨在帮助读者掌握如何轻松地创建交互式的2D图形和动画。本书由Packt Publishing出版，首次出版于...
"基于jquery+raphael实现的可拖动树形图"就是一个这样的解决方案，它结合了jQuery、Raphaël库，以及SVG技术来构建一个动态的、用户可操作的树状表示形式。下面我们将深入探讨这些技术及其在实现此项目中的应用。 1...
在"raphael绘制流程图"这个主题中，我们将探讨如何利用Raphaël库来制作动态的、具有分支的流程图。 首先，流程图是一种图形表示方法，常用于描绘工作流程或系统操作过程。它们由各种形状（如矩形、菱形、椭圆等）...