tinyshare微博账号

一个创建自适应、无JavaScript图表的新方法

原文信息: 查看原文

A new technique for making responsive, JavaScript-free charts

- Rich Harris

Pancake图表

前端开发者对于图表组件应该很熟悉了,国内的前端开发者们熟悉且经常使用的图表库有EchartsChart.jsAntV等。这些图表库都有一个特点,就是它们都是使用canvas生成的,也就是说它们比较依赖于JavaScript

作为图表组件,还要考虑的一个问题,就是”流动性“,让图表自动去适配它的容器的变化,当容器大小变化时,它要像”水“一样,自动地去适应它的容器。依赖于JavaScript的图表库需要开发者做更多的事情来解决这个问题。

作者在文中推荐了两种无JavaScript图表实现方案,可以自动适配父容器的大小变化。

一种是SVG,另一种是HTML + CSS

说到SVG,其实有一种前几年还算流行的图表框架:Highlight.js,它就是基于SVG实现的。

作者同时也是新的前端框架Svelte的使用者,他将这种解决方案封装成了一个图表库([Pancake](https://pancake-charts.surge.sh/))。

分享于 2020-02-22

访问量 156

预览图片