2024 年面向开发人员的 7 个最佳图表库

2025-06-09

2024 年面向开发人员的 7 个最佳图表库

许多应用程序使用图表或图形进行数据可视化，这可以通过库或底层技术来实现。库可以提高时间效率，提供丰富的图表类型和自定义选项。

作为开发者，了解这些选项至关重要。虽然有些项目可能选择手动实现，但许多项目受益于图表库的高效性。使用这些库可以节省时间，并访问各种图表类型和样式选项，以满足您的需求。

在本文中，我们将带您探索七个出色的图表库，了解它们的功能以及如何使用它们。让我们一起来看看吧！

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk7c7favj05g2qjice9m.gif

1. Latitude for React：将图表集成到前端应用程序的完美伴侣

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

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7z7ks2yp21vj6fah42o.png

是的，那就是我们！

Latitude 是一个用于嵌入式分析的开源框架，允许您快速将 SQL 查询公开为 API 端点。其产品包含一组@latitude-data/react原生 React 组件，可轻松绘制来自 Latitude API 的数据。如果您选择自带数据，它也可以作为独立的图表库使用。

Latitude for React 的主要功能

  • 多种图表类型：提供多种图表类型供显示。例如条形图、饼图、面积图、散点图、混合图等。
  • 高度可定制的组件：组件预装了一系列可用主题，您也可以选择轻松创建自己的自定义主题。此外，大多数组件都可以使用自定义 HTML 类进行扩展。
  • 自动运行查询或提供您自己的数据：Latitude 为每个图表组件提供两个版本。一个版本自动运行您的 Latitude 查询。另一个版本需要接收数据作为 prop，由用户自行获取。

如何使用 Latitude 进行 React 👀

首先，在你的 React 项目中安装 Latitude 的 react 包：

npm install --save @latitude-data/react
Enter fullscreen mode Exit fullscreen mode

之后，导入 Latitude 组件使用的核心样式：

import '@latitude-data/react/dist/index.css';
Enter fullscreen mode Exit fullscreen mode

使用 Latitude 后端
如果您要从 Latitude 后端获取数据，请使用位于项目根目录的 LatitudeProvider 包装您的应用程序：

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

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

并使用 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'/>
  );
}
Enter fullscreen mode Exit fullscreen mode

在此示例中，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' }
      ]}
    />
   );
}
Enter fullscreen mode Exit fullscreen mode

阅读 文档以获得有关如何使用 Latitude 动态显示数据的更深入指南。

您可以随意在 GitHub 上为我们的项目做出贡献，如果您能为我们的项目打个星，我们将不胜感激！

🌟 GitHub 上的 React Star Latitude

2. D3.js：用于数据可视化的 JavaScript 库

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

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xhnyf40jvg3v50c2ba8.jpeg

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
Enter fullscreen mode Exit fullscreen mode

下面是关于如何将图表添加到具有 id 的 html 组件的示例代码#chart：

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));
Enter fullscreen mode Exit fullscreen mode

正如您所见，D3.js 通常比其他替代方案更冗长，但它可以让您最大程度地控制可视化的各个方面。

D3 是免费开源的。如果您觉得这个项目有趣，请在 GitHub 上点个 Star⭐️！目前他们的 Star 数已超过 10.8 万！

在 GitHub 上为 D3.js 点赞⭐️

3. Chart.js：基于 HTML 的图表的灵活 JavaScript 库

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

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0m8eb9o6t93wwf7cvq7x.png

目前市场上最受欢迎的图表库之一，也是最易用的图表库之一。它主要以使用 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>
Enter fullscreen mode Exit fullscreen mode

如果你觉得这个项目很棒，不妨在 GitHub 上点个 Star⭐️！目前他们的 Star 数量已经超过 6.3 万。

GitHub 上的 Star Chart.js ⭐️

4. Apache ECharts：用于快速构建图表的 JavaScript 可视化工具

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

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fce12dq55x4le8e4ezhvm.png

