許多應用程式使用圖表或圖形進行資料視覺化，這可以使用庫或底層技術來實現。庫提供時間效率、各種圖表類型和自訂選項。

作為開發人員，了解這些選項至關重要。雖然有些專案可能選擇手動實施，但許多專案都受益於圖表庫的效率。使用這些庫可以節省時間，並可以存取各種圖表類型和樣式選項來滿足您的需求。

在本文中，我們將踏上旅程，了解七個令人驚嘆的圖表庫、它們的功能以及如何使用它們。讓我們來看看！

1. Latitude for React：將圖表整合到前端應用程式的完美伴侶

網址： https://docs.latitude.so/react/getting-started/introduction

是的，那就是我們！

Latitude 是用於嵌入式分析的開源框架，可讓您快速將 SQL 查詢公開為 API 端點。他們的產品中包括@latitude-data/react ，這是一組原生 React 元件，用於輕鬆繪製來自 Latitude API 的資料。如果您選擇攜帶自己的資料，它還可以用作獨立的圖表庫。

Latitude for React 的主要特性

• 多種圖表類型：提供多種圖表類型顯示。例如長條圖、圓餅圖、面積圖、分散圖、混合圖等。

• 高度可自訂的元件：元件預先捆綁了一組可用主題，或者您可以選擇輕鬆建立自己的自訂主題。最重要的是，大多數元件都可以使用自訂 html 類別進行擴充。

• 自動執行查詢或提供您自己的資料：Latitude 為每個圖表元件提供兩個版本。其中一個版本會自動執行您的緯度查詢。另一個版本期望接收資料作為道具，讓使用者負責取得它。

如何使用 Latitude for React 👀

首先，在您的 React 專案中安裝 Latitude 的 React 套件：

npm install --save @latitude-data/react

之後，匯入 Latitude 元件所使用的核心樣式：

import '@latitude-data/react/dist/index.css';

帶有緯度後端

如果您要從 Latitude 後端取得資料，請在專案根目錄下使用 LatitudeProvider 包裝您的應用程式：

import { LatitudeProvider } from '@latitude-data/react';

function App() {
  return (
    <LatitudeProviderapiConfig={{
        host: <YOUR_LATITUDE_API_HOST>
      }}>
      {/* Your app content */}
    </LatitudeProvider>);
}

並使用 Latitude 的任何帶有Query前綴的圖表元件：

import { QueryLineChart } from '@latitude-data/react';

function MyComponent() {
  return (
    <QueryLineChart
      queryPath='titles'
      params={{
        start_year: 2012,
        end_year: 2014
      }}
      x='release_year'y={[
        { name: 'count_shows' },
        { name: 'count_movies' }
      ]}
      xTitle='Year'
      yTitle='Titles'/>
  );
}

在此範例中，queryPath 對應於 Latitude 後端中定義的查詢的路徑。

作為獨立的圖表庫

只需使用獨立元件，例如：

import { LineChart } from '@latitude-data/react';
function MyComponent() {
  const data = [
    {
      release_year: 2010,
      count_shows: 10,
      count_movies: 2
    }
  ]
  return (
    <LineChart
      data={data}
      x='release_year'
      y={[
        { name: 'count_shows' },
        { name: 'count_movies' }
      ]}
    />
   );
}

請閱讀文件，以取得有關如何使用緯度動態顯示資料的更深入指南。

您可以隨時在 GitHub 上為我們的專案做出貢獻，如果您能為我們的專案給我們一顆星，我們將不勝感激！

🌟 GitHub 上 React 的 Star Latitude

2. D3.js：用於資料視覺化的JavaScript函式庫

D3 的網站： https://d3js.org

D3 是一個低階圖表庫，提供無與倫比的客製化和靈活性。代價是學習曲線陡峭，並且與 React 或 Svelte 等常見前端框架的整合更加困難。如果您有一些非常具體的圖表需求，d3.js 可能是您唯一的選擇，但是，如果您希望在應用程式中快速整合一些簡單的圖表，那麼其他地方還有更好的選擇。

