2019 年值得推荐的 React 可视化库

作者:Artyom Keydunov

2019 年 5 月 24 日

2019 年值得推荐的 React 可视化库

最近我们在开发Cube.js时,调研了许多不同的可视化库。Cube.js 在兼容 SQL 语法的数据库之上构建用于分析的 API 层,因此任何图表库均能够和 Cube.js 一起用来构建仪表板。这就是为什么我们一直在寻找一个优质而且对于开发者更友好的可视化库。


以下的列表仅针对 React 专用库。我会尝试使用坐标轴、图例和工具提示来构建几乎一模一样的堆叠式的条形图。在数据后端方面,我们将使用 Heroku 托管的 Cube.js。我还会使用Cube.js 的React 组件,它使用了render props技术,并且它只渲染自己,所以我们能通过任何图表库构建我们想要的任何东西。


在此期间,我还会使用 2 个非常好用的库,分别是 moment.js 和 numeral.js,它们分别用于日期和数字的格式化。


作为数据输入,我们还会使用来自 Cube.js Javascript 客户端的https://cube.dev/docs/@cubejs-client-core \l result-set-chart-pivot \t _blank">resultSet.chartPivot() 方法。它会返回一个数据数列,在我们的例子当中,它长这样:


[  {    "x": "2017-01-01T00:00:00.000",    "completed, Orders.count": 208,    "processing, Orders.count": 252,    "shipped, Orders.count": 233  },  {    "x": "2017-02-01T00:00:00.000",    "completed, Orders.count": 188,    "processing, Orders.count": 209,    "shipped, Orders.count": 222  },]
复制代码


现在,让我们转向列表。


如果你没有发现你中意的库,或者想让我再添加一个库,请在这个 Slack 频道 ping 我。我非常乐意在列表中添加更多的库:


https://cubejs-community.herokuapp.com/


Recharts


http://recharts.org/


Recharts 提供了一组模块化的图表组件,并且能够让你将这些组件进行组合,从而轻易地构建许多东西,比如曲线条形组合图


它是我列出这几个里面最受欢迎的库。它在 Github 上有超过 11000 颗星,但同时也有大量的开启的 issue(迄今为止为 600 个)。


它的文档非常全面,但缺乏某些方面的细节。你可以在 Rechart’s 网站上(http://recharts.org/)找到一些例子,然后根据它们开始构建你自己的图表。


Recharts 针对定制提供了多样化的配置项。除此以外,它还允许通过定制化 SVG 元素进行低级别的定制。 下面就是怎样在 Recharts 中构建堆叠式条形图的方法:


在这个例子以及所有随后的例子中,我都使用了 colors、dateFormatter 和 numberFormatter 变量。下面展示了我是如何定义它们的:


const numberFormatter = item => numeral(item).format("0,0");const dateFormatter = item => moment(item).format("MMM YY");const colors = ["#7DB3FF", "#49457B", "#FF7C78"];export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (  <ResponsiveContainer width="100%" height={300}>    <BarChart data={resultSet.chartPivot()}>      <XAxis tickFormatter={dateFormatter} dataKey="x" />      <YAxis tickFormatter={numberFormatter} />      {resultSet.seriesNames().map((series, i) => (        <Bar          stackId="a"          dataKey={series}          name={series.split(",")[0]}          fill={colors[i]}        />      ))}      <Legend />      <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />    </BarChart>  </ResponsiveContainer>);
复制代码


Demo 见:


https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/recharts


Victory


https://formidable.com/open-source/victory/


Victory 使用了和 Recharts 相同的组合模式。


它是由Formidable开发的。除了 Victory 外,Formidable 还拥有其它可靠的开源库。它是列表中唯一一个能够兼容 React Native 的库。


Victory 是仅次于 Recharts 的第二受欢迎的库,在 Github 上有 7000 颗星,但是它的开启的 issue 只是 Recharts 的五分之一。Victory 在Spectrum上有一个社区聊天群


它的文档化良好而且有一个示例陈列馆


Victory 提供了 2 个样式风格:灰度和 Material,并且能让你创建客户主题,从而使所有图表的外观保持一致。 下面,你可以看到我们堆叠式的条形图在 Victory 里面的代码。


const transformResult = (series, resultSet) =>  resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (  <div height={300}>    <VictoryChart      containerComponent={        <VictoryVoronoiContainer          voronoiDimension="x"          labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}          labelComponent={            <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />          }        />      }      domainPadding={{ x: 20, y: [0, 20] }}    >      <VictoryLegend        colorScale={colors}        data={resultSet.seriesNames().map(series => ({          name: series.split(",")[0]        }))}        orientation="horizontal"        y={275}        x={130}      />      <VictoryAxis tickFormat={dateFormatter} tickCount={8} />      <VictoryAxis dependentAxis />      <VictoryStack colorScale={colors}>        {resultSet.seriesNames().map((series, i) => (          <VictoryBar key={i} data={transformResult(series, resultSet)} />        ))}      </VictoryStack>    </VictoryChart>  </div>);
复制代码


