Top 5 Data Visualization Libraries You Should Know in 2025

2025-06-04

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

大家好！我是来自人工智能数据平台Outerbase的 Brandon 。你们可能已经猜到了，我有幸处理大量数据。和大多数理智的人一样，我更喜欢以图表的形式可视化数据，而不是整天在表格、行和列之间切换（虽然确实有人这样做）。

与大多数 BI 工具的预期相反，图表和图形实际上可以美观且实用。然而，市面上库种类繁多，选择合适的库可能会让人不知所措。

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

  1. 沙德恩
  2. 震颤
  3. Outerbase 的 Astra UI
  4. 维斯克斯
  5. 尼沃

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

阴影图表

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

为什么选择 Shadcn？

  • 只需极少设置即可获得有吸引力的默认设置。
  • 基于 Recharts，因此很容易扩展。
  • 随时获取 Recharts 更新。

震颤仪表板

2. 震颤

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

为什么会出现震颤？

  • 干净的默认值和漂亮的样式。
  • 大量的 UI 元素，而不仅仅是图表。
  • 具有良好的可访问性。

outerbase astra-ui 图表

3. Outerbase 的 Astra UI

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>
Enter fullscreen mode Exit fullscreen mode

为什么选择 Astra UI？

  • 由 Apache ECharts 提供支持，因此既强大又灵活。
  • Web 组件意味着您不受特定框架的束缚。
  • 使用 Outerbase 的 CDC 可以实时更新图表。

如果您已经在使用 Outerbase，或者想要更便捷地获取实时数据，Astra UI 或许是一个不错的选择。Outerbase 的 AI 甚至可以自动为您生成图表。

visx图表

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

为什么选择 visx？

  • 非常灵活且不固执己见。
  • 让您构建真正自定义的可视化效果。
  • 分成多个包，这样您就可以保持较小的包大小。

nivo 图表

5. 尼沃

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>
);
Enter fullscreen mode Exit fullscreen mode

为什么选择 nivo？

  • 大量现成的图表类型。
  • 满足 SEO 或性能需求的服务器端渲染。
  • 通过 react-spring 实现流畅的动画和过渡。

结论

选择合适的数据可视化库取决于手头的工作。如果您已经在使用 NextJS 并且想要快速上手，Shadcn 是一个不错的选择。如果您需要一整套仪表板解决方案，又不想从头开始编写所有内容，Tremor 会很方便。如果您看重开箱即用、功能强大、可自定义且美观的图表，Outerbase的 Astra UI或许是您的不二之选。如果您喜欢从头开始构建，visx 是个不错的选择；如果您想要各种图表类型，并具有高级过渡效果或服务器端渲染功能，nivo 也是一个不错的选择。

我始终提醒自己，最好的图表库是能够帮助我（以及我的用户）最快查看和理解数据的库。如果您正在寻找一个自托管或托管平台来管理数据，并且希望能够轻松地嵌入实时更新的图表，不妨看看带有 Astra UI 的 Outerbase。这是一个简洁的解决方案，无需您自行构建所有功能。

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

文章来源：https://dev.to/burcs/top-5-data-visualization-libraries-you-should-know-in-2025-21k9
Devto 翻译
PREV
关于 TypeScript 的注释：React Hooks
NEXT
带有 ID 的 DOM 元素是全局变量