D3.js 的主要特性

• 自訂和靈活性： D3.js 提供對 SVG、HTML 和 CSS 的低階存取，允許對視覺元素進行細粒度控制。這使得它具有高度的靈活性和可自訂性。

• 模組化： D3.js 高度模組化，各種模組可以單獨使用，也可以一起使用。這允許對捆綁包大小和效能最佳化進行更多控制。

• 強大的轉換和動畫： D3.js 為轉換和動畫提供強大的支持，為資料更新提供流暢而複雜的動畫。

• 社區和生態系統： D3.js 擁有一個龐大且活躍的社區，提供大量文件、範例和插件。這使得您可以更輕鬆地找到支援和資源。

如何使用 D3.js 👀

在您的專案中安裝 d3 的 npm 套件：

npm install d3

以下是有關如何將圖表新增至 id 為#chart的 html 元件的範例程式碼：

import * as d3 from 'd3';

// Data for the bar chart
const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 }
];

// Set the dimensions and margins of the graph
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 500 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

// Append the svg object to the body of the page
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// X axis
const x = d3.scaleBand()
    .range([0, width])
    .domain(data.map(d => d.name))
    .padding(0.1);
svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("class", "axis-label")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Y axis
const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);
svg.append("g")
    .call(d3.axisLeft(y))
    .selectAll("text")
    .attr("class", "axis-label");

// Bars
svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.name))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.value));

正如您所看到的，D3.js 通常比其他替代方案更冗長，但它使您可以最大程度地控制可視化的各個方面。

D3 是免費且開源的。如果您覺得該專案很有趣，請在 GitHub 上給他們一個 Star ⭐️！他們目前的星數超過 108k！

在 GitHub 上關注 D3.js ⭐️

3. Chart.js：用於基於 HTML 的圖表的靈活 JavaScript 程式庫

網址： https://www.chartjs.org

目前是業界最受歡迎的圖表庫之一，也是最容易使用的圖表庫之一。主要因其透過使用 Canvas 進行呈現而聞名，這與某些僅將資料呈現為 SVG 的圖表庫不同。

Chart.js 的主要特性

• 效能：Chart.js 可以接受內部資料結構，從而減少解析和規範化的需要，從而提高效能。您還可以配置資料抽取，以在渲染資料集之前減少資料集的大小，從而加快渲染速度。 canvas的使用壓縮了DOM樹上的開銷；這有助於最大限度地減少捆綁包中 Chart.js 程式碼的大小，從而加快載入時間。

• 可存取性：與大多數圖表庫相比，Chart.js 具有非常直接的方法，充分了解您所做的一切都在畫布上執行。您不需要複雜的自訂，因為它允許您使用其任何自訂選項來設定樣式、主題等。

• 出色的開發人員體驗：除了擁有非常出色的社群影響力之外，Chart.js 還擁有簡單明了的文件，當出現新內容時，這些文件會經常更新。它還提供與您最喜歡的 JavaScript 框架的集成，例如 React、Svelte 等。

• 圖表響應能力：預設情況下，Chart.js 提供響應式圖表。您可以自動將螢幕調整為不同的尺寸，並且它為圖表提供了可調整的尺寸。它確保您在所有裝置上都能獲得良好的資料視覺化效果。

如何使用 Chart.js 👀

Chartjs 可以透過 npm 安裝或在執行時透過 CDN 直接下載：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

如果你覺得這個專案很酷，你可以在GitHub上給它一個Star⭐️！他們目前的星數超過 63k。

GitHub 上的 Star Chart.js ⭐️

4. Apache ECharts：用於快速建立圖表的JavaScript視覺化工具

網址： https://echarts.apache.org

