五个趋势化的React可视化库

最新推荐文章于 2024-06-25 14:35:18 发布

dfsgwe1231

最新推荐文章于 2024-06-25 14:35:18 发布

阅读量338

点赞数

文章标签： javascript 后端数据库 ViewUI

在使用Cube.js时，我们看到了许多不同的可视化库。鉴于Cube.js在SQL数据库之上提供了一个用于分析的API层，并且没有在可视化字段上发挥作用，因此可以使用任何图表库来与其构建仪表板。这就是为什么我们一直在寻找一个对开发人员友好的漂亮可视化库的原因。

以下列表适用于React特定的库。我将尝试使用其中的每一个，使用轴格式，图例和工具提示来构建几乎相同的堆叠条形图。对于数据后端，我们将使用Heroku上托管的Cube.js。我还将使用Cube.js React绑定，它使用了render props技术，并且本身不渲染任何东西，让我们可以使用任何图表库构建所需的内容。

在此过程中，我还将使用两个非常方便的库moment.js和numeral.js用于日期和数字格式。

作为数据输入，我们将使用Cube.js Javascript客户端中的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
  },
  …
]

现在，让我们跳到列表。

如果您没有看到自己喜欢的库，或者只是想让我添加一个库，请在 这个Public Slack社区 ping我 。 我很高兴在列表中添加尽可能多的库。

图表

图表提供了一组模块化的制图组件，并通过使您将这些组件混合在一起以轻松地构建诸如组合折线图和条形图之类的东西，发挥了出色的作用。

这是迄今为止最受欢迎的图书馆。在Github上，它的星数超过11000，但也有大量（迄今为600）未解决的问题。

该文档非常详尽，但某些部分缺少详细信息。您可以在Rechart的网站上找到大量示例，这可能是构建自己的图表的良好起点。

图表具有许多自定义选项。除此之外，它还允许通过自定义SVG元素进行低级自定义。

这是在图表中构建堆积条形图的方法：

在此示例以及所有以下示例中，我将使用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>
);

在CodeSanbox中尝试一下。

胜利

胜利遵循与图表相同的可组合模式。它由Formidable开发，该公司除了Victory之外，还具有其他可靠的开源库。它是列表中唯一也可与React Native一起使用的库。

它是仅次于Recharts的第二受欢迎的图书馆，在Github上拥有超过7K的星标，但未解决的问题比Recharts少5倍。胜利在Spectrum上进行了社区聊天。

它有充分的文件记载，并有一个示例画廊。

胜利带有两个主题：灰度和材质，您可以创建客户主题以在所有图表中保持一致的外观。

在下面，您可以看到带有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>
);

在CodeSanbox中尝试一下。

尼沃

除了“图表与胜利”， Nivo还是建立在D3之上，并且是特定于React的。但是与以前的库不同，它是不可组合的。它为每种图表类型提供一个组件，并且该组件通过多个道具进行配置。 Nivo是作为一组特定图表类型的程序包分发的，例如@ nivo / bar。因此，需要安装特定的软件包才能使用特定的图表类型。

该项目本身非常活跃。它在Github上拥有超过5k的星星，并且在社区聊天中有近300名成员。

它具有交互式文档，您可以在其中为图表构建配置。虽然不错，但它缺少很好的旧文本API参考和搜索选项。它还有一个带有示例的故事书。它帮助我大大缩短了构建第一张图表的时间。与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> 
);

在CodeSanbox中尝试一下。

商业图表

BizCharts是基于G2 （可视化语法）的特定于React的可视化库。它得到了阿里巴巴的支持，并与Ant Design Framework很好地结合在一起。

在Github上它几乎有4k星，但是大多数开发工作都是中文的，大部分文档也是如此。我认为团队在翻译文档方面做得很出色，但仍在进行中。

但是，它缺少英文文档，因此该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>
    )}
  />
);

在CodeSanbox中尝试一下。

可视化

React-vis是由Uber开发的，在5.4k Github明星，150个未解决的问题以及最近提交的内容中似乎很活跃。与列表中的大多数库一样，它是模块化的。它带有一些不错的默认样式，这些样式应作为CSS文件单独导入。

与Nivo相同，它具有带示例的Storybook。组件API也有详细记录。在自定义方面，您可以通过自定义CSS样式控制外观。 React-vis还提供了一个用于构建自定义SVG 图表的特定组件，即CustomSVGSeries 。

该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>
);

在CodeSanbox中尝试一下。

如果您没有看到自己喜欢的库，或者只是想让我添加一个库，请在 这个Public Slack社区 ping我 。 我很高兴在列表中添加尽可能多的库。

From: https://hackernoon.com/react-visualization-libraries-in-2019-ek26o3sd3

dfsgwe1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五个趋势化的React可视化库

在使用Cube.js时，我们看到了许多不同的可视化库。鉴于Cube.js在SQL数据库之上提供了一个用于分析的API层，并且没有在可视化字段上发挥作用，因此可以使用任何图表库来与其构建仪表板。这就是为什么我们一直在寻找一个对开发人员友好的漂亮可视化库的原因。以下列表适用于React特定的库。我将尝试使用其中的每一个，使用轴格式，图例和工具提示来构建几乎相同的堆叠条形图。对于数据后端...
复制链接

扫一扫