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 条评论
登录 后参与评论

相关文章

  • Flex Box布局学习- 语法

    上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

    贺贺V5
  • Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

    绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。

    贺贺V5
  • React Advanced Topics

    大家都在试用React,之前呢,也给大家分享过一次主题为“浅谈Hooks&&生命周期”的内容,今天呢,作为延伸,来继续给大家介绍一些React的Advanced...

    贺贺V5
  • 读图读什么——数据分析图表解密!

    “字不如表,表不如图”,这八字诀在数据分析工作者眼中被视为秘籍,各种 数据分析图表,各种“忽悠”,数据会说谎,统计会撒谎,图表也会骗人。现在信息可视化如此流行,...

    CDA数据分析师
  • 论一个图表的自我修养

    昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

    数据小磨坊
  • 《经济学人》数据可视化编辑:错误的图表,我们也画了很多

    经济学人杂志除了色彩鲜明的文章之外,其在数据可视化方面也自成一派。绝妙的颜色搭配,风格鲜明的图表总能让读者过目不忘。

    大数据文摘
  • 2014年18张最佳数据可视化图表

    大数据文摘
  • 2019年最好的JavaScript图表库

    随着数据收集和使用持续呈指数级增长,对这些数据进行可视化的需求变得越来越重要。开发人员寻求将数百万个数据库记录整合到美丽的图表和仪表板中,人类可以快速直观地解释...

    代码医生工作室
  • 【数据可视化】:18张最牛逼信息图

    我 们生活在一个信息大爆炸的时代,每天都有很多的新消息、新发现、新趋势向我们狂轰乱炸而来,如果想用“学海无涯苦作舟”的精神梳理清楚这些包含了各个领域 (历史、心...

    小莹莹
  • 图表案例——简约却不简单的图表制作技巧

    我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。 今天的案例是关...

    数据小磨坊

扫码关注云+社区

领取腾讯云代金券