干巴巴的对比可读性并不高,也很难让人有真实对比的联想。我以我们工作中遇到的一个需求来对比讲解。以下,GO~
---
我是岂安科技前端架构师静~,也许很多人都会觉得奇怪,在我们这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?在我们的项目中是如何实现数据可视化的呢?下面以这样一个需求开始我们的讲解:我们需要向用户展示目前用户产品的风险情况,有没有风险产生、产生于何地、是否被拦截等信息。
最终效果图:
技术选型
说到数据可视化,可谓是百花齐放,一时之间前端界出现了琳琅满目的第三方库: Highcharts , Echarts , Chart.js , D3.js 等。但是,万变不离其宗。
总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。
通过各种比较之后,我们最终选择基于 D3.js 进行开发。
为什么不选用更加丰富的图形库,比如 Echarts ?
——数据可视化看似简单,但其中蕴含的科学可谓博大精深。
Echarts 提供的图表的确可以满足大部分的需求,遵循了数据可视化的一些经典范式。然而,每个不同的行业对于数据可视化都会有一些定制化的需求,希望能以一些带有行业特征的图表向使用者展示数据背后隐藏的秘密。
因此,我们希望可以使用一个比较基础的图形库,这个库对一些基础算法进行了