摘要：是年初團(tuán)隊(duì)可視化組推出的一款可視化組件庫，為基礎(chǔ)表格的繪制提供了另外一種可能。為方便國(guó)際化，文檔只有英文官網(wǎng)，中文官網(wǎng)還在編寫中。如果試用有問題，歡迎給項(xiàng)目提請(qǐng)使用英文來提，謝謝。

Recharts 是 2016 年初團(tuán)隊(duì)可視化組推出的一款可視化組件庫，為基礎(chǔ)表格的繪制提供了另外一種可能。

Recharts 含義是重新定義（Redefined）圖表。這個(gè)名字的背后在于這個(gè)圖表在設(shè)計(jì)上帶給開發(fā)者的是不一樣的體驗(yàn)，不僅是用 React 設(shè)計(jì)，也在于重新定義了組合與配置方式。

Recharts 到今天的版本是 0.9.3，支持 React 0.14.x 或 15.0.x 版本，現(xiàn)在有至少四個(gè)國(guó)外團(tuán)隊(duì)在產(chǎn)品中使用。為方便國(guó)際化，文檔只有英文官網(wǎng) Recharts，中文官網(wǎng)還在編寫中。如果試用有問題，歡迎給項(xiàng)目提 issue（P.S. 請(qǐng)使用英文來提，謝謝）。

接下來我們會(huì)從思想層面來剖析 Recharts 的原理和精髓。

大家可以回顧一下在做圖表類的需求時(shí)，碰到最糾結(jié)的問題是什么？這里列了一些我碰到最多的問題：

配置非常復(fù)雜，可配置的內(nèi)容太多，找不到到底使用什么配置項(xiàng)來達(dá)到想要的目的

很多樣式無法完全統(tǒng)一，變化很多。這個(gè)線圖怎么多了條線？這個(gè)柱圖的“柱子”怎么是個(gè)三角形？

那 Recharts 是怎么解決這些問題呢？

聲明式的標(biāo)簽，讓寫圖表和寫 HTML 一樣簡(jiǎn)單

貼近原生 SVG 的配置項(xiàng)，讓配置項(xiàng)更加自然

接口式的 API，解決各種個(gè)性化的需求

下面我們將仔細(xì)分析這些是怎么實(shí)現(xiàn)的。

在看代碼實(shí)現(xiàn)之前，我們先看看怎樣一步步的根據(jù)各自的需求創(chuàng)建一個(gè)線圖：

首先，通過調(diào)用 LineChart 添加一條 dataKey 為 pv 的 Line：

const data = [{ name: "a", uv: 4000, pv: 2400 }, { name: "b", uv: 3000, pv: 1398 }, ....];


  

運(yùn)行代碼后結(jié)果如下：

然后，我們可以根據(jù)自己的需求去豐富這個(gè)線圖，比如這個(gè)線圖需要一個(gè) X 軸和 Y 軸，那只需要在 LineChart 下添加一個(gè) XAxis 和 YAxis 標(biāo)簽即可：

const data = [{ name: "a", uv: 4000, pv: 2400 }, { name: "b", uv: 3000, pv: 1398 }, ....];


  
  
  

運(yùn)行代碼結(jié)果如下：

大家看到用 Recharts 繪制圖表很多時(shí)候就想拼積木一樣，那 LineChart 內(nèi)部是如何去識(shí)別這些『零件』的呢？我們先來看一個(gè)簡(jiǎn)單的函數(shù)：

const getDisplayName = (Comp) => {
  if (!Comp) { return ""; }
  if (typeof Comp === "string") { return Comp; }
  return Comp.displayName || Comp.name || "Component";
};

這個(gè)方法很簡(jiǎn)單，可以用來讀取某個(gè) ReactComponent 的名稱。在 LineChart 的代碼實(shí)現(xiàn)中，就是根據(jù) ReactComponent 的 displayName 來識(shí)別所有的 Children。我們先來看一個(gè)工具方法：

const findAllByType = (children, type) => {
  const result = [];
  let types = [];

  if (_.isArray(type)) {
    types = type.map(t => getDisplayName(t));
  } else {
    types = [getDisplayName(type)];
  }

  React.Children.forEach(children, child => {
    const childType = child && child.type && (child.type.displayName || child.type.name);
    if (types.indexOf(childType) !== -1) {
      result.push(child);
    }
  });

  return result;
};

這里 type 可以是 ReactComponent 或者 ReactComponent 數(shù)組。而 LineChart 內(nèi)部實(shí)現(xiàn)的時(shí)候就是調(diào)用這個(gè)方法來識(shí)別各個(gè)『零件』：

    ...
    render() {
        const { children } = this.props;
        const lineItems = findAllByType(children, Line);
        ...
    }

圖表的配置項(xiàng)可以非常多，但是有很多配置項(xiàng)如填充顏色、描邊顏色、描邊寬度等等這些都是SVG標(biāo)簽原生就支持的屬性，為了減小大家的配置的成本，Recharts 的組件會(huì)去解析原生的屬性。舉個(gè)例子，一個(gè)線圖里面有兩條曲線，我想給一條曲線設(shè)置成虛線，一條設(shè)置成實(shí)線，我們只需要像原生的 SVG 元素一樣設(shè)置 stroke-dasharray 屬性就行：

