原文地址： 作者： 摘要：react-vis是Uber公司开源的数据可视化库，能够制作折线图、饼状图等常用图表。本文将简单介绍如何使用它。
什么是react-vis？
是一个React框架下的可视化库。它的开源者是Uber公司。你可以用它轻松地创建折线图、饼状图、柱状图和树形图等常见图表。
之所以推荐React-vis是因为它有以下三个优点：
- 简单
- 灵活
- 整合了React
在这篇文章中，我想要向你展示如何使用react-vis来创建一个折线图。
安装
首先，你需要在你的项目中安装react-vis。我使用create-react-app来创建demo项目。
输入npm install react-vis --save-dev来安装react-vis。
示例
假设现在你希望可视化一些数据。在我的demo中，我使用的是Github统计每种语言有多少个pull request得到的。
接着，我在componentDidMount方法中接收数据，然后给我的应用设置state并将它当作props传给子组件。由于我只对JavaScript的数据感兴趣，所以我还对结果进行了过滤。
import React, {Component} from 'react';import './App.css';import Chart from './components/chart'const API_URL = "https://nataliia-radina.github.io/react-vis-example/";class App extends Component { constructor(props) { super(props) this.state = { results: [], }; } componentDidMount() { fetch(API_URL) .then(response => { if (response.ok) { return response.json() } else { throw new Error ('something went wrong') } }) .then(response => this.setState({ results: response.results.filter((r)=>{ return r.name === 'JavaScript'; }) }) )} render() { const {results} = this.state; return ( ); }}export default App; 现在让我们看看Chart组件。
Chart组件是一个无状态组件。在我的图表中，我希望展示特定时间段的pull request数量。这也是我要使用折线图的原因。
为了生成这个图表，我需要从react-vis中引入相关的组件。
import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis'; XYPlot是其他组件的容器组件，XAxis和YAxis是用来显示X、Y坐标轴，VerticalGridLines是用来生成网格，而LineSeries则是图表的种类。
简单场景
译者注：以下场景都需要在index.html中写上
现在，让我们先用随机数据生成一个Chart组件，只是用来看看react-vis是如何工作的。
import React from 'react';import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';const Chart = (props) => { return ( );}export default Chart; 你可以看到我传递了一个数组给LineSeries组件，里面每一项都是一个由点的x、y坐标组成的对象。
接下来就是见证奇迹的时刻！我的Chart组件在浏览器中就像下面一样：
应用真实数据
现在，让我们把真实数据传递给Chart组件。我希望能够显示特定时间段的pull request数量。在我的数据集中代表了“count”、“year”和“quarter”等字段。所谓我将用这些数据组合而成的点的坐标来生成一个数组。
const dataArr = props.data.map((d)=> { return {x: d.year + '/' + d.quarter, y: parseFloat(d.count/1000)}}); 让我们看看如果将这个数组传递给LineSeries组件会发生什么吧。
因为我想在x轴上显示嫉妒，所以我需要设置坐标轴的类型如下：
xType="ordinal"
看上去还不错，不过我还希望美化一下我的图表，所以我加了一些样式在上面：
下面是Chart组件的全部代码：
import React from 'react';import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';const Chart = (props) => { const dataArr = props.data.map((d)=> { return {x: d.year + '/' + d.quarter, y: parseFloat(d.count/1000)} }); return ( );}export default Chart; 以及最后的效果图：
总结
我希望你现在能够理解react-vis是多么简单但又非常强大的工具。它能够帮助你展示任何类型的数据。
如果你想要学习使用react-vis，可以查看它们的和示例。
好好享受你的数据可视化之旅吧。
本文作者的demo地址： 查看更多我翻译的Medium文章请访问： 项目地址： SF专栏：