作為開發(fā)人員，了解和掌握?qǐng)D表庫(kù)將能起到巨大作用：不但可以大大提高效率、節(jié)省時(shí)間，還可以通過各種圖表類型和樣式選項(xiàng)來(lái)滿足各種不同的開發(fā)需求。

本文將介紹七個(gè)超級(jí)好用的圖表庫(kù)。一起來(lái)看看吧！

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

圖片

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

產(chǎn)品包括@latitude-data/react，這是一組原生 React 組件，可用于輕松繪制來(lái)自 Latitude API 的數(shù)據(jù)。如果你選擇自帶數(shù)據(jù)，Latitude也可以用作獨(dú)立的圖表庫(kù)。

Latitude for React 的主要特性

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

如何使用 Latitude for React

首先，在 React 項(xiàng)目中安裝 Latitude 的react包：

npm install --save @latitude-data/react

接著，導(dǎo)入用于Latitude組件的核心樣式：

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

Latitude 后端的使用

如果要從 Latitude 后端獲取數(shù)據(jù)，可以使用項(xiàng)目根目錄的LatitudeProvider包裝應(yīng)用程序：

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對(duì)應(yīng)于 Latitude 后端中定義的查詢路徑。

作為獨(dú)立的圖表庫(kù)

可以像這樣使用獨(dú)立組件：

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

覺得意猶未盡，還可以閱讀文檔獲取有關(guān) Latitude 動(dòng)態(tài)顯示數(shù)據(jù)的加強(qiáng)版指南。

2. D3.js：用于數(shù)據(jù)可視化的 JavaScript 庫(kù)

圖片

D3 雖然是低級(jí)圖表庫(kù)，但它提供了無(wú)與倫比的自定義和靈活性。

相比那些學(xué)習(xí)難度大的通用前端框架，如 React 和 Svelte，如果是一些特定的圖表需求，那么d3.js可能是更佳的選擇。當(dāng)然，如果應(yīng)用程序需要快速集成簡(jiǎn)單圖表，那么更推薦使用其他的圖表庫(kù)。

D3.js的主要特點(diǎn)

• 自定義和靈活性：D3.js 提供對(duì) SVG、HTML 和 CSS 的低級(jí)訪問，允許對(duì)視覺元素進(jìn)行細(xì)粒度控制。具有高度的靈活性和可定制性。
• 模塊化：D3.js 是高度模塊化的，具有各種模塊，可以單獨(dú)使用，也可以組合使用。因此可以更好地控制捆綁包大小和性能優(yōu)化。
• 強(qiáng)大的過渡和動(dòng)畫：D3.js 為過渡和動(dòng)畫提供強(qiáng)大的支持，為數(shù)據(jù)更新提供流暢而復(fù)雜的動(dòng)畫。
• 社區(qū)和生態(tài)系統(tǒng)：D3.js 擁有龐大而活躍的社區(qū)，提供大量文檔、示例和插件。可以更輕松地找到支持和資源。

如何使用D3.js

在項(xiàng)目中安裝 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 通常比其他替代方法更冗長(zhǎng)，但也因此可以最大限度地控制可視化的各個(gè)方面。

D3 的免費(fèi)和開源也是一大亮點(diǎn)。

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

圖片

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

Chart.js的主要特點(diǎn)

