浅谈浏览器图表渲染及前端适配

一、关于浏览器图表渲染

前端绘制图表一般是借助数据可视化框架去完成，数据可视化是个很火的领域，如果在 Github 上搜索 chart 会发现有 7.9w 个结果，出名的Echarts, Highcharts,D3,AntV G2…等等。关于框架的选择不是今天讨论的重点，关键点在于其背后的技术基础。
Echarts.js是基于canvas的，而D3.js和Highcharts.js是基于SVG去做的。
尽管前端绘图技术有很多种，今天主要来说一下canvas和SVG，也是面试被问几率比较高的问题。

1、SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
这意味着 SVG DOM 中的每个元素都是可用的,图像在放大或改变尺寸的情况下其图形质量不会有所损失,不依赖分辨率，支持事件的绑定。

2、canvas

canvas是HTML5标准中的一个元素，javascript为其提供了一些绘图API，通过canvas生成的图像是栅格形式的，即像素图像。
这意味着canvas是逐像素进行渲染的，依赖分辨率，不支持事件处理器。

3、二者区别

Canvas

• html5的新标签
• 依赖分辨率
• 标量图
• 不支持事件处理器
• 弱的文本渲染能力
• 绘制图形通常是通过javascript来实现
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 历史相对久远
• 不依赖分辨率
• 矢量图
• 支持事件处理器
• 更多的是通过标签来实现
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度
• 不适合游戏应用

为了体会二者技术差异，做了一个小demo。
同样的柱状图，通过svg和canvas两种方式如何去实现：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE ht