最近我们在开发Cube.js时，调研了许多不同的可视化库。Cube.js在兼容SQL语法的数据库之上构建用于分析的API层，因此任何图表库均能够和Cube.js一起用来构建仪表板。这就是为什么我们一直在寻找一个优质而且对于开发者更友好的可视化库。

以下的列表仅针对React专用库。我会尝试使用坐标轴、图例和工具提示来构建几乎一模一样的堆叠式的条形图。在数据后端方面，我们将使用Heroku托管的Cube.js。我还会使用Cube.js 的React 组件，它使用了render props技术，并且它只渲染自己，所以我们能通过任何图表库构建我们想要的任何东西。

在此期间，我还会使用2个非常好用的库，分别是moment.js和 numeral.js，它们分别用于日期和数字的格式化。

作为数据输入，我们还会使用来自Cube.js Javascript客户端的https://cube.dev/docs/@cubejs-client-core \l result-set-chart-pivot \t _blank">resultSet.chartPivot() 方法。它会返回一个数据数列，在我们的例子当中，它长这样：

[
  {
    "x": "2017-01-01T00:00:00.000",
    "completed, Orders.count": 208,
    "processing, Orders.count": 252,
    "shipped, Orders.count": 233
  },
  {
    "x": "2017-02-01T00:00:00.000",
    "completed, Orders.count": 188,
    "processing, Orders.count": 209,
    "shipped, Orders.count": 222
  },
  …
]

现在，让我们转向列表。

如果你没有发现你中意的库，或者想让我再添加一个库，请在这个Slack频道ping我。我非常乐意在列表中添加更多的库：

https://cubejs-community.herokuapp.com/

Recharts

http://recharts.org/

Recharts提供了一组模块化的图表组件，并且能够让你将这些组件进行组合，从而轻易地构建许多东西，比如曲线条形组合图。

它是我列出这几个里面最受欢迎的库。它在Github上有超过11000颗星，但同时也有大量的开启的issue（迄今为止为600个）。

它的文档非常全面，但缺乏某些方面的细节。你可以在Rechart’s 网站上(http://recharts.org/)找到一些例子，然后根据它们开始构建你自己的图表。

Recharts针对定制提供了多样化的配置项。除此以外，它还允许通过定制化SVG元素进行低级别的定制。下面就是怎样在Recharts中构建堆叠式条形图的方法：

在这个例子以及所有随后的例子中，我都使用了colors、dateFormatter和numberFormatter变量。下面展示了我是如何定义它们的：

const numberFormatter = item => numeral(item).format("0,0");
const dateFormatter = item => moment(item).format("MMM YY");
const colors = ["#7DB3FF", "#49457B", "#FF7C78"];
export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={resultSet.chartPivot()}>
      <XAxis tickFormatter={dateFormatter} dataKey="x" />
      <YAxis tickFormatter={numberFormatter} />
      {resultSet.seriesNames().map((series, i) => (
        <Bar
          stackId="a"
          dataKey={series}
          name={series.split(",")[0]}
          fill={colors[i]}
        />
      ))}
      <Legend />
      <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />
    </BarChart>
  </ResponsiveContainer>
);

Demo见：

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/recharts

Victory

https://formidable.com/open-source/victory/

Victory使用了和Recharts相同的组合模式。

它是由Formidable开发的。除了Victory外，Formidable还拥有其它可靠的开源库。它是列表中唯一一个能够兼容React Native的库。

Victory是仅次于Recharts的第二受欢迎的库，在Github上有7000颗星，但是它的开启的issue只是Recharts的五分之一。Victory在Spectrum上有一个社区聊天群。

它的文档化良好而且有一个示例陈列馆。

Victory提供了2个样式风格：灰度和Material，并且能让你创建客户主题，从而使所有图表的外观保持一致。下面，你可以看到我们堆叠式的条形图在Victory里面的代码。

const transformResult = (series, resultSet) =>
  resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));
export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <div height={300}>
    <VictoryChart
      containerComponent={
        <VictoryVoronoiContainer
          voronoiDimension="x"
          labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}
          labelComponent={
            <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />
          }
        />
      }
      domainPadding={{ x: 20, y: [0, 20] }}
    >
      <VictoryLegend
        colorScale={colors}
        data={resultSet.seriesNames().map(series => ({
          name: series.split(",")[0]
        }))}
        orientation="horizontal"
        y={275}
        x={130}
      />
      <VictoryAxis tickFormat={dateFormatter} tickCount={8} />
      <VictoryAxis dependentAxis />
      <VictoryStack colorScale={colors}>
        {resultSet.seriesNames().map((series, i) => (
          <VictoryBar key={i} data={transformResult(series, resultSet)} />
        ))}
      </VictoryStack>
    </VictoryChart>
  </div>
);

Demo见：

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/victory

Nivo

https://nivo.rocks/

同Recharts和Victory一样，Nivo基于D3而且是React特有的。但与前面的库不同的是，它不支持图表组合。每个图表类型仅提供了一个组件，而且这个组件是通过多个props来配置的。Nivo是针对特定的图表类型如@nivo/bar的一套程序包。所以，你需要安装特定的程序包，才能使用特定的图表类型。

