阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 01月29日

2025 年的 5 個最佳資料視覺化函式庫

大家好，我是來自Outerbase人工智慧資料平台的 Brandon。正如您可能想像的那樣，我有幸處理大量資料。就像大多數理智的人一樣，我更喜歡以圖表的形式視覺化我的資料，而不是整天瀏覽表格、行和列（儘管這些人確實存在）。

與大多數 BI 工具希望您相信的相反，圖表和圖形實際上可以很漂亮並且很有幫助。然而，有這麼多的圖書館，選擇合適的圖書館可能會讓人感到不知所措。

如果您真的想建立一些更高級、引人注目的資料視覺化，那麼您將在下面的庫中找到您想要的內容。

shadcn圖表

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>
  )
}

為什麼是沙德恩？

具有吸引力的預設設置，只需最少的設定。
基於Recharts，所以很容易擴充。
隨時取得 Recharts 更新。

震顫儀表板

Tremor

Tremor是一個用於圖表和儀表板的 React 元件庫，令人驚訝的是它們也剛剛被Vercel 收購（我在這裡感覺到了一種模式...）它有35 多個基於React、Tailwind CSS 和基數使用者介面。對於那些想要輕鬆獲得可立即投入生產的視覺效果的人來說，這是一個受歡迎的選擇。

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 元素，而不僅僅是圖表。
良好的可存取性已融入其中。

Outerbase Astra-ui 圖表

Outerbase 的 Astra UI

Astra UI是一個建立在 Apache ECharts 之上的 Web 元件庫。因為它在底層使用 ECharts，所以自訂選項基本上是無窮無盡的。 Web 元件方法非常有趣 - 這意味著您可以將這些圖表嵌入到任何地方，無論您使用的是 React、Vue、Svelte 還是只是普通的 ole HTML。

一大優點是 Astra UI 與 Outerbase 資料平台的整合。例如，Outerbase 可以透過其 CDC（變更資料擷取）系統提供即時更新資料，因此您的圖表始終是最新的。

{% 故障有用-ritzy-flea 應用%}

這是一個簡短的例子：

<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 甚至可以自動為您產生圖表。

visx圖表

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？

非常靈活且不固執己見。
讓您建立真正的自訂視覺化。
分成多個包，因此您可以保持較小的包大小。

尼沃圖表

nivo

nivo是另一個在底層依賴 d3 的 React 函式庫。它提供了各種各樣的圖表類型，如果您需要伺服器端渲染，它會很有幫助。我還喜歡它使用React-Spring來實現平滑的過渡和動畫。

我最喜歡的功能之一是它的遊樂場，它可以讓您嘗試圖表配置並即時查看變化。這是 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>
);

為什麼是尼沃？

大量開箱即用的圖表類型。
滿足 SEO 或效能需求的伺服器端渲染。
透過react-spring實現平滑的動畫和過渡。

結論

選擇正確的資料視覺化庫取決於手邊的工作。如果你已經在使用 nextjs 並且想要快速的東西，Shadcn 是一個不錯的選擇。如果您需要一個完整的儀表板解決方案，而不需要從頭開始編寫所有內容，那麼 Tremor 會很方便。如果您重視功能強大、可自訂且美觀的開箱即用圖表， Outerbase的 Astra UI 可能是完美的選擇。如果您喜歡從頭開始建立內容，visx 會很棒，如果您想要具有高級轉換或伺服器端渲染功能的各種圖表類型，nivo 是一個強大的選擇。

我總是提醒自己，最好的圖表庫是幫助我（和我的用戶）最快查看和理解資料的圖表庫。如果您正在尋找一個自託管或託管平台來管理您的資料，並且想要一種簡單的方法來嵌入即時更新的圖表，請查看 Outerbase with Astra UI。這是一個巧妙的解決方案，不會強迫您自己全部建造。

最重要的是，資料視覺化應該清晰、快速且令人愉悅。這些庫各自採取不同的途徑來實現相同目標。無論您選擇哪一個，我希望您能享受將資料轉化為見解的樂趣。

原文出處：https://dev.to/burcs/top-5-data-visualization-libraries-you-should-know-in-2025-21k9

1個讚 0留言 13瀏覽

按讚的人：