7 个最佳 React 图表库及使用方法（附演示）
本文最初发表于https://www.devaradise.com/best-react-chart-graph-libraries
图表是网络应用程序中用于数据可视化的常见组件。它将原始数据转化为可用于决策的信息。
在 Web 应用程序中从零开始创建图表组件既困难又耗时。因此，Web 开发人员通常会使用外部库来创建图表组件。
在 React 中，我们也可以使用外部库来创建图表组件。有很多 React 图表库可供选择。
在这里，我们将讨论和评测 7 个顶级的 React 图表/图形库，以便您可以选择并决定哪个最适合您的项目。
相关教程
我们将了解每个库的功能、易用性和可定制性，以及它们在开发者中的受欢迎程度。
为了方便说明使用方法，我为每个库都提供了代码片段和可运行的演示示例。每个演示示例都使用相同的数据和用例，以便我们公平地进行比较。
我们将用折线图和柱状图可视化1月至6月的销售和销售线索数据。
您可以通过以下链接查看所有演示示例。
完整的代码可以在 GitHub 上找到。你也可以克隆包含其他教程示例的仓库。如果你觉得有用，别忘了给它点个星哦 :D。
现在，让我们来看看下面这7个React图表库。
1. 重新绘制图表
Rechart 是一个简单易用、高度可定制的开源图表库，适用于 React.js。它支持折线图、柱状图、环形图、饼图等。
Rechart 在 GitHub 上拥有超过 14k 个 star，是基于 React 和 D3 构建的最受欢迎的图表库。
Recharts 文档齐全，易于上手。它还提供简洁的预设图表，可满足各种设计风格。
如何使用 recharts
要使用 recharts，首先需要将其安装到您的 React 项目中。
npm install recharts
安装完成后，您可以使用 recharts 组件轻松创建图表，如下所示。
import React from 'react'
import { ResponsiveContainer, LineChart, Line, BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts';
const data = [
{ label: 'January', sales: 21, leads: 41 },
{ label: 'February', sales: 35, leads: 79 },
{ label: 'March', sales: 75, leads: 57 },
{ label: 'April', sales: 51, leads: 47 },
{ label: 'May', sales: 41, leads: 63 },
{ label: 'June', sales: 47, leads: 71 }
];
export default function Recharts() {
return (
<div className="row">
<div className="col-md-12">
<h2>Charts with recharts library</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
<Tooltip />
<XAxis dataKey="label" />
<YAxis />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<Legend/>
<Line type="monotone" dataKey="sales" stroke="#FB8833" />
<Line type="monotone" dataKey="leads" stroke="#17A8F5" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
<XAxis dataKey="label" />
<YAxis />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<Tooltip />
<Legend/>
<Bar dataKey="sales" fill="#FB8833" />
<Bar dataKey="leads" fill="#17A8F5" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
)
}
如您所见，图表的数据对象非常简单（第 5-12 行）。它不像其他图表库那样与选项对象混杂在一起。这使得 recharts 更易于实现。
在 recharts 中，大多数图表元素（例如图例、网格和工具提示）都有自己的组件。因此，如果我们想显示它们，只需在 JSX 标记中包含它们即可。
如果您想查看更多 recharts 示例，可以访问recharts 官方示例页面。
2. React-chartjs-2（React 的 Chart.js 封装）
Reactchartjs / React-chartjs-2
用于 Chart.js（最流行的图表库）的 React 组件
react-chartjs-2 只是Chart.js的一个封装，Chart.js 是最流行的用于图表和图形的 JavaScript 库，在 Github 上拥有 5 万多个 star。
Chart.js 是一个非常棒的图表库，可以用来创建高度可定制的图表。它提供了多种图表类型和丰富的自定义选项，包括折线图、柱状图、饼图、散点图、雷达图等等。
借助 react-chartjs-2，在 React 中实现 Chart.js 变得更加容易。react-chartjs-2 创建了可在 JSX 中使用的即用型 React 图表组件。
如何在 React 中使用 chart.js
要使用 chart.js，您必须按如下方式安装 chart.js 和 react-chartjs-2。
npm install --save react-chartjs-2 chart.js
之后，您可以导入想要实现的图表组件并使用它们。代码如下所示。
import React from 'react'
import { Line, Bar } from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: 'Sales',
data: [21, 35, 75, 51, 41, 47],
fill: false, // for Line chart
backgroundColor: '#FB8833',
borderColor: '#FB8833' // for Line chart
},
{
label: 'Leads',
data: [41, 79, 57, 47, 63, 71],
fill: false, // for Line chart
backgroundColor: '#17A8F5',
borderColor: '#17A8F5' // for Line chart
}
]
};
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
export default function ReactChartjs2() {
return (
<div className="row">
<div className="col-md-12">
<h2>Chart.js charts wrapped with react-chartjs-2</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<Line data={data} options={options}/>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<Bar data={data} options={options}/>
</div>
</div>
</div>
)
}
使用 chart.js 时，为图表提供的数据对象具有一些可用于自定义的属性，例如fill、backgroundColor和borderColor。
options 对象用于设置与数据无关的任何配置，例如图表布局、图例、动画等。
Chart.js提供了许多自定义图表的选项。您可以查看Chart.js官方文档了解更多信息。
3. 尼沃
Nivo 是另一个优秀的 React 数据可视化库，它基于 D3 构建。它具有高度可定制性，并拥有大量数据可视化组件和非常完善的文档。
它支持折线图、柱状图、气泡图、热力图、饼图、雷达图等多种图表类型，并可选择使用 SVG、Canvas 和 HTTP API 创建这些图表。
Nivo 还提供服务器端渲染功能和完全声明式图表。
如何使用Nivo
Nivo 采用模块化设计。因此，您无需在项目中安装所有软件包。只需使用 yarn 安装您想要添加的组件即可。您可以在这里找到所有组件列表。
yarn add @nivo/bar @nivo/line
之后，您可以按如下方式创建 nivo 图表。
import React from 'react'
import { ResponsiveLine } from '@nivo/line'
import { ResponsiveBar } from '@nivo/bar'
const data = [
{
id: 'sales',
color: '#FB8833',
data: [
{ x: "January", y: 21 },
{ x: "February", y: 35 },
{ x: "March", y: 75 },
{ x: "April", y: 51 },
{ x: "May", y: 41 },
{ x: "June", y: 47 }
]
},
{
id: 'leads',
color: '#17A8F5',
data: [
{ x: "January", y: 41 },
{ x: "February", y: 79 },
{ x: "March", y: 57 },
{ x: "April", y: 47 },
{ x: "May", y: 63 },
{ x: "June", y: 71 }
]
}
];
const databar = [
{ label: 'January', sales: 21, leads: 41 },
{ label: 'February', sales: 35, leads: 79 },
{ label: 'March', sales: 75, leads: 57 },
{ label: 'April', sales: 51, leads: 47 },
{ label: 'May', sales: 41, leads: 63 },
{ label: 'June', sales: 47, leads: 71 }
]
export default function Nivo() {
return (
<div className="row">
<div className="col-md-12">
<h2>Charts with nivo library</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content" style={{height:'300px'}}>
{/*
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered. */}
<ResponsiveLine
data={data}
margin={{ top: 30, right: 60, bottom: 60, left: 30 }}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Month',
legendOffset: 36,
legendPosition: 'middle'
}}
colors={d => d.color}
pointSize={7}
pointBorderWidth={2}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
}
]}
/>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content" style={{height:'300px'}}>
{/*
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered. */}
<ResponsiveBar
data={databar}
keys={[ 'sales', 'leads' ]}
indexBy="label"
groupMode="grouped"
margin={{ top: 30, right: 130, bottom: 50, left: 30 }}
padding={0.3}
colors={['#FB8833', '#17A8F5']}
legends={[
{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 120,
translateY: 0,
itemsSpacing: 2,
itemWidth: 100,
itemHeight: 20,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 20,
}
]}
animate={true}
/>
</div>
</div>
</div>
)
}
每种图表类型的数据对象和选项都不同。Nivo 组件还提供了许多用于自定义的属性。
乍一看，这似乎令人望而生畏。但是，凭借 Nivo 的模块化设计和非常完善的文档，您无需担心所有这些选项。
4. Highcharts-react（Highcharts 的 React 封装库）
highcharts / highcharts-react
Highcharts 官方支持的 React 封装库
Highcharts 是一个流行的 JavaScript 图表库，在 GitHub 上拥有超过 9000 个 star。为了方便在 React 中实现，开发者创建了 highcharts-react，作为 Highcharts 的 React 封装库。
Highcharts 支持多种图表类型，包括折线图、时间序列图、面积图、柱状图/条形图、饼图、散点图、气泡图等等。您可以在这里查看完整演示。
如何使用 Highcharts
要使用 highcharts，首先需要使用 npm 将 highcharts 和 highcharts-react-official 作为包装器安装到您的 React 项目中。
npm install highcharts highcharts-react-official
之后，您可以按如下方式创建图表。
import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
const LineChartOptions = {
title: {
text: 'Line chart'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
},
colors: ['#FB8833', '#17A8F5'],
series: [
{
name: 'Sales',
data: [21, 35, 75, 51, 41, 47]
},
{
name: 'Leads',
data: [41, 79, 57, 47, 63, 71]
}
],
credits: {
enabled: false
}
}
const BarChartOptions = {
chart: {
type: 'column'
},
title: {
text: 'Bar Chart'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
},
colors: ['#FB8833', '#17A8F5'],
series: [
{
name: 'Sales',
data: [21, 35, 75, 51, 41, 47]
},
{
name: 'Leads',
data: [41, 79, 57, 47, 63, 71]
}
],
credits: {
enabled: false
}
}
export default function HighchartsReactWrapper() {
return (
<div className="row">
<div className="col-md-12">
<h2>Hightcharts charts with highcharts-react</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<HighchartsReact
highcharts={Highcharts}
options={LineChartOptions}
/>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<HighchartsReact
highcharts={Highcharts}
options={BarChartOptions}
/>
</div>
</div>
</div>
)
}
如您所见，您应该为每个图表组件创建一个混合数据和选项对象。数据对象结构非常清晰易读。
如需进一步自定义，您可以查看官方文档以添加更多选项。
5. React-apexcharts（ApexCharts 的 React 封装库）
apexcharts / react-apexcharts
📊 ApexCharts 的 React 组件
与 Chart.js 和 Highchart 类似，Apexcharts 也是一个流行的 JavaScript 图表库，可以通过封装器集成到 React 中。Apexcharts 支持折线图、柱状图/柱形图、面积图、时间线图、混合图表、K线图等。
在其他 6 个图表库中，Apexcharts 是功能最丰富、设计最精美的图表库。即使只使用最少的选项，您也可以创建具有缩放、区域选择功能以及导入 SVG、PNG 和 CSV 格式的图表。
但是，这样做也有代价。与其他图表库相比，Apexcharts 的图表渲染速度较慢。
如何使用 ApexCharts
要使用 Apexcharts，首先需要将其安装到您的 React 项目中，以及它的包装器。
npm install react-apexcharts apexcharts
然后，您可以按如下方式创建图表组件。
import React from 'react'
import Chart from 'react-apexcharts'
const options = {
chart: {
id: 'apexchart-example'
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
},
colors: ['#FB8833', '#17A8F5']
}
const series = [
{
name: 'Sales',
data: [21, 35, 75, 51, 41, 47]
},
{
name: 'Leads',
data: [41, 79, 57, 47, 63, 71]
}
]
export default function ReactApexcharts() {
return (
<div className="row">
<div className="col-md-12">
<h2>Apexcharts.js charts wrapped with react-apexcharts</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<Chart options={options} series={series} type="line"/>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<Chart options={options} series={series} type="bar" />
</div>
</div>
</div>
)
}
你只需要导入一个 Chart 组件，然后在 JSX 中使用它并传递一些属性即可。
数据和选项对象与 Highcharts 类似。有关自定义的更多详细信息，请参阅官方文档。
6. React-vis
React-vis 是一组用于渲染常见数据可视化图表的 React 组件。
它支持折线图/面积图/条形图、热力图、散点图、等高线图、六边形热力图、饼图和环形图、旭日图、雷达图、平行坐标图和树状图。
如果你想创建自己设计的图表，React-vis 是个不错的选择。
如何使用 React-vis
要使用 react-vis，首先需要将其安装到您的 React 项目中。
npm install react-vis --save
安装完成后，您可以按如下方式创建图表。
import React from 'react'
import '../../../../node_modules/react-vis/dist/style.css';
import { XYPlot, XAxis, YAxis, HorizontalGridLines, VerticalGridLines, LineMarkSeries, VerticalBarSeries } from 'react-vis';
const data = {
sales : [
{ x: "January", y: 21 },
{ x: "February", y: 35 },
{ x: "March", y: 75 },
{ x: "April", y: 51 },
{ x: "May", y: 41 },
{ x: "June", y: 47 }
],
leads : [
{ x: "January", y: 41 },
{ x: "February", y: 79 },
{ x: "March", y: 57 },
{ x: "April", y: 47 },
{ x: "May", y: 63 },
{ x: "June", y: 71 }
]
}
export default function ReactVis() {
return (
<div className="row">
<div className="col-md-12">
<h2>Charts with react-vis library</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<XYPlot
xType="ordinal"
width={500}
height={300}>
<XAxis />
<YAxis />
<VerticalGridLines />
<HorizontalGridLines />
<LineMarkSeries
data={data.sales}
color="#FB8833"
/>
<LineMarkSeries
data={data.leads}
color="#17A8F5"
/>
</XYPlot>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<XYPlot
xType="ordinal"
width={500}
height={300}>
<XAxis />
<YAxis />
<VerticalGridLines />
<HorizontalGridLines />
<VerticalBarSeries
data={data.sales}
color="#FB8833"
/>
<VerticalBarSeries
data={data.leads}
color="#17A8F5"
/>
</XYPlot>
</div>
</div>
</div>
)
}
如您所见，使用 react-vis 创建图表非常简单。图表所需的数据也很简单。
与 rechart 类似，react-vis 也包含一些较小的图表元素组件，例如 Grid、Line、XAxis、YAxis 等，这些组件可以在 JSX 标记中使用。
至于图表样式/设计，您需要先手动导入 react-vis CSS 文件。您也可以添加自己的样式来定制图表组件。
7. 胜利
FormidableLabs /胜利
一组可组合的 React 组件，用于构建交互式数据可视化。
Victory 是一套适用于 React 和 React Native 的模块化图表组件。它让用户能够轻松上手，同时又不失灵活性。
Victory 支持各种图表组件，如折线图、柱状图、面积图、饼图、蜡烛图、散点图等等。
如何利用胜利
要使用 Victory，首先需要将其安装到您的 React 项目中。
npm i --save victory
安装完成后，您可以按如下方式创建胜利图表。
import React from 'react'
import { VictoryChart, VictoryLine, VictoryBar } from 'victory';
const sales = {
style: {
data: {
stroke: "#FB8833", // for Line chart
},
parent: { border: "1px solid #ccc"}
},
style2: {
data: {
fill: "#FB8833" // for Bar chart
},
parent: { border: "1px solid #ccc"}
},
data: [
{ x: "January", y: 21 },
{ x: "February", y: 35 },
{ x: "March", y: 75 },
{ x: "April", y: 51 },
{ x: "May", y: 41 },
{ x: "June", y: 47 }
]
};
const leads = {
style: {
data: {
stroke: "#17A8F5", // for Line chart
},
parent: { border: "1px solid #ccc"}
},
style2: {
data: {
fill: "#17A8F5" // for Bar chart
},
parent: { border: "1px solid #ccc"}
},
data: [
{ x: "January", y: 41 },
{ x: "February", y: 79 },
{ x: "March", y: 57 },
{ x: "April", y: 47 },
{ x: "May", y: 63 },
{ x: "June", y: 71 }
]
};
export default function Victory() {
return (
<div className="row">
<div className="col-md-12">
<h2>Charts with victory library</h2>
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart</h3>
<div className="section-content">
<VictoryChart padding={30}>
<VictoryLine
style={sales.style}
data={sales.data}
/>
<VictoryLine
style={leads.style}
data={leads.data}
/>
</VictoryChart>
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart</h3>
<div className="section-content">
<VictoryChart padding={30}>
<VictoryBar
style={leads.style2}
data={leads.data}
/>
<VictoryBar
style={sales.style2}
data={sales.data}
/>
</VictoryChart>
</div>
</div>
</div>
)
}
使用 Victory 初始化图表组件很简单。但是，它没有预定义的图表元素，例如图例、工具提示等。
所以，如果您想在图表中添加这些元素，则需要手动添加和设计。您可以查看相关的官方文档。
结论
在上述7个图表库中，如果您需要功能齐全且易于使用的图表，我推荐前5个。但如果您想要创建高度自定义的图表，并自行设计，则可以尝试后2个图表库。
读完这篇文章后，我希望您现在能够选择并决定哪个图表库最适合您的 React 项目。
如果您觉得这篇文章有用，欢迎分享给您的开发者朋友。如果您有任何疑问或建议，请在下方评论区留言！
祝您编程愉快！
文章来源：https://dev.to/syakirurahman/7-best-react-chart-graph-libraries-how-to-use-them-with-demo-32ak