2024 年 7 个最适合开发者的图表库

数据可视化是软件开发中不可或缺的一部分，图表和图形库提供了实现这一目标的高效方式。

本文将带您了解 7 个优秀的图表库，它们不仅节省时间，还提供了丰富的图表类型和定制选项。

---

1、D3.js

D3.js（Data-Driven Documents）是一个JavaScript库，它允许你使用 HTML、SVG 和 CSS 来直接在网页上操作文档。

D3.js 的核心功能是数据可视化，它能够帮助开发者将数据转化为图形和交互式可视化效果。

D3.js 适合用于创建复杂的数据可视化，如动态图表、地理地图、网络图等。

特点：

• 数据驱动：D3.js 的核心理念是数据驱动，它能够将数据绑定到 DOM 元素上，然后根据数据的变化动态更新图形。

• SVG 和 Canvas 支持：D3.js 支持使用 SVG（Scalable Vector Graphics）和 Canvas 来创建图形，SVG 是矢量图形的标准，适合创建复杂的、可缩放的图形。

• DOM 操作：D3.js 提供了强大的 DOM 操作功能，可以轻松地选择、修改、添加或删除 HTML 元素。

• 动画效果：D3.js 内置了丰富的动画效果，可以创建平滑的过渡和动画，增强用户交互体验。

• 交互性：D3.js 支持创建交互式图形，可以响应用户的点击、拖拽、缩放等操作。

• 灵活性：D3.js 非常灵活，开发者可以根据需要自定义图形和交互效果。

• 数据格式支持：D3.js 支持多种数据格式，包括 JSON、CSV、TSV 等，方便从不同来源加载数据。

官方地址：https://d3js.org/

开源地址：https://github.com/d3

npm 安装 D3 包：

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

---

2、Chart.js

Chart.js 是一个简单而灵活的 JavaScript 图表库，用于设计和实现响应式和可交互的图表。

Chart.js 基于 Canvas 元素构建的，因此可以轻松地集成到任何现代网页中。

特点：

• 易于使用：提供了一个简单的 API，易于学习和使用。

• 多种图表类型：支持多种图表类型，包括线形图、柱状图、饼图、雷达图、散点图等。

• 响应式：图表可以响应屏幕大小变化，自动调整尺寸。

• 动画效果：内置动画效果，使图表的展示更加生动。

• 交互性：支持图表的交互操作，如工具提示、点击事件等。

• 可定制：可以通过配置选项来定制图表的样式和行为。

• 插件系统：支持插件扩展，可以根据需要添加新功能。

• 跨浏览器兼容：在所有主流浏览器上都能正常工作。

• 轻量级：库的体积小，加载速度快。

官方地址：https://www.chartjs.org/

开源地址：https://github.com/chartjs/Chart.js

通过 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>

---

3、Apache ECharts

Apache ECharts（简称 ECharts）是一个由百度团队开发的开源数据可视化库，现在已经成为 Apache 软件基金会的一个顶级项目。

ECharts 旨在提供丰富的图表类型和强大的数据可视化能力，支持多种数据格式，并能够创建高度交互式的图表。

官网地址：https://echarts.apache.org/zh/index.html

开源地址：https://github.com/apache/echarts

通过 npm 安装 ECharts：

npm install echarts

创建一个简单的柱状图：

import * as echarts from 'echarts';var chartDom = document.getElementById('chart');var myChart = echarts.init(chartDom);var option;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]        }    ]};option && myChart.setOption(option);

---

4、 Nivo

Nivo（Non-interactive data Visualization library）是一个基于 React 的数据可视化库，它提供了一系列的组件来创建各种交互式和非交互式的数据可视化图表。

Nivo 的设计哲学是简单、直观，并且易于使用，同时保持高度的定制性和可扩展性。

特点：

• 基于 React：Nivo 是为 React 应用程序设计的，可以无缝集成到任何 React 项目中。

• 多种图表类型：提供了多种图表组件，包括条形图、线形图、散点图、饼图、热力图、树图、平行坐标图等。

• 易于使用：Nivo 的 API 设计简洁，使得创建图表变得简单直观。

• 高度定制化：用户可以通过传递属性来定制图表的各个方面，如颜色、尺寸、轴标签等。

• 交互性：虽然名为“非交互式”，但 Nivo 依然提供了一定程度的交互性，如工具提示、点击事件等。

• 动画和过渡：Nivo 内置了动画和过渡效果，使得图表的展示更加流畅和吸引人。