ECharts 是一個開源資料視覺化函式庫，最近越來越受歡迎。它由流行的Apache基金會建置，並依賴ZRender來呈現其圖形。與其他相比，它更複雜；它僅呈現動態資料並具有不同的顯示方式。

ECharts的主要特點

• 廣泛的圖表類型：ECharts 支援大量的圖表類型，實際上比大多數其他競爭對手更支援更多。其中包括長條圖、折線圖、圓餅圖、散佈圖、地圖、雷達圖、箱線圖、熱圖、平行座標、桑基圖等。這種多功能性允許用戶以多種格式視覺化資料。

• 互動性： ECharts的突出特點之一是其豐富的互動性。它包括對互動式元素的內建支持，例如工具提示、縮放、平移和資料突出顯示。用戶可以與視覺化進行交互，以更深入地了解資料。

• 效能： ECharts 專為高效能而設計，能夠有效處理大型資料集。它利用 Canvas 和 WebGL 進行渲染，這比傳統的基於 SVG 的渲染效能更高，適用於複雜的視覺化和大資料量。

如何開始使用 Apache ECharts 👀

使用 npm 安裝 echarts：

npm install echarts

以下程式碼片段在 id 為#chart的 DOM 元素中建立了一個簡單的長條圖：

// Import ECharts
import * as echarts from 'echarts';

// Initialize the chart
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;

// Specify the chart configuration
option = {
    title: {
        text: 'Simple Bar Chart'
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [
        {
            name: 'Value',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
};

// Use the specified chart configuration
option && myChart.setOption(option);

如果你覺得這個專案很有趣，可以在GitHub上給它一個Star⭐️，目前他們的Star數已經接近60k了！

GitHub 上的 Star ECharts ⭐️

5. Nivo：用於在 React 中建立圖表應用程式的庫

網址： https://nivo.rocks

Nivo 是一個高階開源 JavaScript 函式庫，用於建立資料視覺化，專門設計用於與 React 搭配使用。它建置在 D3 之上，提供廣泛的圖表類型，並具有內建主題、互動性和響應式設計。以下是一些關鍵功能和方面，使 Nivo 成為 React 應用程式中資料視覺化的熱門選擇：

Nivo 的主要特點

• 易於使用： Nivo 的設計比 D3.js 等替代方案更用戶友好且更易於使用。它提供了更高層次的抽象，使得無需深入了解 SVG 或 DOM 操作即可輕鬆建立複雜的圖表。

• React 整合： Nivo 專為 React 建置，使其成為在 React 生態系統中工作的開發人員的絕佳選擇。它利用 React 基於元件的架構來輕鬆整合和重複使用。

• 主題和響應性： Nivo 包含對主題和響應式設計的內建支持，使您可以更輕鬆地建立在不同設備上看起來不錯並與應用程式的設計相匹配的圖表。

如何開始使用 Nivo 👀

如果您是 React 開發人員，開始使用 Nivo 會很容易。安裝 nivo 核心套件以及您選擇的相關圖表特定庫。在本例中，我們正在實作一個長條圖：

yarn add @nivo/core @nivo/bar

完成後，匯入相關圖表元件並在您的 React 環境中使用它：

import { Bar } from '@nivo/bar';

const MyBarChart = () => {

const salesData = [
  {
    "category": "Electronics",
    "value": 5000
  },
  {
    "category": "Clothing",
    "value": 3000
  },
  {
    "category": "Furniture",
    "value": 2500
  }
];

  return (
    <Bar
      data={salesData}
      indexBy="category"
      maxValue={6000}
      keyBy="id"/>
  );
};

export default App;

Nivo 是開源的，您可以在 GitHub 上為他們的專案加註星標 - 目前它們的星標數量已超過 12k！

⭐️ GitHub 上的 Star Nivo

6. Plotly：適用於不同技術堆疊的開源圖表庫

網址： https://plotly.com

Plotly是一個開源資料視覺化函式庫，支援多種圖表類型和互動功能。它可用於多種程式語言，包括 Python、R 和 JavaScript。 Plotly.js 是該函式庫的 JavaScript 版本，建構在 D3 之上，廣泛用於建立基於 Web 的互動式視覺化。

Plotly 的主要特點

• 支援不同的程式語言：Plotly 支援不同的語言，這與許多其他支援一種語言的圖表庫不同。它允許您使用任何您熟悉的語言將資料視覺化為圖表。這是完整的清單。

• 複雜圖表類型： Plotly 抽象化了 matplotlib、ggplot2 或 MATLAB 等軟體包中的統計和科學圖表類型。

• 可移植： Plotly 圖表以 JSON 物件的形式進行聲明性描述。圖表的每個面向（例如顏色、網格線和圖例）都有一組對應的 JSON 屬性。這允許在所有不同的語言實作中使用相同的配置。

• 效能： Plotly 的圖表主要使用 SVG，但它也可以利用 webGL 來渲染高效能視覺化。

如何開始使用 Plotly 👀

如前所述，Plotly 可以與多種程式語言一起使用，但在本例中我們將專注於 Javascript。

首先，安裝相關的npm套件：

npm install plotly.js-dist

然後，在 html 中建立一個空的 div 元素來繪製圖形：

<div id="tester" style="width:600px;height:250px;"></div>

最後，編寫以下內容來繪製簡單的折線圖：

const TESTER = document.getElementById('tester');

Plotly.newPlot( TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16] }], {
    margin: { t: 0 } } 
);