• 性能：Chart.js接受內(nèi)部數(shù)據(jù)結(jié)構(gòu)，從而減少解析和標(biāo)準(zhǔn)化的需求，提高了性能。也可以配置數(shù)據(jù)抽取，以便在渲染數(shù)據(jù)集之前減小數(shù)據(jù)集大小，從而加快速度。使用 canvas 可以壓縮 DOM 樹的開銷，有助于最小化捆綁包中Chart.js代碼的大小，從而縮短加載時(shí)間。
• 可訪問性：與大多數(shù)圖表庫(kù)相比，Chart.js 有一個(gè)非常直接的方法，對(duì)在畫布上運(yùn)行所做的一切了解得一清二楚。不需要復(fù)雜的自定義，因?yàn)樗试S將所有自定義選項(xiàng)用于樣式、主題等。
• 出色的開發(fā)體驗(yàn)：除了擁有非常出色的社區(qū)影響力外，Chart.js 還有簡(jiǎn)單文檔，文檔經(jīng)常更新。還可與大多數(shù)人最喜歡的 JavaScript 框架，如 React、Svelte 等集成。
• 圖表響應(yīng)性：默認(rèn)情況下，Chart.js 提供響應(yīng)式圖表。不但可以自動(dòng)調(diào)整屏幕，還可為圖表提供可調(diào)節(jié)的大小。從而確保在所有設(shè)備上都能很好地可視化數(shù)據(jù)。

如何使用Chart.js

Chartjs 可以通過npm安裝，也可以在運(yùn)行時(shí)通過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>

這個(gè)項(xiàng)目是不是很酷呢！

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

圖片

ECharts 是一個(gè)開源的數(shù)據(jù)可視化庫(kù)，這段時(shí)間越來(lái)越受到大家的喜愛和歡迎。它由 Apache foundation 構(gòu)建，依靠 ZRender 來(lái)渲染圖形。

與其他庫(kù)相比，ECharts更復(fù)雜；并且ECharts只渲染動(dòng)態(tài)數(shù)據(jù)。

ECharts的主要特點(diǎn)

• 廣泛的圖表類型：ECharts 支持多種圖表類型，包括條形圖、折線圖、餅圖、散點(diǎn)圖、地圖、雷達(dá)圖、箱線圖、熱圖、平行坐標(biāo)、?；鶊D，等等等等。這種多功能性允許用戶以多種格式可視化數(shù)據(jù)。
• 交互性：ECharts具有對(duì)交互式元素，如工具提示、縮放、平移和數(shù)據(jù)突出顯示的內(nèi)置支持。用戶可以與可視化效果進(jìn)行交互，更深入地了解數(shù)據(jù)。
• 性能：ECharts 專為高性能而設(shè)計(jì)，能夠高效處理大型數(shù)據(jù)集。它利用 Canvas 和 WebGL 進(jìn)行渲染，在復(fù)雜的可視化和大數(shù)據(jù)量方面，比傳統(tǒng)的基于 SVG 的渲染性能更高。

如何使用 Apache ECharts

使用npm安裝 echarts：

npm install echarts

以下代碼片段通過 id #chart在 DOM 元素中創(chuàng)建了一個(gè)簡(jiǎn)單的條形圖：

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

很有趣的一個(gè)項(xiàng)目，不是嗎？

5. Nivo：用于在 React 構(gòu)建圖表app的庫(kù)

圖片

Nivo 是一個(gè)專為 React 而設(shè)計(jì)、用于創(chuàng)建數(shù)據(jù)可視化的高級(jí)開源 JavaScript 庫(kù)。它建立在 D3 的基礎(chǔ)上，提供廣泛的圖表類型，自帶內(nèi)置主題、交互性和響應(yīng)式設(shè)計(jì)。

Nivo的主要特點(diǎn)

• 易用性： Nivo 比 D3.js 等替代品更人性化、更易于使用。Nivo提供了更高級(jí)別的抽象，無(wú)需深入了解 SVG 和 DOM 操作也可以輕松創(chuàng)建復(fù)雜的圖表。
• React 集成：Nivo 是專門為 React 構(gòu)建的，是 React 生態(tài)系統(tǒng)開發(fā)人員的絕佳選擇。它利用 React 基于組件的架構(gòu)，易于集成和重用。
• 主題和響應(yīng)能力：Nivo 包括對(duì)主題和響應(yīng)式設(shè)計(jì)的內(nèi)置支持，可以在不同設(shè)備上輕松創(chuàng)建美觀的圖表。

如何使用 Nivo

