概述

矢量绘图解决方案

前端生成图形方面，有用Applet、ActiveX（这两个都不是什么好东西），Flash等等，但是现在，我们有纯文本的更好的选择。

1、VML

Vector Markup Language（矢量标记语言）是一种XML语言，用于绘制矢量图形。1998年VML建议书由微软、Macromedia等向W3C提出审核。VML 遭到拒绝，因为Adobe、Sun等提出了PGML计划书。这两套标准后来合并成更具潜力的SVG。

2、SVG

可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。在W3C自己看来，SVG的竞争对手应该主要是Flash，它的标准被开源，并且支持浏览器传统的DOM。

3、HTML5 Canvas

Canvas标签是HTML的标签之一，允许脚本动态渲染图像。开始由苹果推出，Safari率先支持，IE上对Canvas的支持可以通过诸多JavaScript库实现。HTML5大势所趋，IE9也支持了Canvas。
Canvas存在一个基于JavaScript的绘图API，这是和SVG、VML的不同之处，但是基于JavaScript就意味着通常对于DOM的操作不像SVG、VML那么容易
HTML5 Canvas也可以用来做数据可视化，但是Canvas不是DOM的一部分，因此屏幕阅读器无法访问。你需要在标签中创建一个备用访问内容。你需要采用额外的措施将内容映射到画布上，这样屏幕阅读器才能知道元素之间的相互作用。所以一个HTML5 Canvas需要维护双倍的数据。
IE9之前的浏览器都不支持元素

4、Pure CSS

使用CSS创建的普通矩形和圆形等形状，可以创建一些简单的图表。
因为CSS创建矩形是非常强大的，只使用CSS来制作图表，最好的一个示例就是创建水平或垂直的矩形图表。

CSS 和 SVG 对比

个人仍然喜欢使用SVG创建动画，虽然CSS中有更好的动画功能。我喜欢这个的原因是，SVG可以将文本和效果封装为一个图形，这样可以复制，也可以降级处理，更可以重用。更为重要的是，SVG的更具可读性，更具语义，也可以完全选择。
SVG是XML，SVG标记使用类似于HTML元素标签，但其用于创建图形形状更加灵活，更加强大。毕竟，SVG是专门用来创建形状和图像的，而且SVG创建的图形形状更具语义化，因为它可以使用一些有语义的元素，这些元素可以让你创建你想要的任何图形，同时仍具可读性。

SVG创建图形不仅比CSS创建简单，而且还具有CSS不具备的一些优势：

• SVG图形是真实的内容，实际元素绘制在屏幕上，而不是像空的div没有任何内容，导致不具阅读性等
  屏幕阅读器可以读到SVG图形
• SVG图形更具语义化(SVG的元素和属性)
• SVG图形可以通过图形编辑器编辑，而CSS形状不能
• SVG图形有很多强大的属性，能让你更好的控制图形形状(比如stroke、fill和stroke-width等)

当涉及到创建图表和数据可视化时，SVG胜过其他技术，包括CSS。
SVG图表和数据可视化访问可以充分互动。SVG不规则的形状是一个完美的效果，而且数据可视化效果可以通过这些不规则形状更好的展示出来。
使用SVG，语义化强和更具可访问性，而且可以结合JavaScript做交互效果。

SVG 和 Canvas 对比

Canvas 是逐像素进行渲染的。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
canvas和SVG的主要区别是：使用canvas绘制图形是通过调用其API，而SVG则是通过构建一棵XML元素树来实现的。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。
随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 js 引擎的速度。

下图展示了适合用于canvas的场景以及svg的适合场景：

常用图表库

基于 HTML5 Canvas 技术

Chart.js

http://www.chartjs.org/

Simple yet flexible JavaScript charting for designers & developers

Flot Charts

http://www.flotcharts.org/

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

flot也是非常常见的图表库，采用MIT协议。
flot使用也很简单，其支持在一个图表中同时叠加折线图、面积图、柱形图/条形图等不同的形式，而且其支持扩展插件，通过扩展插件还可以支持堆积柱形图和饼图等以及支持缩放和选区等功能。
flot使用Canvas绘制图表，在借助excanvas的情况下，可以支持IE 6+、FF 2+、Chrome、Safari 3+和Opera 9.5+。
Flot的API设计得很简洁，所以需要额外学习的东西也很少，马上就可以上手使用。
JQuery的插件。唯一目的就是用来绘制曲线图的，即便是它的不同插件的功能，也基本上都在这个范畴之内。
教程 http://www.jqueryflottutorial.com/cn/

百度 ECharts

http://echarts.baidu.com/

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

基于 SVG、VML 技术

xCharts

http://tenxer.github.io/xcharts/

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。
xCharts是一款基于D3的JavaScript图表库，xCharts的功能非常强大，不仅支持多种图表类型，而且拥有丰富的图表主题风格，并且非常漂亮。
另外，xCharts的设计非常灵活，配置也比较简单，加载速度也还不错，是一款开放性和可定制性都非常不错的JavaScript图表应用。

xCharts的特点

• 基于JavaScript，因此只要有浏览器即可使用，平台兼容性不错。
• 开放，可定制，因此配置相当灵活。
• 支持SVG格式，因此也可以方便地导出图表数据。

D3.js

https://d3js.org/

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3是Data-Driven Documents的简写。是一个数据可视化的JavaScript库。D3可以帮助你使用HTML、SVG和CSS将数据完整的在现代浏览器展示。
D3可能是最受欢迎的数据可视化操作的一个库，有大量的文章和书介绍如何使用D3。
D3.js是一个基于数据的操作文档的JavaScript库，可以让你绑定任何数据到DOM，支持DIV这种图案生成，也支持SVG这种图案的生成
D3帮助你屏蔽了浏览器差异，做出来图案的效果可以说是炫目得一塌糊涂，可是代码却很简洁。
学习曲线太高，不容易掌握。不符合人类常规思维的，它是那种以数据（以及容纳数据的容器）为核心的代码风格

Morris.js

http://morrisjs.github.io/morris.js

Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It’s a very simple API for drawing line, bar, area and donut charts.

Morris.js 使用BSD协议。
Morris.js使用非常简单，其仅提供了折线图、面积图、柱形图和饼图四种类型的图表，不过也基本满足大部分需求。
Morris.js基于Raphael，使用的是SVG或VML绘制图表，直接支持IE 6+、FF 3+、Chrome 5+、Safari 3+和Opera 9.5+，不过在图表内容比较多时效率比较低，这个之后再分析。
除此之外Morris.js还需要依赖jQuery。

Raphael.js

http://dmitrybaranovskiy.github.io/raphael/

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。

Highcharts

http://www.highcharts.com/products/highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Highcharts在标准（W3C标准）浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。
针对个人用户及非商业用途免费，并提供源代码下载，你可以任意的修改它。商业用途需要购买许可，个人及非商业用途须遵循CC BY-NC 3.0协议

参考

Web 开发中的矢量绘图处理和应用
网络图形标准
Canvas 与 SVG
SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？
如何为您的网站在Canvas和SVG之间做出选择
SVG vs canvas: how to choose
CSS技术和SVG技术对比系列教程 英、中

我涉及的数据可视化的实现技术和工具
39个大数据可视化工具
Comparison of JavaScript charting frameworks
D3介绍
Flot介绍
Morris.js和flot绘制折线图的比较
数据可视化，第 1 部分: 使用 SVG 和 D3 可视化浏览指标
数据可视化，第 2 部分: 使用 D3 组件进行布局

-eof-