2025 年你应该知道的 5 大数据可视化库

人工智能数据平台Outerbase的 Brandon 。您可能可以想象，我有幸处理大量数据。和大多数理智的人一样，我更喜欢以图表的形式可视化我的数据，而不是整天浏览表格、行和列（尽管这些人确实存在）。

与大多数 BI 工具想要让您相信的相反，图表和图形实际上可以很漂亮，而且很有用。然而，市面上有这么多库，选择合适的库可能会让人不知所措。

以下是我关注的五个方面：

1. Shadcn

2. Tremor

3. Astra UI by Outerbase

4. visx

5. nivo

如果您真的想构建一些更高级别的、令人赏心悦目的数据可视化，您将在下面的一个库中找到您想要的内容。

1. shadcn

shadcn如果您身处前端世界，您很可能听说过他们。shadcn 是一个由 Vercel 支持的组件库，最近推出了他们的图表组件。shadcn 位于Recharts之上，它提供了从一开始就看起来很棒的图表组件。您可以将它们复制并粘贴到您的应用程序中，同时仍然可以充分利用 Recharts 的全部功能。

我喜欢 shadcn 不会将用户锁定在自定义抽象中。当 Recharts 更新时，他们不必等待 shadcn 跟上。相反，用户可以立即采用这些新功能。

以下是一个简单示例：

import { Bar, BarChart } from "recharts"
import { ChartContainer, ChartTooltipContent } from "@/components/ui/charts"