• 主题支持：支持主题定制，可以快速切换图表的整体风格。

• 组件化：Nivo 的图表组件化设计，使得开发者可以灵活地组合和重用组件。

官网地址：https://nivo.rocks/

开源地址：https://github.com/plouc/nivo

通过 npm 安装 Nivo：

npm install @nivo/core @nivo/bar

创建一个简单的柱状图：

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

const data = [
  { country: 'AD', 'hot dog': 29 },
  { country: 'AE', 'hot dog': 35 },
  // ...
];

const MyResponsiveBar = () => (
  <ResponsiveBar
    data={data}
    keys={['hot dog']}
    indexBy="country"
    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
    padding={0.3}
    valueScale={{ type: 'linear' }}
    indexScale={{ type: 'band', round: true }}
    colors={{ scheme: 'nivo' }}
    borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'country',
      legendPosition: 'middle',
      legendOffset: 32
    }}
    axisLeft={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'hot dog',
      legendPosition: 'middle',
      legendOffset: -40
    }}
  />
);

---

5、Plotly

Plotly 是一个图形库，它提供了丰富的数据可视化功能，支持多种编程语言，包括 Python、R、JavaScript（通过 Plotly.js）、MATLAB、Excel 等。

Plotly 的目标是帮助用户创建交互式的图表，并且能够轻松地集成到网页、报告或应用程序中。

特点：

• 支持多种语言，如 Python、R 和 JavaScript。
• 支持复杂的图表类型，适用于统计和科学图表。
• 可移植性，使用 JSON 对象描述图表。

官方地址：https://plotly.com/

开源地址：https://github.com/plotly

通过 npm 安装 Plotly.js：

npm install plotly.js-dist

创建一个简单的柱状图：

const data = [
  {
    x: ['A', 'B', 'C', 'D'],
    y: [10, 20, 30, 40],
    type: 'bar'
  }
];

const layout = {
  title: 'Simple Bar Chart',
  xaxis: {
    title: 'Category'
  },
  yaxis: {
    title: 'Value'
  }
};

Plotly.newPlot('chart', data, layout);

---

6、highcharts

Highcharts 是一个流行的、功能丰富的 JavaScript 图表库，它允许开发者在网页上创建交互式的图表和可视化效果。

Highcharts 提供了广泛的图表类型和功能，适用于商业和个人项目。

特点：

• 多种图表类型：支持多种图表类型，包括折线图、柱状图、饼图、散点图、面积图、范围图、极坐标图、气泡图和地图等。

• 交互性：Highcharts 图表具有高度的交互性，用户可以通过鼠标悬停、点击、拖拽等操作与图表进行交互。

• 数据绑定：支持从多种数据源（如数组、对象、CSV、JSON）加载数据，并能够动态更新图表。

• 可定制：提供丰富的配置选项，允许用户定制图表的各个方面，如颜色、标题、图例、工具提示、轴标签等。

• 响应式设计：Highcharts 图表可以自适应不同的屏幕尺寸，确保在各种设备上都有良好的显示效果。

• 动画效果：内置动画效果，使得图表的加载和数据更新更加平滑和吸引人。

• 导出功能：Highcharts 提供了图表导出功能，允许用户将图表导出为图片或 PDF 文件。

• 集成：Highcharts 可以轻松集成到各种前端框架和库中，如 Angular、React、Vue 等。

• 模块化：Highcharts 的模块化设计允许开发者按需加载所需的功能，优化应用的性能。

• 国际化：支持多语言，可以方便地切换图表的语言。

• 高性能：Highcharts 针对大数据量进行了优化，能够处理大规模的数据集。

官方地址：https://www.highcharts.com/

开源地址：https://github.com/highcharts/highcharts

通过 npm 安装 Highcharts：

npm install highcharts

创建一个简单的柱状图：

import Highcharts from 'highcharts';

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }]
});

---

7、Victory

Victory 是一个用于 React 的数据可视化库，它提供了一套简洁、可定制的图表组件，旨在帮助开发者快速构建出美观、响应式的图表。

特点：

• 为 React 和 React Native 提供相同的 API。
• 易于使用，声明式、基于组件的 API。
• 支持交互性，包括工具提示、事件和复杂动画。
• 提供了多种图表组件，包括条形图、线形图、饼图、散点图等。
• Victory 的组件设计为模块化，可以按需加载，有助于减少应用的体积。

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

开源地址：https://github.com/FormidableLabs/victory

使用 npm 安装 victory :

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"
    />
}