React项目中展示图表

背景

最近React项目中遇到了需要添加图表(折线图)展示的需求。

实践

前端这块可用的图表库真的是非常多的,各种库都有,可以满足各种需求。比如这个20 个最棒的 JavaScript 图表库中就介绍了很多不同的图表库,其中它有提到的就是 chartjs。基于这篇文章上面提到的,以及自己和项目负责人知道的,我们试验了以下3个图表库。

1. echarts

由于echarts是项目负责人之前用过的,并且是百度团队开发的,支持度以及维护性会好些,所以一开始选择的这个库。 这个库做出来的图表也非常不错。只是在部署测试时,就变得非常慢,由于项目打包已经成型,是每个模块打包成一个单独的大文件,所以,打包出来的文件大小有2.7M之大,导致一般不是只需要2、3分钟的时间变成了将近一个小时之久。 后来将项目中只引入需要的折线图line,发现打包出来仍然有2.3M这么大。

echarts项目过大.png

在部署的时候,导致gulp命令占用cpu过高,导致构建很慢。

cpu.png

所以不得不放弃这个库。

2. antv

同样的理由,我们选择了试用蚂蚁金服开发的antv来试验一下,不过打包出来的文件仍然很大,并且部署速度和上一个几乎没区别,也不得不放弃这个库。 虽然这个库做出来的图标也非常好。

3. chartjs

Chart.js适用于小项目,如果你需要扁平化,干净,优雅,快速。它是一个微型的开源库,最小化压缩后只有11kb大小。包括六个核心图表类型(线图,柱图,雷达图,极地图,饼图和环形图)每个都是独立的模块,所以你甚至可以只加载项目需要的模块以最大化缩小代码占用空间。

它使用HTML5 canvas元素渲染图表,并且使用polyfills方式兼容在IE7/8上运行。所有图表都是可响应的。

协议: 开源,面向所有用户免费。

但是实际上我打包出来文件的大小为2.1M,也不小,但是部署时间很快,3分钟左右即可完成。

chartjs.png

有知道原因的小伙伴麻烦告知一下。

结论

  • echarts中的地图展示的图表做的非常好,如有这方面的需求,使用这个库非常好。
  • antv库的大型图表也是做的不错,所以需要大型图表的可以使用这个库。
  • 如果需求like 我这种,只是简单的图表,那么建议使用轻量级的图标库,like: chartjs.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全栈数据化营销

搜索课程脑图:快速找到你要的人脉、资源、信息资料、

2425
来自专栏web前端教室

实际演示,怎么搞一个demo的业务逻辑、需求分析?

今天是周日,今天晚上20:00的时候,咱们进行了每周日都会有的先行者视频直播课程,主要内容是,通过一个实例,怎么去分析它的需求、设计它的js的结构。

2132
来自专栏哲学驱动设计

《架构师》反思:系统可靠性

最近系统学习了一个系统可靠性及其相关知识,今天在这总结一下。 首先,什么是系统的可靠性呢?系统的可靠性是指在规定的时间内及规定的环境下完成规定功能的能力,也...

3235
来自专栏资深Tester

软件测试人员眼中的项目上线流程

3277

云原生应用的成熟度模型探讨

原文地址:https://dzone.com/articles/cloud-native-application

44310
来自专栏测试开发

Android卡顿监控系统

Android 由于机型配置和系统的不同,项目复杂App场景丰富,代码多人参与迭代历史较久等,实际测试时候也会偶尔发现某些业务场景发生卡顿的现象...

1K3
来自专栏一个会写诗的程序员的博客

基于NodeJS的全栈式开发(基于NodeJS的前后端分离)【转】

随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的...

1K2
来自专栏微信公众号:Java团长

公司分层思想的演化历程

来源:www.cnblogs.com/wangsen/p/5052068.html

813
来自专栏pangguoming

高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析

1. ngx_lua nodejs php 比较 我在研究一阵子ngx_lua之后发现lua语法和js真的很像,同时ngx_lua模型也是单线程的异步的事件驱动...

8165
来自专栏程序猿

【云计算知识普及】什么是CDN

云计算-CDN Content Delivery Network,缩写CDN,中文名字为内容分发网络 目的:使内容传输的更快、更稳定 原理思路:...

3785

扫码关注云+社区

领取腾讯云代金券