Demo 见:


https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/victory


Nivo


https://nivo.rocks/


同 Recharts 和 Victory 一样,Nivo 基于 D3 而且是 React 特有的。但与前面的库不同的是,它不支持图表组合。每个图表类型仅提供了一个组件,而且这个组件是通过多个 props 来配置的。Nivo 是针对特定的图表类型如 @nivo/bar 的一套程序包。所以,你需要安装特定的程序包,才能使用特定的图表类型。


该项目本身非常活跃。它在 Github 上有 5000 颗星,在社区聊天群中有 300 名成员。


它的文档非常互动化,你可以根据文档构建图表的配置。虽然它很好,但是它缺乏一个纯文本形式的 API 参考和搜索功能。此外,它还有一个带有示例的Storybook。它大大地缩减了我创建第一张表的时间。同 Victory 一样,Nivo 让你能够创建自己的主题,从而使所有图标的外观保持一致。


我们将在堆叠式的条形图中使用 @nivo/bar 包。你可以在下面找到代码示例和 CodeSandbox 的演示。


//https://github.com/plouc/nivo/issues/138#issuecomment-373015114const ticksFormmater = (ticksCount, value, data, dateFormatter) => {  const valueIndex = data.map(i => i.x).indexOf(value);  if (valueIndex % Math.floor(data.length / ticksCount) === 0) {    return dateFormatter(value);  }  return "";};export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (  <div style={{ height: 300 }}>    <ResponsiveBar      enableLabel={false}      colors={colors}      data={resultSet.chartPivot()}      keys={resultSet.seriesNames()}      indexBy="x"      enableGridY={false}      padding={0.3}      margin={{ top: 60, right: 80, bottom: 60, left: 40 }}      axisLeft={{        format: numberFormatter      }}      axisBottom={{        format: value =>          ticksFormmater(8, value, resultSet.chartPivot(), dateFormatter)      }}      tooltip={({ id, value, color }) => (        <strong style={{ color }}>          {id.split(",")[0]}: {numberFormatter(value)}        </strong>      )}      legends={[        {          anchor: "bottom",          direction: "row",          translateY: 50,          itemsSpacing: 2,          itemWidth: 150,          itemHeight: 20,          itemDirection: "left-to-right"        }      ]}    />  </div>);
复制代码


Demo 见:


https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/nivo


BizCharts


https://bizcharts.net/products/bizCharts


BizCharts 是一个基于G2的 React 特有的可视化库,G2 是一种可视化语法。BizCharts 由阿里巴巴支持,并且能够和 Ant Design 框架良好配合。


它在 Github 上约有 4000 颗星,但是大部分的开发仍是中文的,其文档也是如此。据我所知,该团队正在翻译这些文档,但是仍未完成所有的翻译。


虽然它欠缺英文文档,但是其 API 非常简单易懂。唯一的困难是你需要将数据格式转化成堆叠式图表特有的格式。


const stackedChartData = resultSet => {  const data = resultSet    .pivot()    .map(({ xValues, yValuesArray }) =>      yValuesArray.map(([yValues, m]) => ({        x: resultSet.axisValuesString(xValues, ", "),        color: resultSet.axisValuesString(yValues, ", "),        measure: m && Number.parseFloat(m)      }))    )    .reduce((a, b) => a.concat(b));  return data;};export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (      <Chart        scale={{ x: { tickCount: 10 } }}        height={400}        data={stackedChartData(resultSet)}        forceFit      >        <Axis name="x" label={{ formatter: dateFormatter }} />        <Axis label={{ formatter: numberFormatter }} name="measure" />        <Tooltip />        <Geom          type="intervalStack"          position={`x*measure`}          color={["color", colors]}        />        <Legend itemFormatter={item => item.split(",")[0]} />      </Chart>    )}  />);
复制代码


Demo 见:


https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/bizcharts


React-vis


https://uber.github.io/react-vis/


React-vis 是由 Uber 开发的,而且目前在 Github 上有 5400 颗星、150 个开启的 issue,最近也有很多提交,因此它似乎非常活跃。它是模块化的,这点同列表中的大多数库一样。它还有许多非常棒的默认风格,这些风格必须单独以 CSS 文件的方式导入。