React 開發(fā)人員使用 Nivo 簡(jiǎn)直輕而易舉。安裝 nivo 核心軟件包以及相關(guān)圖表庫(kù)。在下面的示例中，我們將實(shí)現(xiàn)一個(gè)條形圖：

yarn add @nivo/core @nivo/bar

然后，導(dǎo)入相關(guān)的圖表組件并在 React 環(huán)境中使用：

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;

重復(fù)強(qiáng)調(diào)一句，Nivo 是開源的，非常棒！

6. Plotly：適用于不同技術(shù)堆棧的開源圖表庫(kù)

圖片

Plotly 是開源的數(shù)據(jù)可視化庫(kù)，支持多種圖表類型和交互式功能。可用于包括 Python、R 和 JavaScript在內(nèi)的多種編程語(yǔ)言。

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

Plotly 的主要特點(diǎn)

• 支持不同的編程語(yǔ)言：Plotly 支持不同語(yǔ)言，這與其他許多支持單一語(yǔ)言的圖表庫(kù)不同。你可以使用自己熟悉的語(yǔ)言將數(shù)據(jù)可視化為圖表。
• 復(fù)雜的圖表類型：Plotly 抽象了matplotlib、ggplot2 和 MATLAB 等軟件包中的統(tǒng)計(jì)和科學(xué)圖表的類型。
• 可移植：Plotly圖表以聲明方式描述為 JSON 對(duì)象。圖表的每個(gè)方面，如顏色、網(wǎng)格線和圖例，都有一組相應(yīng)的 JSON 屬性。所以 plotly 在不同的語(yǔ)言實(shí)現(xiàn)中也可以使用相同的配置。
• 性能：Plotly 主要使用 SVG 作為圖表，但也可以利用 webGL 來(lái)渲染高性能可視化。

如何使用 Plotly

如前所述，Plotly 可以使用多種編程語(yǔ)言，這里僅以 Javascript 為例。

首先，安裝相關(guān)npm包：

npm install plotly.js-dist

然后，在html中創(chuàng)建一個(gè)空的div元素來(lái)繪制圖形：

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

最后，輸入以下代碼來(lái)繪制一個(gè)簡(jiǎn)單的折線圖：

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

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

Plotly 真的是一個(gè)非常好用的工具，對(duì)吧！

7. Victory：用于圖表和數(shù)據(jù)可視化的 React 組件

Victory 是一個(gè)用于 React 和 React Native 的開源模塊化圖表庫(kù)。它有一個(gè)簡(jiǎn)單優(yōu)雅的 API，可用于創(chuàng)建各種數(shù)據(jù)可視化。

與 Nivo 類似，Victory 利用了 React 的優(yōu)勢(shì)，因此成為許多熟悉 React 生態(tài)系統(tǒng)的開發(fā)人員的天然選擇。

Victory JS的主要特點(diǎn)

• 與React 和 React Native 相同的 API：Victory 是專門為 React 和 React Native 構(gòu)建的，因此可以無(wú)縫集成到 web 和移動(dòng)應(yīng)用程序中。
• 易用性：Victory 的聲明式、基于組件的 API 使得向 React 應(yīng)用程序添加可視化變得簡(jiǎn)單，特別是與 D3 等其他命令式方法相比。
• 交互性：Victory 提供開箱即用的工具提示、對(duì)事件和復(fù)雜動(dòng)畫的支持，使可視化感覺更加生動(dòng)。

如何使用 Victory

首先，安裝npm包：

npm install victory

然后，根據(jù)需要導(dǎo)入要使用的相關(guān)組件。例如：

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

結(jié)束語(yǔ)

恭喜！你又學(xué)完了今天的新知識(shí)！

在本文中，我們介紹了 2024 年值得探索的 7 個(gè)圖表庫(kù)。并且，我們不僅僅是簡(jiǎn)單地概述了一下哦，還具體介紹了每個(gè)庫(kù)的工作原理、底層架構(gòu)以及構(gòu)建技術(shù)。此外，我們還通過示例學(xué)習(xí)了如何將這些庫(kù)合用于項(xiàng)目中。