共计 2926 个字符，预计需要花费 8 分钟才能阅读完成。
一图胜千言
可视化畛域是目前（泛）前端中最炽热的分支之一。无论是面向普通用户的可视化大屏展现数据信息，还是企业服务中数据统计概览或者调度服务，乃至于国家鼎力推动的智慧建设（智慧大脑，智慧城市）等我的项目，都重度应用了数据可视化技术。
以下图片来自于 前端搞可视化 菜鸟体验体验技术 其歌 的分享《如何交融数据可视化与物理世界》。咱们能够看到：可视化联合硬件也有很大的用武之地。
可视化是什么
当然，我已经一度认为可视化就是绘制各种图表，学习可视化就是学习 echarts, D3 等库，而后利用这些工具绘制饼图、折线图、柱状图这类图表。然而，大部分状况下，咱们是能够借助这些库来进行可视化我的项目的开发。但这些库是通用的解决方案。特定条件下，如在短时间内同时渲染大量元素，通用的解决方案就无奈应用，此时咱们就须要抉择更加底层的计划（如利用 WebGL 自行管制 GPU 渲染图像）。
可视化的源头是数据。咱们须要拿到有用的数据，而后通过转化以及整合数据生成用户所须要的构造，最终以图形的形式展示进去。可视化肯定是与以后业务高度联合的。可视化工程师须要依据以后的业务以及产品需要，抉择适合以后业务的技术栈并生成对用户有用的图像。
可视化的目标是晋升用户对数据的认知能力，解放用户的大脑，从而让数据更有价值。
用 css 做数据可视化
通常来说，SVG 易于交互，Canvas2D 性能更好。基本上会依据以后交互和计算量来确定应用 SVG 或者 Canvas。如果遇到大量像素计算，甚至还须要通过 WebGL 深刻 GPU 编程 (自行管制 CPU 并行计算)。
但如果咱们做官网首页的图表呢？如果以后的图表很简略，不须要变动呢？咱们还须要引入 ECharts 这种库？或者说手动写一个图表。
实际上，随着浏览器的倒退，CSS 的体现能力愈发弱小，齐全能够实现惯例的图表。如柱状图和饼图等。应用网格布局（Grid Layout）加上线性突变（Linear-gradient）能够间接生成柱状图。
<style>
.bargraph {
margin: 0 auto;
display: grid;
width: 250px;
height: 200px;
padding: 10px;
transform: scaleY(3);
grid-template-columns: repeat(5, 20%);
}
.bargraph div {margin: 0 5px;}
.bargraph div:nth-child(1) {/** 从上到下 (to bottom 默认，可不写)，75% 全透明，25% 红色，**/
background: linear-gradient(to bottom, transparent 75%, red 0);
}
.bargraph div:nth-child(2) {background: linear-gradient(transparent 74%, yellow 0);
}
.bargraph div:nth-child(3) {background: linear-gradient(transparent 60%, blue 0);
}
.bargraph div:nth-child(4) {background: linear-gradient(transparent 55%, green 0);
}
.bargraph div:nth-child(5) {
/** 也能够多种色彩突变 **/
background: linear-gradient(transparent 32%, #37c 0, #37c 63%, #3c7 0);
}
</style>
<body>
<div class="bargraph">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
咱们还能够应用圆锥突变 conic-gradient 实现饼图，以及应用 div + transform 实现折线图。
当然，用 CSS 进行图表绘制长处在于不须要学习额定的库和 api。但毛病也很显著：
- 对应关系简单，无奈直观的批改以后代码以疾速替换以后图标款式（换算往往须要 JavaScript）
- 属于 DOM 树的一员，性能往往难以把控（作为稳固的的首页图表，不会由太大问题）
图表库 Chart.css
在没有遇到 Charts.css 之前, 我认为图表是离不开 JavaScript 计算的。但看到该库时候，我也是十分的欣慰。Charts.css 是一个 CSS 框架。它应用 CSS3 将 HTML 元素设置为图表款式，同时该库其中一个设计准则就是不会应用 JavaScript 代码（如果无奈应用 CSS 实现，则不会成为框架的一部分）。当然，用户能够自行决定是否应用 JavaScript。
拿出最简略的表格为例：
<table border="1">
<caption> Front End Developer Salary </caption>
<tbody>
<tr>
<td> $40K </td>
</tr>
<tr>
<td> $60K </td>
</tr>
<tr>
<td> $75K </td>
</tr>
<tr>
<td> $90K </td>
</tr>
<tr>
<td> $100K </td>
</tr>
</tbody>
</table>如图所显：
应用 Chart.css 之后:
<table style="width: 400px;height: 400px" class="charts-css column">
<caption> Front End Developer Salary </caption>
<tbody>
<tr>
<td style="--size: calc(40 / 100)"> $40K </td>
</tr>
<tr>
<td style="--size: calc(60 / 100)"> $60K </td>
</tr>
<tr>
<td style="--size: calc(75 / 100)"> $75K </td>
</tr>
<tr>
<td style="--size: calc(90 / 100)"> $90K </td>
</tr>
<tr>
<td style="--size: calc(100 / 100)"> $100K </td>
</tr>
</tbody>
</table>
十分棒！
咱们能够看到其中最重要的批改是应用了 CSS 变量，CSS 尽管不像 JavaScript 是通用编程语言，但 CSS 变量却是一个桥梁，让其领有了与其余元素沟通的能力（HTML，JavaScript），其次借助 CSS 中的计算属性 calc。同时也能够参考我之前写的的博客 玩转 CSS 变量 和 CSS 扫雷游戏。
/** 图表 css 中会有很多这种计算代码 **/
height: calc(100% * var(--end, var(--size, 1)));当然，该库目前能够形容程度条形图（bar）、柱状图（column）、面积图 (area)、折线图（line）。饼图，雷达图等还在开发中。当然该库也能够实现混合图表：
Charts.css 同时反对用户应用 CSS3 为以后图表增加各种成果，详情见 定制化。
激励一下
如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。
博客地址
参考资料
《如何交融数据可视化与物理世界》
跟月影学可视化
Charts.css