同 Nivo 一样,React-vis 也有带有示例的故事簿。其组件 API 的文档化也非常好。在定制方面,你可以通过定制的 CSS 风格来控制其外观和给人的感觉。React-vis 还提供了一个特别的组件即 CustomSVGSeries来构建定制的 SVG 图表。


其 API 和 Victory 的相似。下面,你可以看到,我使用了与 Victory 代码段几乎一模一样的 transformResult。


const transformResult = (series, resultSet, dateFormatter) =>  resultSet    .chartPivot()    .map(element => ({ x: Date.parse(element.x), y: element[series] }));export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (  <XYPlot xType="time" height={300} width={500} stackBy="y">    <XAxis tickFormat={dateFormatter} tickSize={8} />    <YAxis />    {resultSet.seriesNames().map((series, i) => (      <VerticalBarSeries        cluster="stack 1"        key={i}        color={colors[i]}        data={transformResult(series, resultSet, dateFormatter)}      />    ))}    <DiscreteColorLegend      colors={colors}      items={resultSet.seriesNames().map(i => i.split(",")[0])}      orientation="horizontal"      style={{ position: "absolute", left: 130, bottom: -30 }}    />  </XYPlot>);
复制代码


Demo 见:


https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/react-vis


查看英文原文https://blog.statsbot.co/react-visualization-libraries-in-2019-91be49a01158


你喜欢的 React 可视化库是哪个呢?欢迎留言分享。


2019 年 5 月 24 日 08:007520
用户头像

发布了 34 篇内容, 共 15.7 次阅读, 收获喜欢 45 次。

关注

评论

发布
暂无评论
发现更多内容

实用!8个 chrome插件玩转GitHub,单个文件下载小意思

程序员内点事

GitHub

谷歌朝南,华为朝北

脑极体

爬虫“学前班”,记住这些不踩坑!

华为云开发者社区

爬虫 数据 搜索

API生态的发展与机遇:从5000组数据看中国API生态与开发者现状

华为云开发者社区

华为 API

【JSRC小课堂】Web安全专题(一)认证缺失和认证缺陷漏洞

京东智联云开发者

WEB安全

你有时间吗?

池建强

时间

AES加密模式

Mars

AES

分布式文件存储QoS硬核黑科技,真香

焱融科技

高性能 存储 HPC 分布式文件存储 QoS

MySql从青铜到王者晋级之路,阿里大牛经验总结让牛少走弯路!

Java架构之路

Java 程序员 架构 面试 编程语言

10 张图打开 CPU 缓存一致性的大门

小林coding

缓存 cpu 操作系统 计算机

来自阿里面试官的Java面试连珠炮,让你自由发挥你能撑到哪一步?

Java架构之路

Java 程序员 架构 面试 编程语言

一文读懂GaussDB(openGauss) 的六大关键技术特性

华为云开发者社区

数据库 数据 存储

Vidyo的技术特点都有哪些?

dwqcmo

音视频会议 集成架构 解决方案 智能硬件

30 岁的码农人生 ——人生至暗时,你依然能窥见光明

cxuan

程序员 程序人生 感悟

个人计算机、工作站、服务器的主要区别

德胜网络-阳

最近程序员频繁被抓,如何避免面向监狱编程!?

Java架构师迁哥

大企程序员亲身经历告诉你,CRM系统,自己的才是最好的

Learun

敏捷开发

.NET可视化权限功能界面设计

力软.net/java开发平台

.net 可视化 权限

阿里巴巴专属著作超赞,就是名字起得有点狂“成神之路”???

Java架构师迁哥

什么是动态代理

Rayjun

Java 动态代理

谈谈贪官污吏

空山

记一次Jvm参数调优实战

AI乔治

Java 架构 JVM 编程思维 jvm调优

程序员不愿意说的秘密!Java进阶架构师必看:架构完美设计+程序员三门课+架构修炼之道

Java架构追梦

求职时这样回答问题你就输了!来自IT类面试官视角的深度解读

华为云开发者社区

面试 软件开发

即构SDK10月迭代:新增多款语音音效、外部采集码流控制及Android SDK 最低支持操作系统版本调整

ZEGO即构

android RTC

如何在微信公众号图文中插入外链

Ceelog

微信公众号

以A.I.之力打破方言沟通障碍 科大讯飞重磅发布智慧翻译系统

Talk A.I.

小程序云开发实战:从0搭建科技爱好者周刊小程序

薛定喵君

微信小程序 小程序云开发 云开发

接口测试工具

测试人生路

接口文档 接口测试

如何生成 Flink 作业的交互式火焰图?

Apache Flink

flink

可视化数据科学中的概率分布以帮你更好地理解各种分布

计算机与AI

学习 数据科学

2019 年值得推荐的 React 可视化库-InfoQ