You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
importReact,{Component}from'react';import'./App.css';importChartfrom'./components/chart'constAPI_URL="https://nataliia-radina.github.io/react-vis-example/";classAppextendsComponent{constructor(props){super(props)this.state={results: [],};}componentDidMount(){fetch(API_URL).then(response=>{if(response.ok){returnresponse.json()}else{thrownewError('something went wrong')}}).then(response=>this.setState({results: response.results.filter((r)=>{returnr.name==='JavaScript';})}))}render(){const{results}=this.state;return(<divclassName="App"><Chartdata={results}/></div>);}}exportdefaultApp;
什么是react-vis?
React-vis是一个React框架下的可视化库。它的开源者是Uber公司。你可以用它轻松地创建折线图、饼状图、柱状图和树形图等常见图表。
之所以推荐React-vis是因为它有以下三个优点:
在这篇文章中,我想要向你展示如何使用react-vis来创建一个折线图。
安装
首先,你需要在你的项目中安装react-vis。我使用
create-react-app
来创建demo项目。输入
npm install react-vis --save-dev
来安装react-vis。示例
假设现在你希望可视化一些数据。在我的demo中,我使用的是Github统计每种语言有多少个pull request得到的数据集。
接着,我在componentDidMount方法中接收数据,然后给我的应用设置state并将它当作props传给子组件。由于我只对JavaScript的数据感兴趣,所以我还对结果进行了过滤。
现在让我们看看Chart组件。
Chart组件是一个无状态组件。在我的图表中,我希望展示特定时间段的pull request数量。这也是我要使用折线图的原因。
为了生成这个图表,我需要从react-vis中引入相关的组件。
XYPlot是其他组件的容器组件,XAxis和YAxis是用来显示X、Y坐标轴,VerticalGridLines是用来生成网格,而LineSeries则是图表的种类。
简单场景
现在,让我们先用随机数据生成一个Chart组件,只是用来看看react-vis是如何工作的。
你可以看到我传递了一个数组给LineSeries组件,里面每一项都是一个由点的x、y坐标组成的对象。
接下来就是见证奇迹的时刻!我的Chart组件在浏览器中就像下面一样:
![simple chart](https://camo.githubusercontent.com/f613bb39131ac3f79247de6291ae0f38cf7f492f40956b10fe547b3b3f075531/687474703a2f2f6f783334697673326a2e626b742e636c6f7564646e2e636f6d2f2f6865786f2f323031382d332d31382f323031382d332d31382d322e706e67)
应用真实数据
现在,让我们把真实数据传递给Chart组件。我希望能够显示特定时间段的pull request数量。在我的数据集中代表了“count”、“year”和“quarter”等字段。所谓我将用这些数据组合而成的点的坐标来生成一个数组。
让我们看看如果将这个数组传递给LineSeries组件会发生什么吧。
因为我想在x轴上显示嫉妒,所以我需要设置坐标轴的类型如下:
看上去还不错,不过我还希望美化一下我的图表,所以我加了一些样式在上面:
下面是Chart组件的全部代码:
以及最后的效果图:
![last sample](https://camo.githubusercontent.com/aebd2204b4c0b76dce4f68b08bbe8b0dfad413bbeeeb497ef44f186663071da8/687474703a2f2f6f783334697673326a2e626b742e636c6f7564646e2e636f6d2f2f6865786f2f323031382d332d31382f323031382d332d31382d332e706e67)
总结
我希望你现在能够理解react-vis是多么简单但又非常强大的工具。它能够帮助你展示任何类型的数据。
如果你想要学习使用react-vis,可以查看它们的文档和示例。
好好享受你的数据可视化之旅吧。
The text was updated successfully, but these errors were encountered: