如何在 React 中使用 Google 图表
数据可视化是呈现数据和吸引观众的好方法，React 和 Google Charts 都是基于 JavaScript 构建的，它们可以协同工作，创建可重复使用的数据可视化，如条形图、饼图、气泡图等。
数据可视化是呈现数据和吸引观众的好方法。与原始数据、Excel 表格或一长串数字相比，人脑通常更擅长记住图像。 React 和 Google Charts 都是基于 JavaScript 构建的，它们可以协同工作，使开发人员能够创建引人入胜、可重复使用的数据可视化，如条形图、饼图、气泡图等。
在本教程中，我们将学习如何在 React 中使用 Google Charts。我们将讨论为什么应该使用 Google Charts，并演示如何使用 Google Charts 在 React 中可视化不同类型的图表。我们将详细介绍以下内容：
- 什么是谷歌图表？
- 设置项目
- 创建我们的第一个图表
- 设置我们的组件
- 可视化我们的图表
- 使用 React Hooks 操作我们的图表
- 创建数据源
- 更新 App.js
- 使用多个图表
什么是谷歌图表？
Google Charts 是来自 Google 的免费、现代且积极维护的 JavaScript 图表服务，它高效且易于在您的项目中使用。 Google Charts 包括一组广泛的自定义选项以及一个丰富的图表库，其中有许多选项可供选择，从简单的折线图到更复杂的分层树形图。 Google Charts 包括一些图表类型，例如甘特图，根据我的经验，在其他图表库中很难找到。
谷歌图表兼容很多设备，不像其他一些库，在这方面没有那么大方。 Google Charts 具有跨浏览器兼容性和跨平台功能，这意味着图表在桌面和移动设备上看起来都不错。 Google Charts 使用 HTML 和 SVG，因此不需要额外的插件。
与其他图表库（如 Chart.js，在撰写本文时为 117kB）相比，Google Charts 压缩和压缩后大小为 43kB。
在我看来，Google Charts 的最佳用例是当您快速想要在您的网站上设置可视化而不需要添加大量自定义项，或者您担心已发布应用程序的整体大小时。现在我们已经熟悉了 Google Charts，让我们学习如何在我们的 React 应用程序中设置它。
设置项目
要在我们的 React 应用程序中使用 Google Charts，我们将首先使用以下代码设置一个 React 应用程序：
npx create-react-app react-google-chart
运行完此代码后，进入到这个文件夹：
cd react-google-chart
安装 react-google-charts 包
react-google-charts 包是一个现代的、维护良好的、精简的、类型化的、用于 Google Charts 的 React 包装器，它使开发人员可以非常轻松地将 React 与 Google Charts 一起使用：
npm install --save react-google-charts
现在，我们都准备好使用 Google Charts 来可视化我们的数据了。启动项目以预览应用程序：
npm start
创建我们的第一个图表
开始设计界面，打开文本编辑器。接下来，删除 src/App.js 文件中 return 方法内的所有代码。该文件应类似于以下代码：
import './App.css';
function App() {
return (
);
}
export default App;
上面的代码带有在浏览器中呈现的默认占位符，因此我们将在本教程后面使用我们自己的内容对其进行更新。接下来，要查看 Google Charts 的实际效果，我们将创建一个简单的图表。首先，我们在 src 目录中创建一个名为 charts.js 的新文件，我们将在其中构建图表。
设置我们的组件
在新创建的文件中，我们将添加以下代码：
import { Chart } from "react-google-charts";
export const data = [
["Task", "Hours per Day"],
["Work", 11],
["Eat", 2],
["Commute", 2],
["Watch TV", 2],
["Sleep", 7],
];
export const options = {
title: "My Daily Activities",
};
const charts = () => {
return (
<Chart
chartType="PieChart"
data={data}
options={options}
width={"100%"}
height={"400px"}
/>
)
}
export default charts
首先，我们导入 react-google-charts 并获取 Chart 属性。接下来，我们创建一个数据变量来存放要在饼图中显示的数据。饼图是高度可定制的；对于更复杂的图表，您只需要将数据更新到数组中。
使用<Chart/>，您可以传递 props 来更新图表显示的数据，以及更改图表的外观。 chartType 属性允许您更改正在显示的图表类型。因此，如果我们改为传递 Barchart，则会显示一个条形图。
data 接受图表的数据，options 接受我们可以进一步自定义的对象。我们只更改了此示例的标题。最后，正如它们各自的名称所暗示的那样，宽度和高度会改变图表的尺寸。
在 src/App.js 中，将内容替换为以下内容：
import './App.css';
import Chart from './components/charts'
function App() {
return (
<div className="App">
<Chart />
</div>
);
}
export default App;
使用上面的代码，我们简单地导入并渲染了 charts.js 组件。
可视化我们的图表
让我们看看到目前为止我们已经构建了什么。现在尝试运行服务器。如果一切顺利，您应该会看到类似于下图的内容：
该图表非常具有交互性，只需几行代码即可轻松生成。
使用 React Hooks 操作我们的图表
我们之前的示例仅涵盖了快速创建和显示图表的基本用例。让我们进一步扩展这个示例，看看它如何在具有更多组件和集中数据源的更复杂项目中发挥作用。
为此，我们将使用 React Hooks 来跟踪更改，然后将数据作为 props 向下传递给组件。在使用 Redux 或 Context API 时，您可以应用相同的方法。
首先，我们将创建一个 data.json 文件，该文件将存放图表的数据。在实际应用程序中，此数据源将来自 API。然后，我们将创建一个 React useState Hook 来跟踪要传递给组件的数据。最后，我们将创建一个按钮来获取这些数据并更新 Hook。
创建数据源
在项目的根目录中创建一个新文件并将其命名为 data.json。将以下内容添加到其中：
{
"version": 1.0,
"totalCharts": 32,
"charts": [
{
"name": "Pie",
"chartType": "PieChart",
"data": [
["Task", "Hours per Day"],
["Work", 11],
["Eat", 2],
["Commute", 2],
["Watch TV", 2],
["Sleep", 7]
],
"options":{
"title": "I am pie"
},
"width": "100%",
"height": "400px"
},
{
"name": "Bar",
"chartType": "BarChart",
"data": [
["Task", "Hours per Day"],
["Work", 11],
["Eat", 2],
["Commute", 2],
["Watch TV", 2],
["Sleep", 7]
],
"options":{
"title": "I am a bar"
},
"width": "100%",
"height": "400px"
}
]
}
如前所述，上面的代码将是我们的数据源。
更新 App.js
接下来，我们将更新 App.js 文件以包含我们的 Hook 和我们的按钮组件。为此，我们将创建两种状态，一种用于存储图表数据，另一种用于切换图表的可见性：
import React, { useState, useEffect } from 'react';
function App() {
const [show, setShow] = useState(false);
const [data, setData] = useState(false);
}
我们将使用 useEffect Hook 来监控 show 变量的变化，之后我们将使用 setData 相应地更新 data 变量：
import React, { useState, useEffect } from 'react';
import response from "./data.json"
function App() {
const [show, setShow] = useState(false);
const [data, setData] = useState(false);
useEffect(() => {
if(show){
setData(response)
}
}, [show]);
data 变量将是我们从 data.json 文件中获得的响应。我们几乎完成了这些更改。接下来，我们将关注组件的返回方法。我们需要根据 show 变量的当前值添加切换和显示不同内容的按钮：
return (
<div className="App">
{ show ?
<span>
<h2>Available charts</h2>
<h5>Charts will be shown here!</h5>
</span>
:
<h2>No charts available</h2>
}
<button onClick={() => setShow(!show)}>
{ show ? "Hide data" : "Fetch data" }
</button>
</div>
);
最后，我们将导入图表组件并将所需的数据作为道具传递给它。我只在下面显示所需的更改。稍后，我们将查看完整的文件：
....
import Chart from './components/charts'
....
return (
<div className="App">
{ show ?
<span>
<h2>Available charts</h2>
{ show && data && data.charts.map((chartData, i) => (
<Chart chart={chartData} key={i}/>
))}
.....
);
我们使用 map 函数循环数据，将每个图表对象作为道具传递，并显示结果图表。完整的 App.js 文件类似于下面的代码。我还添加了一些基本样式的 App.css 文件：
import React, { useState, useEffect } from 'react';
import './App.css';
import response from "./data.json"
import Chart from './components/charts'
function App() {
const [show, setShow] = useState(false);
const [data, setData] = useState(false);
useEffect(() => {
if(show){
setData(response)
}
}, [show]);
return (
<div className="App">
{ show ?
<span>
<h2>Available charts</h2>
{ show && data && data.charts.map((chartData, i) => (
<Chart chart={chartData} key={i}/>
))}
</span>
:
<h2>No charts available</h2>
}
<button onClick={() => setShow(!show)}>
{ show ? "Hide data" : "Fetch data" }
</button>
</div>
);
}
export default App;
使用多个图表
最后，在 App.js 文件中，我们将图表道具传递给图表组件。因此，我们需要更新图表组件以使用该道具：
import { Chart } from "react-google-charts";
const charts = (prop) => {
return (
<Chart
chartType={prop.chart.chartType}
data={prop.chart.data}
options={prop.chart.options}
width={prop.chart.width}
height={prop.chart.height}
/>
)
}
export default charts
让我们看看我们的图表是什么样子的。如果您关闭了服务器，请继续并再次运行它。当您在浏览器中查看它时，您应该会看到类似于下图的内容：
