数据可视化一直是软件工程的重要组成部分，尤其是前端开发。总是需要为我们的用户提供可视化的数据，以帮助他们更好地理解我们的应用程序中发生的事情。
Chart.js是一个流行的JavaScript库，用于在网站上创建灵活的图表，在本教程中，我将告诉你如何在React环境中使用Chart.js。
我们不是做一些直接的事情，比如用临时的数据显示图表，而是要创建一个应用程序，从API中提取加密货币价格，并在柱状图中显示。
CoinCap的API为我们提供了实时的加密货币价格，我们将把它输入我们的React组件。
前提条件
对于本教程，你需要对React框架有一个基本的了解。React的文档是一个很好的开始。
创建项目
我将使用CodeSandbox来建立一个新的React应用，而不是使用CRA在本地下载文件。你可以在这里玩玩该教程的沙盒。
要在CodeSandbox中快速建立一个React模板，在你的浏览器中打开一个新标签，然后输入react.new（以后感谢我 ）。
接下来，在依赖项部分，添加这两个库。
- chart.js
- react-chartjs-2
React-chartjs-2是Chart.js 2.0和3.0的React包装器，让我们把Chart.js元素用作React组件。
获取数据
从文件树中，打开App.js 。在这里，我们将从API中获取数据，并将结果传递给一个单独的组件来渲染图表。
用下面的代码替换App.js 的内容。
import { useEffect } from "react"
export default function App() {
useEffect(() => {
const fetchPrices = async () => {
const res = await fetch("https://api.coincap.io/v2/assets/?limit=5")
const data = await res.json()
console.log(data)
}
fetchPrices()
}, []);
return (
<div className="App">
Hello Codesandbox
</div>
);
}
我们已经创建了一个函数，fetchPrices ，它向CoinCap API发出请求。
默认情况下，API会返回一个带有data 属性的对象，该对象是一个包含100个加密货币对象的数组。因为我们不需要那么多的结果，我在URL的末尾附加了limit 参数，只请求前5个对象。
fetchPrices 也已经在一个useEffect 钩子中被调用，并带有一个空的依赖数组，这意味着一旦App 组件被安装，该函数就会运行。
让我们看一下我们获取的数据的结果：
{data: Array(5), timestamp: 1625898595698}
data: Array(5)
1. ▶0: Object
id: "bitcoin"
rank: "1"
symbol: "BTC"
name: "Bitcoin"
priceUsd: "33692.0391437919079095"
2. ▶1: Object
// ...more data
data 我们只需要从name 和priceUsd 属性来创建我们的图表。
Chart.js的React组件
react-chartjs-2的React组件接受两个主要的props：data 和options 。这里有一个可接受的prop的列表。
data 道具接收了一个类似于下面的对象：
const data = {
labels: ['Red', 'Orange', 'Blue'],
// datasets is an array of objects where each object represents a set of data to display corresponding to the labels above. for brevity, we'll keep it at one object
datasets: [
{
label: 'Popularity of colours'
data: [55, 23, 96],
// you can set indiviual colors for each bar
backgroundColor: [
'rgba(255, 255, 255, 0.6)'
'rgba(255, 255, 255, 0.6)'
'rgba(255, 255, 255, 0.6)'
],
borderWidth: 1,
}
]
}
backgroundColor 和borderWidth 只是可以添加到datasets 数组中的一些属性。查看可接受的本体的完整列表。
现在我们已经知道了data 中的对象是如何设置的，我们可以用从CoinCap的API获取的数据来复制这个对象。我们将导入useState 钩子并使用它来创建一个chartData 变量。
import { useState, useEffect } from "react"
export default function App() {
useEffect(() => {
const fetchPrices = async () => {
const res = await fetch("https://api.coincap.io/v2/assets/?limit=5")
const data = await res.json()
console.log(data)
}
fetchPrices()
}, [])
const [chartData, setChartData] = useState({})
return (
<div className="App">
Hello Codesandbox
</div>
);
}
这块状态持有数据对象，它将被传递给Chart.js的Bar 组件。
现在我们可以用来自API的数据填充labels 和data 数组。为了实现这一目标，我们将使用map 方法来创建一个从API获得的值的数组。
useEffect(() => {
const fetchPrices = async () => {
const res = await fetch("https://api.coincap.io/v2/assets/?limit=5")
const data = await res.json()
setChartData({
labels: data.data.map((crypto) => crypto.name),
datasets: [
{
label: "Price in USD",
data: data.data.map((crypto) => crypto.priceUsd),
backgroundColor: [
"#ffbb11",
"#ecf0f1",
"#50AF95",
"#f3ba2f",
"#2a71d0"
]
}
]
});
};
fetchPrices()
}, []);
完成这些后，继续创建Chart 组件。在你的应用程序的根目录下创建一个components 文件夹，并在其中添加一个名为Chart.js 的文件。将这个组件导入到App.js 。
import { useState, useEffect } from "react"
import { Chart } from "../components/Chart";
export default function App() {
// ...
const [chartData, setChartData] = useState({})
return (
<div className="App">
<Chart chartData={chartData} />
</div>
)
}
创建图表组件
react-chartjs-2软件包提供了多种图表类型供用户选择。其中包括Line 、Bar 、Pie 、Doughnut ，等等。
在这种情况下，我们将使用Bar 组件。
import { Bar } from "react-chartjs-2";
export const BarChart = ({ chartData }) => {
return (
<div>
<Bar
data={chartData}
options={{
plugins: {
title: {
display: true,
text: "Cryptocurrency prices"
},
legend: {
display: true,
position: "bottom"
}
}
}}
/>
</div>
);
};
在上面的代码中，我们已经从道具中解构了chartData ，并将其作为data 道具的值。options 道具，像data ，接受一个对象，我们可以在其中调整我们的图表的不同部分，如title ，legend ，和其他。看看所有的可配置选项。
我们的项目就这样结束了!上述配置现在将产生下面的图表。
总结
你已经看到了如何使用Chart.js和React在网站中显示图表，但它比这个例子更有意义。
我鼓励你访问Chart.js文档，以了解更多关于该库的信息，并深入研究选项，以查看更多配置图表的方法。
