一图胜千言
可视化领域是目前(泛)前端中最火热的分支之一。不管是面向普通用户的可视化大屏展现数据信息,仍是企业服务中数据统计概览或者调度服务,乃至于国家大力推进的智慧建设(智慧大脑,智慧城市)等项目,都重度使用了数据可视化技术。css
如下图片来自于 前端搞可视化 菜鸟体验体验技术 其歌 的分享 《如何融合数据可视化与物理世界》。咱们能够看到:可视化结合硬件也有很大的用武之地。html
固然,我曾经一度认为可视化就是绘制各类图表,学习可视化就是学习 echarts, D3 等库,而后利用这些工具绘制饼图、折线图、柱状图这类图表。然而,大部分状况下,咱们是能够借助这些库来进行可视化项目的开发。但这些库是通用的解决方案。特定条件下,如在短期内同时渲染大量元素,通用的解决方案就没法使用,此时咱们就须要选择更加底层的方案(如利用 WebGL 自行控制 GPU 渲染图像)。前端
可视化的源头是数据。咱们须要拿到有用的数据,而后经过转化以及整合数据生成用户所须要的结构,最终以图形的方式展示出来。可视化必定是与当前业务高度结合的。可视化工程师须要根据当前的业务以及产品需求,选择合适当前业务的技术栈并生成对用户有用的图像。git
可视化的目的是提高用户对数据的认知能力,解放用户的大脑,从而让数据更有价值。github
一般来讲,SVG 易于交互,Canvas2D 性能更好。基本上会根据当前交互和计算量来肯定使用 SVG 或者 Canvas 。 若是遇到大量像素计算,甚至还须要经过 WebGL 深刻 GPU 编程(自行控制 CPU 并行计算) 。编程
但若是咱们作官网首页的图表呢?若是当前的图表很简单,不须要变化呢?咱们还须要引入 ECharts 这种库?或者说手动写一个图表。api
实际上,随着浏览器的发展,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 实现折线图。echarts
固然,用 CSS 进行图表绘制优势在于不须要学习额外的库和 api。但缺点也很明显:框架
在没有遇到 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 一下。
《如何融合数据可视化与物理世界》