export function MyChart() {
  const data = [
    { label: 'Jan', value: 30 },
    { label: 'Feb', value: 55 },
    { label: 'Mar', value: 40 },
  ];

  return (
    <ChartContainer>
      <BarChart data={data}>
        <Bar dataKey="value" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

为什么选择 Shadcn？

• 只需最少的设置即可获得具有吸引力的默认设置。

• 基于Recharts，因此易于扩展。

• 随时获取 Recharts 更新。

2. Tremor

Tremor是一个用于图表和仪表板的 React 组件库，令人惊讶的是，它们也刚刚被Vercel 收购（我感觉到了一种模式……）它有 35 多个基于 React、Tailwind CSS 和 Radix UI 构建的开源组件。对于任何想要轻松获得可用于生产的视觉效果的人来说，它都是一个受欢迎的选择。

Tremor 还注重可访问性和键盘导航。如果您需要一个快捷且不费力的仪表板，Tremor 值得一看。

以下是一个简短的示例代码片段：

import { Card, Title, BarChart } from '@tremor/react';

export default function Example() {
  const chartData = [
    { day: 'Mon', sales: 10 },
    { day: 'Tue', sales: 20 },
    { day: 'Wed', sales: 15 },
  ];

  return (
    <Card>
      <Title>Sales Overview</Title>
      <BarChart
        data={chartData}
        dataKey="day"
        categories={["sales"]}
        colors={["blue"]}
      />
    </Card>
  );
}

为什么会出现震颤？

• 干净的默认设置和漂亮的样式。

• 大量的 UI 元素，不仅仅是图表。

• 具有良好的可访问性。

3. Astra UI by Outerbase

Astra UI是一个基于 Apache ECharts 构建的 Web 组件库。由于它在底层使用 ECharts，因此自定义选项基本上是无穷无尽的。Web 组件方法非常有趣 - 这意味着您可以将这些图表嵌入任何地方，无论您使用的是 React、Vue、Svelte 还是纯 HTML。

一大优点是 Astra UI 与 Outerbase 数据平台的集成。例如，Outerbase 可以通过其 CDC（变更数据捕获）系统提供实时更新数据，因此您的图表始终是最新的。

这是一个简短的例子：

<astra-composed-chart
  type="line"
  data={stocksData}
  keyX="Date"
  keyY="Close"
  width="600"
  height="400"
  header="Stock Prices"
  subheader="Daily closing prices"
></astra-composed-chart>

为什么选择 Astra UI？

• 由 Apache ECharts 提供支持，因此功能强大且灵活。

• Web 组件意味着您不受特定框架的束缚。

• 使用 Outerbase 的 CDC 可以实时更新图表。

如果您已经在使用 Outerbase 或想要更简单的实时数据获取方式，Astra UI 可能是不错的选择。Outerbase 的 AI 甚至可以自动为您生成图表。

4. visx

visx是 Airbnb 提供的一组较低级别的可视化原语。它在底层使用 D3，但将所有内容公开为 React 组件。我喜欢在需要完全控制数据显示方式（直至最小的细节）的情况下使用 visx。

visx 对样式也没有意见，因此我可以用自己的方式处理动画、状态管理或主题。这可能是好事也可能是坏事，取决于你喜欢库中的结构程度。

以下是使用 visx 的分组条形图的示例：

import { BarGroup } from '@visx/shape';
import { Group } from '@visx/group';
import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';

export function MyVisxChart({ data }) {
  const x0Scale = scaleBand({
    domain: data.map(d => d.category),
    padding: 0.2,
    range: [0, 400],
  });

  const x1Scale = scaleBand({
    domain: ['valueA', 'valueB'],
    padding: 0.1,
    range: [0, x0Scale.bandwidth()],
  });

  const yScale = scaleLinear({
    domain: [0, Math.max(...data.flatMap(d => [d.valueA, d.valueB]))],
    range: [300, 0],
  });

  const colorScale = scaleOrdinal({
    domain: ['valueA', 'valueB'],
    range: ['#008080', '#800080'],
  });

  return (
    <svg width={500} height={400}>
      <Group left={50} top={50}>
        <BarGroup
          data={data}
          keys={['valueA', 'valueB']}
          height={300}
          x0Scale={x0Scale}
          x1Scale={x1Scale}
          yScale={yScale}
          color={colorScale}
        />
      </Group>
    </svg>
  );
}

为什么选择 visx？

• 非常灵活且不固执己见。

• 让您构建真正自定义的可视化效果。

• 分成多个包，这样您就可以保持较小的包大小。

5. nivo

nivo是另一个依赖于 d3 的 React 库。它提供了各种各样的图表类型，如果您需要服务器端渲染，它将非常有用。我还喜欢它使用react-spring来实现流畅的过渡和动画。

我最喜欢的功能之一是它的 Playground，它可以让您尝试图表配置并实时查看更改。以下是 nivo 中条形图的基本示例：

import { ResponsiveBar } from '@nivo/bar'

const data = [
  { country: 'AD', hotDog: 75 },
  { country: 'AE', hotDog: 92 },
];

export const MyBarChart = () => (
  <div style={{ height: 400 }}>
    <ResponsiveBar
      data={data}
      keys={['hotDog']}
      indexBy="country"
      margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
      colors={{ scheme: 'category10' }}
      borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
      axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'Country',
        legendPosition: 'middle',
        legendOffset: 32,
      }}
    />
  </div>
);

为什么选择 nivo？

• 大量现成的图表类型。

• 满足 SEO 或性能需求的服务器端渲染。

• 通过 react-spring 实现流畅的动画和过渡。

结论

选择正确的数据可视化库取决于手头的工作。如果您已经在使用 nextjs 并且想要一些快速的东西，Shadcn 是一个不错的选择。如果您需要一个完整的仪表板解决方案而不需要从头开始编写所有内容，Tremor 会很方便。如果您看重开箱即用的强大、可定制和美观的图表，Outerbase的 Astra UI可能是完美的选择。如果您喜欢从头开始构建，visx 是个不错的选择，如果您想要具有高级转换或服务器端渲染的各种图表类型，nivo 是一个不错的选择。

我总是提醒自己，最好的图表库是能够帮助我（和我的用户）最快查看和理解数据的库。如果您正在寻找一个自托管或托管平台来管理您的数据，并且想要一种轻松嵌入实时更新图表的方法，请查看带有 Astra UI 的 Outerbase。这是一个简洁的解决方案，不会强迫您自己构建所有内容。

最重要的是，数据可视化应该清晰、快速且令人愉悦。这些库各自采用不同的方式实现同一目标。无论您选择哪一个，我都希望您能够享受将数据转化为见解的乐趣。