简介
react-calendar-heatmap-moxel 是一个 React 组件，可以在日历热力图中显示数据。它与 react-calendar-heatmap 一样，可以在日历上显示热力图，用不同的颜色表示不同的数值。不同的是，react-calendar-heatmap-moxel 使用了 Moxel，可以用来加载和缓存数据，提高数据处理的效率。
安装
使用 npm 安装 react-calendar-heatmap-moxel：
npm install react-calendar-heatmap-moxel --save
使用
在 React 中使用 react-calendar-heatmap-moxel，首先需要导入组件：
import Heatmap from 'react-calendar-heatmap-moxel';
然后需要将 Heatmap 组件加入到代码中：
-- -------------------- ---- -------
----- --- - -- -- -
----- -------- - ----------------
----- ------- - -
-------- -------
--------- --------
---------- -------------
-------- -------------
--
------ -
--------
-------------------
-----------------
----------- -- ----------------------
------------------ ---------- -- -
------ ----------------------------------
--
--
--
--在上面的代码中，我们首先设置了 Moxel 的 URL 和一些选项参数，例如数据的键值名、开始和结束日期。然后我们将这些参数传递给 Heatmap 组件，并设置了 loading 和 renderData 两个回调函数。loading 回调函数可以在数据加载时显示一个 Loading 状态，renderData 回调函数则负责渲染数据。
参数
我们可以从 Heatmap 组件的 props 中得到多个参数：
moxelUrl：Moxel 的 URL 地址。
options：选项参数，在日历上显示的数据的日期范围、数据的键值名等。具体参数如下：
- dateKey：日期键值名，默认为 date。
- valueKey：数值键值名，默认为 value。
- startDate：开始日期。
- endDate：结束日期。
- maxValue：最大数值。
- minValue：最小数值。
- colorScale：颜色值数组。
loading：加载回调函数，当数据正在加载时会调用。
renderData：数据渲染回调函数，数据加载完成后会调用，参数为：data 和 dateArray。其中，data 为一个对象，键为日期，值为数据；dateArray 是一个日期数组，用于渲染日历上的日期。
示例代码
下面是一个完整的示例代码，我们在日历上显示了 2020 年每个月的平均温度数据：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------- ---- -------------------------------
----- --- - -- -- -
----- ---------- ------------ - -------------
----- -------- - --------------------------------
----- ------- - -
-------- ------
--------- -------
---------- -------------
-------- -------------
--------- ---
--------- --
----------- ----------- ---------- ---------- -----------
--
------------ -- -
----- --------- - ----- -- -- -
----- -------- - ----- ------
---------------------------------------------------------------------------
--
----- ---- - ----- ----------------
----- ---- - ------------------------- ----
----- ---- - ---
------------------ -- -
----- ---- - ---------------
----- ------- - -------------------- ---
----- ----- - --------------------
------------- - ------
---
------------------
--
------------
-- ----
----- ---------- - ------ ---------- -- -
------ -
---- -------- -------- ------- -------------- ----- ---
--------------------- -- -- -
----- --------- - -----------
----- ---------- - -----------
----------- - ----------------- -
----------------- - ------------------ -
-------------------------- - --
--
------ -
----
-------
--------
------ -------
------- -------
---------------- -------------------------------
--
-------
--
---
------
--
--
------ -
--------
-------------------
-----------------
----------- -- ----------------------
-----------------------
--
--
--
------ ------- ----在上面的示例代码中，我们首先使用了 useState 和 useEffect 两个 React hooks 来获取从数据 API 中获取数据。然后将数据和 Heatmap 组件一起使用，最终显示了一个日历热力图，用不同的颜色表示不同的温度值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c881e8991b448e0096