简介
在开发前端应用时，图表的绘制是不可避免的需求。Google Charts 是一个功能强大的 JS 库，可以用来绘制各种类型的图表，如饼图、柱状图、折线图等等。而 react-google-charts-with-key 这个 NPM 包则提供了一种方便快捷的方式来在 React 应用中使用 Google Charts。
安装
在使用 react-google-charts-with-key 前，需要先安装它。这可以通过命令行工具和 npm 实现。在命令行中进入项目目录，输入以下命令：
npm install react-google-charts-with-key
这条命令会安装 react-google-charts-with-key，并将它添加到项目依赖中。
如何使用
配置
要使用 react-google-charts-with-key 绘制图表，需要先配置一个 Google API Key，可以在 Google Developers Console 中创建一个。选择创建项目，输入项目名称并选择该项目所属的组织，接着转到 “APIs & Services” > “Credentials” 上，点击 “Create credentials” 然后选择 “API key” > “Browser key”。
在白名单中添加允许的域名（例如：localhost:3000，* 表示所有域名），最后点击 “Create” 按钮。你会看到一个 API key 值，这个值在后面的代码中会用到。
导入
在需要绘制图表的 React 组件文件中，先导入 react-google-charts-with-key 包。
import GoogleChart from 'react-google-charts-with-key';
使用
可以在组件的 render 方法中使用 GoogleChart 组件来绘制图表。例如，下面这段代码绘制了一张简单的柱状图：
-- -------------------- ---- -------
------------
---------------
----------------
-----------------------
-------
-------- -------- ----------- ----------
-------- ----- ---- -----
-------- ----- ---- -----
-------- ---- ----- -----
-------- ----- ---- ----
--
----------
------ -------- -------------
------ - ------ ------- --------------- - ------ ------ - --
------ - --------- - -
--
--------------------------
--在这段代码中，我们指定了图表的宽度和高度，并设置了图表类型和数据。在 options 属性中，我们设置了标题、横轴标签以及纵轴的最小值。apiKey 属性是我们前面获取到的 API key 值。
通过配置数据（data）和选项（options），你可以很容易地绘制各种类型的图表。
示例
下面是一个更复杂的例子，展示了如何在同一组件中使用多个不同类型的图表。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------------
----- --------- ------- --------------- -
-------- -
------ -
--
------------
---------------
----------------
--------------------
-------
-------- ------ --- ------
-------- ----
------- ---
----------- ---
------- ---- ---
--------- --
--
----------
------ --- ----- -----------
--
--------------------------
--
------------
---------------
----------------
---------------------
-------
-------- -------- ------------
-------- ----- -----
-------- ----- -----
-------- ---- ------
-------- ----- ----
--
----------
------ -------- -------------
------ - ------ ------- --------------- - ------ ------ - --
------ - --------- - -
--
--------------------------
--
---
--
-
-
------ ------- ----------总结
通过 react-google-charts-with-key 这个 NPM 包，我们可以快速方便地在 React 应用中使用 Google Charts 绘制各种类型的图表。只需导入 GoogleChart 组件，并配置数据与选项，就可以轻松绘制图表。同时，这个 NPM 包的详细使用教程也可以帮助开发人员快速上手使用这个强大的图表库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727c81e8991b448e8aee