使用 svg 图表进行数据可视化

前言

       本文是Web数据可视化案例系列文章的第二篇。文章中介绍的项目是一个完整可运行的可视化项目。前台使用json对象展示数据表的数据，并且使用javascript绘制svg图像将数据可视化。后台使用python的pandas库进行数据处理，先将数据从数据库中多个历史表中查询出来，再把数据组织成前台需要的json结构，然后通过Bottle这个极其轻便、能够快速上手的Web框架将json数据传递给前台。

目标读者

      如果你想学习数据处理和分析，那么本文是为你准备的。本文将使用既容易理解，数据处理又相对简单的案例，带领你了解使用pandas进行数据处理的过程，以及如何选择数据展现模型进行数据可视化。

      如果你想了解和学习Web前台开发的相关技能，并且想熟练使用复杂的数据可视化方法，那么本文不要错过。

      如果你想学习python，想掌握Web后台技能，并搭建一个Web开发框架。那么本文也非常适合你。本文将搭建一个轻便极易上手的，以python为开发语言的Bottle框架，该框架非常适合快速验证原型设计效果。

      简而言之，本文适合想入门大数据处理和数据可视化，想使用python快速开发Web应用的读者。

正文

       本项目主要目标是展示工厂制造成本的环比数据趋势。主要使用使用svg绘制图表来显示这个数据趋势。

       我们在上一篇文章介绍了使用Echarts进行数据可视化的方法。Echarts是非常强大的可视化工具，并且具有丰富多样的展示模板。条条大路通罗马。我们这次使用svg图表来展示数据，就是为了给大家更多的选择。Echarts和svg是两种不同的可视化方案，我们通过下面的表格来比较他们的异同，迅速了解一下他们之间的区别。因为Echarts实际上就是使用Canvas画布实现的，下表中的Canvas你可以把他看作Echarts。

可扩展性	SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真。 SVG可以在任何分辨率下以高质量的打印。	Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（模糊）。 Canvas 不适合在任意分辨率下打印。
渲染能力	当SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用DOM 时，渲染会变得很慢。 当图像中具有大量元素时，SVG 文件的大小会增长得更快（导致DOM变得复杂）	Canvas 提供了高性能的渲染和更快的图形处理能力，例如：适合制作H5小游戏。 当图像中具有大量元素时，Canvas并不会增加太多。
灵活度	SVG 可以通过JavaScript和CSS 进行修改，用SVG来创建动画和制作特效非常方便。	Canvas只能通过JavaScript进行修改，创建动画得一帧帧重绘。
使用场景	SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。