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

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

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

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

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

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

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

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

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

聲明式的標簽，讓寫圖表和寫 HTML 一樣簡單

貼近原生 SVG 的配置項，讓配置項更加自然

接口式的 API，解決各種個性化的需求

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

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

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

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


  

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

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

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


  
  
  

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

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

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

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

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)部實現(xiàn)的時候就是調(diào)用這個方法來識別各個『零件』：

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

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

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


  
  
  
  

結(jié)果如下：

實現(xiàn)原理也比較簡單，首先 Recharts 內(nèi)部維護一份 SVG 元素支持的所有屬性，然后在渲染 SVG 元素之前，我們會去解析相應(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標準文檔

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

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

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

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

  return (
      
          
      {index}
    
  );
};


  }/>
  
  
  

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

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

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

  return (
      
          
      {index}
    
  );
};


  
  
  
  

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

看到這里大家可能會好奇內(nèi)部是怎么去實現(xiàn)？原理也非常簡單，我們在內(nèi)部計算好 tick 的位置等信息，然后判讀 tick 參數(shù)的類型，實現(xià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)部主要做了計算各種 layout 的事，每個區(qū)塊具體展示什么內(nèi)容都是可以自定義的。

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

  }/>
  

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

更好的動畫支持

同步文檔更新

增加一些圖表的支持

90% 的測試覆蓋率

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

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

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