2024 年面向前端開發的七個最佳圖表庫

作者：前端新世界 2024-05-28 08:33:44

開發開發工具

在本文中，我們介紹了 2024 年值得探索的 7 個圖表庫。并且，我們不僅僅是簡單地概述了一下哦，還具體介紹了每個庫的工作原理、底層架構以及構建技術。此外，我們還通過示例學習了如何將這些庫合用于項目中。

現在越來越多的應用程序趨向于通過圖表或圖形進行數據可視化。怎么實現呢？簡單，使用庫或底層技術就行。

作為開發人員，了解和掌握圖表庫將能起到巨大作用：不但可以大大提高效率、節省時間，還可以通過各種圖表類型和樣式選項來滿足各種不同的開發需求。

本文將介紹七個超級好用的圖表庫。一起來看看吧！

1. Latitude for React：將圖表集成到前端應用的完美伴侶

圖片

Latitude 是一款用于嵌入式分析的開源框架，能夠快速將 SQL 查詢公開為 API 端點。

產品包括@latitude-data/react，這是一組原生 React 組件，可用于輕松繪制來自 Latitude API 的數據。如果你選擇自帶數據，Latitude也可以用作獨立的圖表庫。

Latitude for React 的主要特性

多種圖表類型：例如條形圖、餅圖、面積圖、分散圖、混合圖等。
高度可定制的組件：組件預先捆綁了一組主題，允許你輕松創建自定義主題。且大多數組件都可以使用自定義 html 類進行擴展。
自動運行查詢或自己提供數據：Latitude 為每個圖表組件提供兩個版本。一個版本自動運行 Latitude 查詢。另一個版本接收數據作為prop，讓用戶負責獲取數據。

如何使用 Latitude for React

首先，在 React 項目中安裝 Latitude 的react包：

npm install --save @latitude-data/react

接著，導入用于Latitude組件的核心樣式：

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

Latitude 后端的使用

如果要從 Latitude 后端獲取數據，可以使用項目根目錄的LatitudeProvider包裝應用程序：

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

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

再以Query為前綴使用 Latitude 的圖表組件：

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' }
      ]}
    />
   );
}

覺得意猶未盡，還可以閱讀文檔獲取有關 Latitude 動態顯示數據的加強版指南。

2. D3.js：用于數據可視化的 JavaScript 庫

圖片

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 的免費和開源也是一大亮點。

3. Chart.js：靈活的 JavaScript 庫，適用于基于 HTML 的圖表

圖片

Chart.js目前是最受歡迎的圖表庫之一，也是最容易使用的圖表庫之一。與一些僅將數據呈現為 SVG 的圖表庫不同，Chart.js通過 Canvas 進行視覺渲染。

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>

這個項目是不是很酷呢！

4. Apache ECharts：用于快速構建圖表的 JavaScript 可視化工具

圖片

ECharts 是一個開源的數據可視化庫，這段時間越來越受到大家的喜愛和歡迎。它由 Apache foundation 構建，依靠 ZRender 來渲染圖形。

與其他庫相比，ECharts更復雜；并且ECharts只渲染動態數據。

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

很有趣的一個項目，不是嗎？

5. Nivo：用于在 React 構建圖表app的庫

圖片

Nivo 是一個專為 React 而設計、用于創建數據可視化的高級開源 JavaScript 庫。它建立在 D3 的基礎上，提供廣泛的圖表類型，自帶內置主題、交互性和響應式設計。

Nivo的主要特點

易用性： Nivo 比 D3.js 等替代品更人性化、更易于使用。Nivo提供了更高級別的抽象，無需深入了解 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 是開源的，非常棒！

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

圖片

Plotly 是開源的數據可視化庫，支持多種圖表類型和交互式功能。可用于包括 Python、R 和 JavaScript在內的多種編程語言。

Plotly.js 是 Plotly 的 JavaScript 版本，建立在 D3 之上，廣泛用于創建基于 web 的交互式可視化。

Plotly 的主要特點

支持不同的編程語言：Plotly 支持不同語言，這與其他許多支持單一語言的圖表庫不同。你可以使用自己熟悉的語言將數據可視化為圖表。
復雜的圖表類型：Plotly 抽象了matplotlib、ggplot2 和 MATLAB 等軟件包中的統計和科學圖表的類型。
可移植：Plotly圖表以聲明方式描述為 JSON 對象。圖表的每個方面，如顏色、網格線和圖例，都有一組相應的 JSON 屬性。所以 plotly 在不同的語言實現中也可以使用相同的配置。
性能：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 真的是一個非常好用的工具，對吧！

7. Victory：用于圖表和數據可視化的 React 組件

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 提供開箱即用的工具提示、對事件和復雜動畫的支持，使可視化感覺更加生動。

如何使用 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 很酷，那么一定要嘗試一下。

結束語

恭喜！你又學完了今天的新知識！

責任編輯：武曉燕來源：前端新世界

前端開發圖表庫