const data = [{ name: "a", uv: 4000, pv: 2400 }, { name: "b", uv: 3000, pv: 1398 }, ....];


  
  
  
  

結(jié)果如下：

實(shí)現(xiàn)原理也比較簡(jiǎn)單，首先 Recharts 內(nèi)部維護(hù)一份 SVG 元素支持的所有屬性，然后在渲染 SVG 元素之前，我們會(huì)去解析相應(yīng)的ReactElement的 props，看看哪些是 SVG 元素能夠支持的屬性，最終這些屬性可以傳入到渲染的 SVG 元素中。

const PRESENTATION_ATTRIBUTES = {
    fill: PropTypes.string,
    strokeDasharray: PropTypes.string,
    ...
};
const getPresentationAttributes = (el) => {
  if (!el || _.isFunction(el)) { return null; }

  const props = React.isValidElement(el) ? el.props : el;
  let result = null;

  for (const key in props) {
    if (props.hasOwnProperty(key) && PRESENTATION_ATTRIBUTES[key]) {
      if (!result) {result = {};}
      result[key] = props[key];
    }
  }

  return result;
};

關(guān)于更多SVG屬性，大家可以參考W3C標(biāo)準(zhǔn)文檔

很多時(shí)基礎(chǔ)圖表往往不能滿足所有的要求，那怎么去滿足各種個(gè)性化的需求成了圖表組件必須要考慮的事情。

Recharts 對(duì)可能會(huì)變化的元素都提供了自定義的接口，以x軸的刻度為例，普通的刻度就是一些文字，在信息圖表中，為了讓圖表更佳的生動(dòng)，視覺往往希望能夠?qū)⑽淖痔鎿Q成形象的 icon。

對(duì)于這種自定義的需求，Recharts 提供了兩種方式，第一種是通過 React Element 的方式：

const CustomizedTick = (props) => {
  const { x, y, payload, bgColor, index } = props;

  return (
      
          
      {index}
    
  );
};


  }/>
  
  
  

通過將 tick 設(shè)置成一個(gè) React Element，在拿到內(nèi)部 props 的同時(shí)，也可以非常方便的從外部傳入 props。

第二種自定義的方式是通過 function：

const renderCustomizedTick = (props) => {
  const { x, y, payload, index } = props;

  return (
      
          
      {index}
    
  );
};


  
  
  
  

這種方法，renderCustomizedTick 中拿到的參數(shù)和 CustomizedTick 的 props 是一樣的，當(dāng)然這種自定義的方法外部傳參數(shù)會(huì)稍微麻煩一些。

看到這里大家可能會(huì)好奇內(nèi)部是怎么去實(shí)現(xiàn)？原理也非常簡(jiǎn)單，我們?cè)趦?nèi)部計(jì)算好 tick 的位置等信息，然后判讀 tick 參數(shù)的類型，實(shí)現(xiàn)代碼簡(jiǎn)化如下：

let tickItem;

if (React.isValidElement(tick)) {
  tickItem = React.cloneElement(tick, props);
} else if (_.isFunction(tick)) {
  tickItem = tick(props);
} else {
  tickItem = {value};
}

看到這里大家可以發(fā)現(xiàn) Recharts 內(nèi)部主要做了計(jì)算各種 layout 的事，每個(gè)區(qū)塊具體展示什么內(nèi)容都是可以自定義的。

到這里我們已經(jīng)介紹了 Recharts 實(shí)現(xiàn)可視化組件的一些核心思想，其實(shí)這些思想不只是在可視化組件中可以應(yīng)用，很多組件也可以考慮利用這種思想來實(shí)現(xiàn)，例如表格組件就可以抽取 Table 和 Column 兩個(gè)組件，然后大家使用表格也非常簡(jiǎn)單：

  }/>
  

我們大約會(huì)在本月末，或下月初發(fā)布，

更好的動(dòng)畫支持

同步文檔更新

增加一些圖表的支持

90% 的測(cè)試覆蓋率

關(guān)于無線支持可能會(huì)放到 1.0 之后再考慮，因?yàn)?SVG 對(duì)手機(jī)的兼容性支持度一般。1.0 版本之后，會(huì)切分出 React 15.x 的 Recharts。因?yàn)?15.x 對(duì) SVG 的支持更加完善。

盡管 web 端已經(jīng)有不少優(yōu)秀的可視化庫，亦或是圖表庫，比如 Echarts，highcharts，科學(xué)界有 ggplot，他們都是可視化界的前輩。在可視化的探索上，給我們很多啟發(fā)。我們?cè)?Recharts 的初忠是給 React 社區(qū)貢獻(xiàn)一個(gè)代碼更優(yōu)雅，靈活可裝卸的圖表庫的圖表庫。

感謝團(tuán)隊(duì)可視化組的小伙伴。最后是安利時(shí)間，第一款使用 Recharts 的線上項(xiàng)目 阿里指數(shù)。