[翻譯]react-vis：一個數據可視化庫

原文地址： https://medium.com/dailyjs/data-visualization-with-react-vis-bd2587fe1660
做者： Shyianovska Nataliia
摘要：react-vis是Uber公司開源的數據可視化庫，可以製做折線圖、餅狀圖等經常使用圖表。本文將簡單介紹如何使用它。

什麼是react-vis？

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 (
            <div className="App">
                <Chart data={results}/>
            </div>
        );
    }
}

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中寫上

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">

如今，讓咱們先用隨機數據生成一個Chart組件，只是用來看看react-vis是如何工做的。

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';

const Chart = (props) => {

        return (
            <XYPlot
                width={300}
                height={300}>
                <VerticalGridLines />
                <HorizontalGridLines />
                <XAxis />
                <YAxis />
                <LineSeries
                    data={[
                        {x: 1, y: 4},
                        {x: 5, y: 2},
                        {x: 15, y: 6}
                    ]}/>
            </XYPlot>
        );
}
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組件會發生什麼吧。

<LineSeries data={dataArr}/>

由於我想在x軸上顯示嫉妒，因此我須要設置座標軸的類型以下：

xType="ordinal"

看上去還不錯，不過我還但願美化一下個人圖表，因此我加了一些樣式在上面：

<LineSeries data={dataArr} style={{stroke: 'violet', strokeWidth: 3}}/>

下面是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 (
        <XYPlot
            xType="ordinal"
            width={1000}
            height={500}>
            <VerticalGridLines />
            <HorizontalGridLines />
            <XAxis title="Period of time(year and quarter)" />
            <YAxis title="Number of pull requests (thousands)" />
                <LineSeries
                    data={dataArr}
                    style={{stroke: 'violet', strokeWidth: 3}}/>
        </XYPlot>
    );
}

export default Chart;

以及最後的效果圖：

總結

我但願你如今可以理解react-vis是多麼簡單但又很是強大的工具。它可以幫助你展現任何類型的數據。

若是你想要學習使用react-vis，能夠查看它們的文檔和示例。

好好享受你的數據可視化之旅吧。

本文做者的demo地址： https://github.com/Nataliia-Radina/react-vis-example
查看更多我翻譯的Medium文章請訪問：
項目地址： https://github.com/WhiteYin/translation
SF專欄： https://segmentfault.com/blog/yin-translation