如果您發現 Plotly 是一個很好的工具，您可以給它一顆星，並為他們在 GitHub 上的專案做出貢獻。

• GitHub 上的 Star Plotly Python 專案⭐️

7.勝利：用於圖表和資料可視化的React元件

網址： https://commerce.nearform.com/open-source/victory

Victory是一個適用於 React 和 React Native 的開源模組化圖表庫。它提供了一個簡單而優雅的 API，用於建立各種資料視覺化。與 Nivo 類似，Victory 利用了 React 的優勢，使其成為已經熟悉 React 生態系統的開發人員的自然選擇。

Victory JS 的主要特點

• React 和 React Native 具有相同的 API ：Victory 專為 React 和 React Native 建置，允許無縫整合到 Web 和行動應用程式中。

• 易於使用：Victory 的聲明式、基於元件的 API 使得向 React 應用程式加入視覺化變得簡單，特別是與 D3 等其他命令式方法相比。

• 互動性：Victory 提供開箱即用的工具提示、對事件和複雜動畫的支持，以使視覺化感覺更加生動。

如何開始勝利

首先，安裝 npm 套件：

npm install victory

然後，根據您的需求匯入您想要使用的相關元件。例如：

import React from 'react';
import { VictoryBar } from 'victory';

const data = [
  {quarter: 1, earnings: 13000},
  {quarter: 2, earnings: 16500},
  {quarter: 3, earnings: 14250},
  {quarter: 4, earnings: 19000}
]

function App() {
  return (
    <VictoryBar
      data={data}
      // data accessor for x values
      x="quarter"
      // data accessor for y values
      y="earnings"
    />
}

如果您覺得 Victory 很酷，您可以繼續在 GitHub 上給該專案一顆星。目前他們的星數超過 10,000

GitHub 上的明星勝利 ⭐️

結論

恭喜您已經走到這一步了！

在本文中，我們介紹了今年要探索的 7 個圖表庫。我們已經超越了簡單的概述，而是發現了每個庫的工作原理、其底層架構以及用於建置它的技術。此外，我們還學習如何開始將這些庫合併到您的專案中。

在我們分道揚鑣之前，如果您認為本文有幫助，請考慮在GitHub上給我們一顆星來表達您的支持。感謝您的閱讀，我期待您參與下一篇文章！ 👋

原文出處：https://dev.to/latitude/7-best-chart-libraries-for-developers-in-2024-25he