2024 年面向前端开发的七个最佳图表库-51CTO.COM

现在越来越多的应用程序趋向于通过图表或图形进行数据可视化。怎么实现呢？简单，使用库或底层技术就行。

作为开发人员，了解和掌握图表库将能起到巨大作用：不但可以大大提高效率、节省时间，还可以通过各种图表类型和样式选项来满足各种不同的开发需求。

本文将介绍七个超级好用的图表库。一起来看看吧！

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

结束语

恭喜！你又学完了今天的新知识！

在本文中，我们介绍了 2024 年值得探索的 7 个图表库。并且，我们不仅仅是简单地概述了一下哦，还具体介绍了每个库的工作原理、底层架构以及构建技术。此外，我们还通过示例学习了如何将这些库合用于项目中。