如今，可视化是必不可少的，你如何呈现信息很重要。随着我们指尖上的数据越来越多，这些数据往往会让人感到乏味，尤其是在没有得到很好的呈现时。
为了使数据更容易消化，图表是组织和可视化数据的一个好方法。对于React应用，开发者可以使用Recharts，这是一个基于JavaScript的开源 "基于React组件的可组合图表库"。
在本教程中，我们将通过构建一个小型React应用来学习如何使用Recharts，该应用从Sanity内容湖中获取数据，以视觉上吸引人的方式总结大量数据集。
Recharts教程的要求
要跟上本教程，你必须具备以下条件。
- 在你的电脑上安装Node.js v14
- 一个代码编辑器（我使用的是Visual Studio Code）。
- Yarn软件包管理器
设置Recharts项目
为了开始我们的项目，我们必须首先在我们的机器上安装Sanity CLI，这可以通过运行以下命令来完成。
yarn install -g @sanity/cli
这将在全局范围内安装命令行工具，以设置新项目、管理数据集、导入数据等。我们将用它来启动和运行我们的项目。
创建一个Sanity项目
接下来，我们必须启动我们的Sanity项目。要做到这一点，运行下面的命令。
sanity init
上面的命令会要求你选择你的登录类型：Google,GitHub,Email/password 。
你可以选择一个对你的项目来说最方便的，这将立即打开你的默认浏览器并完成注册/登录过程。
回到你的终端，你会被提示到。
- 导入你的首选项目名称
- 选择一个数据集的偏好（使用默认的）。
- 确认项目的路径
- 选择一个模式
在发布这篇文章时，Sanity只提供了三种开箱即用的、已经填充好的模式：Movie project (schema + sample data) 、E-commerce (Schema + sample data) 、Blog(schema + empty data) 。
然而，对于这个项目，我们必须选择Clean project with no predefined schemas ，因为我们必须自己定义我们的模式。
安装完成后，我们可以看到在我们的项目文件夹中创建的文件和文件夹。要启动Sanity，请运行以下命令。
sanity start
接下来，我们必须安装必要的节点模块，进行编译，并在http://localhost:3333，启动项目。在登录的时候，确保你选择的是你在创建项目时使用的同一个提供者。
现在，让我们添加我们的模式代码；这只是内容建模，即识别、整理并将所有内容关联到一个集中的结构中的过程，这样我们就可以建立高效的工作流和数据结构。
我们在这个项目中要使用的数据来自John Hopkins的GitHub页面，它提供了Covid病例的每日报告，包括我们感兴趣的字段：省/州，确诊病例，以及死亡人数。
我们将特别使用01/01/2021的数据在我们的图表中表示。要做到这一点，首先，在schemas 文件夹中创建一个文件，名为covid.js ，并复制和粘贴以下代码。
这个文件定义了特定模式的结构。
// schemas/covid.js
export default{
name: "covid",
type : "document",
title: "Covid19Data",
fields: [
{
name: "title",
type: "string",
title: "States"
},
{
name: "confirmed",
type: "number",
title: "Confirmed"
},
{
name: "death",
type: "number",
title: "Death"
},
],
}
现在，我们必须将covid.js 导入我们的schemas 文件夹内的schema.js 文件，像这样。
// schemas/schema.js
// First, we must import the schema creator
import createSchema from 'part:@sanity/base/schema-creator'
// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:@sanity/base/schema-type'
import covid from './covid'
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: 'default',
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
/* Your types here! */
covid,
]),
}
现在，回到http://localhost:3333，我们会看到这个。
Covid19Data 是我们在模式中创建的文件的标题，其中有States,Confirmed, 和Death 。
States 展示了Covid病例的地点，Confirmed 显示了Covid检测呈阳性的人数，Death 显示了在该特定州死于Covid的人数。
我们现在可以用01/01/2021数据集的数据来填充我们的项目。
注意，我们必须只从下面的Province_State,Confirmed, 和Deaths 列中复制。
创建一个React应用程序
现在我们的Sanity项目已经启动并运行，现在是时候用React设置我们的前端应用程序了。
首先，创建一个空的文件夹并运行这个命令。
npx create-react-app frontendfinal
frontendfinal 是我决定的项目名称，但记住，你的项目可以是任何名字。
安装完React后，是时候安装Recharts了。首先，cd 到frontendfinal
cd frontendfinal
然后，我们可以安装recharts 。
npm install recharts
在你的文本编辑器中打开它，并导航到package.json ，这样就可以打开以下内容。
现在，Recharts已经安装在我们的React应用中了
清理React代码
create react app 命令可以快速引导React应用程序；现在，我们只需要对其进行一些修改，以适应我们的用例，因为我们不需要create react app 自带的一切。
对于这个特殊的用例，我们不需要在src 文件夹内使用App.css 或logo.svg ；只需删除App.js 内的所有代码。
安装Sanity客户端
为了让你的React应用程序连接到正在运行的Sanity实例，你必须安装[sanity/client](https://www.npmjs.com/package/@sanity/client)通过运行此命令。
npm install --save @sanity/client
接下来，在src 文件夹中创建一个文件。我决定使用clientDetail.js ，所以在clientDetail.js 内，复制并粘贴以下代码，并适当地替换细节。
// src/clientDetails.js
const sanityClient = require('@sanity/client')
const client = sanityClient({
projectId: 'xxxxxxx',
dataset: 'production',
apiVersion: '2021-03-25', // use a UTC date string
useCdn: false, // `false` if you want to ensure fresh data
})
export default client;
你可以通过登录到你的Sanity账户并选择你的项目来获得你的projectId 。其他信息如数据集也在那里。
同样，为了避免CORS问题，Sanity让你添加请求的来源。要添加一个新的原点，请按照以下步骤进行。
- 在设置>API设置>CORS原点下
- 点击ADD CORS origin并添加http://localhost:3000，这是你的 React URL
- 当部署这个应用程序时，添加你的应用程序URL
- 勾选Allow Credential>Save
这些步骤已经在下面的截图中进行了直观的编号。
回到我们的App.js 文件中，我们必须导入以下内容。useState, useEffect 来自react ，client 来自clientDetails.js 文件，并从Recharts导入一些组件（LineChart 、Line 、XAxis 、YAxis 、CartesianGrid 、Tooltip 和Legend ）来表示数据。
我们的App.js 文件将看起来像这样。
// src/App.js
import React, { useState, useEffect } from "react";
import client from "./clientDetails";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
然后，我们可以创建一个名为App 的功能组件，它将使用useState,useEffect,并使用GROQ从我们的Sanity实例中获取数据。
// src/App.js
import React, { useState, useEffect } from "react";
import client from "./clientDetails";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
export default function App() {
const [covidData, setcovidData] = useState(null);
useEffect(() => {
client
.fetch(
`*[_type == 'covid']{
confirmed,
title,
death
}`
)
.then((data) => {
setcovidData(data);
})
.catch(console.error);
}, []);
然后我们必须返回一个div 标签，其中包含所有导入的Recharts组件和一些定义的属性。
我们的App.js 完整代码应该如下。
// src/App.js
import React, { useState, useEffect } from "react";
import client from "./clientDetails";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
export default function App() {
const [covidData, setcovidData] = useState(null);
useEffect(() => {
client
.fetch(
`*[_type == 'covid']{
confirmed,
title,
death
}`
)
.then((data) => {
setcovidData(data);
})
.catch(console.error);
}, []);
return (
<div>
{!covidData && <div>Loading</div>}
{covidData && (
<LineChart
width={1000}
height={400}
data={covidData}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="title" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="death"
stroke="#8884d8"
fill="#8884d8"
/>
<Line
type="monotone"
dataKey="confirmed"
stroke="#8884d8"
fill="#8884d8"
/>
</LineChart>
)}
</div>
);
}
为了运行我们最终确定的代码，我们可以用以下方式运行我们的React应用程序。
npm run start
然后，我们可以在http://localhost:3000/，将其启动。
祝贺你，你能够看透这一点!
结论
可视化是组织数据的必要条件，最重要的是我们要聪明地、简明地展示它。我们能够从Sanity获取数据到我们的React应用程序，并使用Recharts显示它。