该项目本身非常活跃。它在Github上有5000颗星，在社区聊天群中有300名成员。

它的文档非常互动化，你可以根据文档构建图表的配置。虽然它很好，但是它缺乏一个纯文本形式的API参考和搜索功能。此外，它还有一个带有示例的Storybook。它大大地缩减了我创建第一张表的时间。同Victory一样，Nivo让你能够创建自己的主题，从而使所有图标的外观保持一致。

我们将在堆叠式的条形图中使用@nivo/bar包。你可以在下面找到代码示例和CodeSandbox的演示。

//https://github.com/plouc/nivo/issues/138#issuecomment-373015114
const ticksFormmater = (ticksCount, value, data, dateFormatter) => {
  const valueIndex = data.map(i => i.x).indexOf(value);
  if (valueIndex % Math.floor(data.length / ticksCount) === 0) {
    return dateFormatter(value);
  }
  return "";
};
export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <div style={{ height: 300 }}>
    <ResponsiveBar
      enableLabel={false}
      colors={colors}
      data={resultSet.chartPivot()}
      keys={resultSet.seriesNames()}
      indexBy="x"
      enableGridY={false}
      padding={0.3}
      margin={{ top: 60, right: 80, bottom: 60, left: 40 }}
      axisLeft={{
        format: numberFormatter
      }}
      axisBottom={{
        format: value =>
          ticksFormmater(8, value, resultSet.chartPivot(), dateFormatter)
      }}
      tooltip={({ id, value, color }) => (
        <strong style={{ color }}>
          {id.split(",")[0]}: {numberFormatter(value)}
        </strong>
      )}
      legends={[
        {
          anchor: "bottom",
          direction: "row",
          translateY: 50,
          itemsSpacing: 2,
          itemWidth: 150,
          itemHeight: 20,
          itemDirection: "left-to-right"
        }
      ]}
    />
  </div>
);

Demo见：

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/nivo

BizCharts

https://bizcharts.net/products/bizCharts

BizCharts是一个基于G2的React特有的可视化库，G2是一种可视化语法。BizCharts由阿里巴巴支持，并且能够和Ant Design框架良好配合。

它在Github上约有4000颗星，但是大部分的开发仍是中文的，其文档也是如此。据我所知，该团队正在翻译这些文档，但是仍未完成所有的翻译。

虽然它欠缺英文文档，但是其API非常简单易懂。唯一的困难是你需要将数据格式转化成堆叠式图表特有的格式。

const stackedChartData = resultSet => {
  const data = resultSet
    .pivot()
    .map(({ xValues, yValuesArray }) =>
      yValuesArray.map(([yValues, m]) => ({
        x: resultSet.axisValuesString(xValues, ", "),
        color: resultSet.axisValuesString(yValues, ", "),
        measure: m && Number.parseFloat(m)
      }))
    )
    .reduce((a, b) => a.concat(b));
  return data;
};
export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
      <Chart
        scale={{ x: { tickCount: 10 } }}
        height={400}
        data={stackedChartData(resultSet)}
        forceFit
      >
        <Axis name="x" label={{ formatter: dateFormatter }} />
        <Axis label={{ formatter: numberFormatter }} name="measure" />
        <Tooltip />
        <Geom
          type="intervalStack"
          position={`x*measure`}
          color={["color", colors]}
        />
        <Legend itemFormatter={item => item.split(",")[0]} />
      </Chart>
    )}
  />
);

Demo见：

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/bizcharts

React-vis

https://uber.github.io/react-vis/

React-vis是由Uber开发的，而且目前在Github上有5400颗星、150个开启的issue，最近也有很多提交，因此它似乎非常活跃。它是模块化的，这点同列表中的大多数库一样。它还有许多非常棒的默认风格，这些风格必须单独以CSS文件的方式导入。

同Nivo一样，React-vis也有带有示例的故事簿。其组件API的文档化也非常好。在定制方面，你可以通过定制的CSS风格来控制其外观和给人的感觉。React-vis还提供了一个特别的组件即 CustomSVGSeries来构建定制的SVG图表。

其API和Victory的相似。下面，你可以看到，我使用了与Victory代码段几乎一模一样的transformResult。

const transformResult = (series, resultSet, dateFormatter) =>
  resultSet
    .chartPivot()
    .map(element => ({ x: Date.parse(element.x), y: element[series] }));
export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <XYPlot xType="time" height={300} width={500} stackBy="y">
    <XAxis tickFormat={dateFormatter} tickSize={8} />
    <YAxis />
    {resultSet.seriesNames().map((series, i) => (
      <VerticalBarSeries
        cluster="stack 1"
        key={i}
        color={colors[i]}
        data={transformResult(series, resultSet, dateFormatter)}
      />
    ))}
    <DiscreteColorLegend
      colors={colors}
      items={resultSet.seriesNames().map(i => i.split(",")[0])}
      orientation="horizontal"
      style={{ position: "absolute", left: 130, bottom: -30 }}
    />
  </XYPlot>
);

Demo见：

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/react-vis

查看英文原文：https://blog.statsbot.co/react-visualization-libraries-in-2019-91be49a01158

你喜欢的React可视化库是哪个呢？欢迎留言分享。

创作场景

2019 年值得推荐的 React 可视化库