ECharts 是一个开源数据可视化库，近年来人气飙升。它由著名的 Apache 基金会构建，并依赖ZRender渲染图形。与其他库相比，它更加复杂；它仅渲染动态数据，并且提供多种显示方式。

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhnpwl5uuhhu7xxdp954.gif

ECharts 的主要功能

  • 丰富的图表类型：ECharts 支持种类繁多的图表类型，实际上比大多数竞争对手都要多。这些图表类型包括条形图、折线图、饼图、散点图、地图、雷达图、箱线图、热图、平行坐标图、桑基图等等。这种多功能性使用户能够以多种格式可视化数据。
  • 交互性： ECharts 的一大亮点是其丰富的交互性。它内置了对交互元素的支持，例如工具提示、缩放、平移和数据高亮。用户可以与可视化效果进行交互，从而更深入地了解数据。
  • 性能： ECharts 专为高性能而设计，能够高效处理海量数据集。它利用 Canvas 和 WebGL 进行渲染，相比传统的基于 SVG 的渲染方式，在处理复杂的可视化和大数据量时拥有更佳的性能。

如何开始使用 Apache ECharts👀

使用 npm 安装 echarts：

npm install echarts
Enter fullscreen mode Exit fullscreen mode

以下代码片段在 id 为 的 DOM 元素中创建了一个简单的条形图#chart：

// 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);
Enter fullscreen mode Exit fullscreen mode

如果您发现这个项目非常有趣，您可以在 GitHub 上给它一个 Star ⭐️，他们目前已经有近 60k 个 Stars！

在 GitHub 上为 ECharts 加星标⭐️

5. Nivo：一个用于在 React 中构建图表应用程序的库

网站：  https://nivo.rocks

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k97ihdlfubm0zs5q1rm.png

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
Enter fullscreen mode Exit fullscreen mode

完成后，导入相关的图表组件并在你的 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;
Enter fullscreen mode Exit fullscreen mode

Nivo 是开源的，您可以在 GitHub 上为他们的项目加注星标——目前他们已有超过 12,000 颗星！

⭐️ 在 GitHub 上为 Nivo 点赞

6. Plotly：适用于不同技术栈的开源图表库

网站：  https://plotly.com

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxm6bnd8u9e4wxxjv3hh.png

Plotly是一个开源数据可视化库，支持多种图表类型和交互式功能。它支持多种编程语言，包括 Python、R 和 JavaScript。Plotly.js 是该库的 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
Enter fullscreen mode Exit fullscreen mode

然后，在您的 html 中创建一个空的 div 元素来绘制图形：

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

最后，写下以下内容来绘制一个简单的折线图：

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

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

如果您发现 Plotly 是一个很好的工具，您可以给它一个星星并在 GitHub 上为他们的项目做出贡献。

7. Victory：用于图表和数据可视化的 React 组件

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

https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy1hhhtiq4cbkwnlzusin.png

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
Enter fullscreen mode Exit fullscreen mode

然后，根据需要导入要使用的相关组件。例如：

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"
    />
}
Enter fullscreen mode Exit fullscreen mode

如果你觉得 Victory 很棒，可以在 GitHub 上给它点个星。目前它已经有超过 10,000 个星了。

GitHub 上的 Star Victory ⭐️

结论

恭喜您取得如此大的进步！

本文介绍了今年值得探索的 7 个图表库。我们不仅进行了简单的概述，还探索了每个库的工作原理、底层架构以及构建所需的技术。此外，我们还学习了如何将这些库集成到您的项目中。

在我们分手之前，如果您觉得这篇文章对您有帮助，不妨在GitHub上点个星，以示支持。感谢您的阅读，期待您继续关注下一篇文章！👋

鏂囩珷鏉ユ簮锛�https://dev.to/latitude/7-best-chart-libraries-for-developers-in-2024-25he
Devto 翻译
PREV
我穿越空间、时间和科技的旅程（迄今为止）。
NEXT
让我们来谈谈睡眠。