介绍 本项目将引导你在 React 中创建一个热图日历,类似于 GitHub 的贡献图。这种日历是一种直观的方式,可以随着时间可视化活动数据,颜色的深浅表示给定日期的活动水平。在本项目结束时,你将清楚地了解如何在 React 应用程序中集成和使用日历热图。 👀 预览 🎯 任务 在本项目中,你将学习: 如何安装热图日历所需的依赖项。 如何创建热图组件的基本结构。 如何添加用于过滤数据的状态。 如何生成虚拟数据来填充热图。 如何使用虚拟数据渲染日历热图。 如何实现过滤逻辑,根据活动水平过滤热图。 如何为热图组件和过滤按钮设置样式。 如何将热图组件集成到主应用程序文件中。 如何启动应用程序以查看热图日历。 🏆 成果 完成本项目后,你将能够: 在 React 应用程序中集成日历热图。 在 React 组件中管理状态和过滤数据。 使用 React 和 CSS 渲染和设置日历热图的样式。 理解生成和填充虚拟数据以进行可视化的过程。 启动并查看热图日历应用程序。 安装必要的依赖项 我们的热图日历项目基于一个全新的 React 应用程序。 功能: 安装项目依赖项。 安装用于热图的 react-calendar-heatmap 库。 安装 date-fns 以便轻松进行日期操作。 要安装项目依赖项,请使用以下命令: cd github-heatmap-calendar npm install 要添加日历热图功能,我们需要安装一个特定于 React 的库以及一个日期实用工具库。(该库已包含在项目中,无需安装。) npm install react-calendar-heatmap date-fns 创建热图组件框架 我们将从创建热图组件的基本结构开始,此时它还没有任何功能。 功能: 为热图组件创建一个新文件。 使用占位符内容定义函数组件。 代码: // src/GitHubCalendar.js import React from "react"; const GitHubCalendar = () => { return ( <div> {/* 热图的占位符 */} <div>Heatmap will go here</div> </div> ); }; export default GitHubCalendar; 添加用于过滤的状态 在填充热图之前,让我们添加一些状态来管理基于用户交互的数据过滤。 功能: 导入 useState 钩子。 初始化 colorFilter 状态变量。 代码: // src/GitHubCalendar.js import React, { useState } from "react"; const GitHubCalendar = () => { const [colorFilter, setColorFilter] = useState(null); return ( <div> {/* 热图的占位符 */} <div>Heatmap will go here</div> </div> ); }; export default GitHubCalendar; 生成虚拟数据 生成虚拟数据以模拟活动。在实际应用中,我们会用真实数据替换这些虚拟数据。 功能: 使用 date-fns 创建一个日期范围。 为每一天填充包含虚拟数据的数组。 代码: // src/GitHubCalendar.js import { subYears, isBefore, format } from "date-fns"; // 在 GitHubCalendar 组件内部添加 const startDate = subYears(new Date(), 1); const endDate = new Date(); const values = []; let currentDate = startDate; while (isBefore(currentDate, endDate)) { values.push({ date: format(currentDate, "yyyy-MM-dd"), count: Math.floor(Math.random() * 5) }); currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1)); } 渲染日历热图 现在我们将引入 CalendarHeatmap 组件,并将虚拟数据传递给它。 功能: 使用数据渲染热图。 根据计数定义颜色比例。 代码: // src/GitHubCalendar.js import CalendarHeatmap from "react-calendar-heatmap"; import "react-calendar-heatmap/dist/styles.css"; // 在 GitHubCalendar 组件的返回语句中添加 <CalendarHeatmap startDate={startDate} endDate={endDate} values={values} classForValue={(value) => { if (!value || value.count === 0) { return "color-empty"; } return `color-scale-${value.count}`; }} showWeekdayLabels={true} />; 实现过滤逻辑 为每个活动级别创建按钮,点击时将对热图进行过滤。 功能: 添加设置 colorFilter 状态的按钮。 根据所选过滤器过滤热图数据。 代码: // src/GitHubCalendar.js // 在返回语句中的 CalendarHeatmap 组件下方添加 <div className="filter-bar"> {Array.from({ length: 5 }, (_, i) => ( <button key={i} className={`filter-btn color-scale-${i}`} onClick={() => setColorFilter(colorFilter === i ? null : i)} > 过滤 {i} </button> ))} </div> 为组件设置样式 定义热图和过滤按钮的 CSS,以便直观地传达数据。 功能: 为热图颜色和按钮样式添加 CSS 规则。 代码: /* src/App.css */ /* 在此处添加你的 CSS 规则 */ .color-empty { fill: #ebedf0; /* 无贡献 - 白色 */ } .color-scale-0 { fill: #ebedf0; /* 最浅的绿色 - 可将其更改为你最浅的绿色 */ } .color-scale-1 { fill: #9be9a8; /* 浅绿 */ } .color-scale-2 { fill: #40c463; /* 中绿 */ } .color-scale-3 { fill: #30a14e; /* 深绿 */ } .color-scale-4 { fill: #216e39; /* 最深的绿色 */ } .filter-bar { display: flex; justify-content: center; margin-top: 20px; } .filter-btn { background: none; border: 2px solid transparent; margin: 0 5px; padding: 5px 10px; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; } /* 为过滤按钮应用相同的颜色 */ .filter-btn.color-scale-0 { border-color: #ebedf0; } .filter-btn.color-scale-1 { border-color: #9be9a8; } .filter-btn.color-scale-2 { border-color: #40c463; } .filter-btn.color-scale-3 { border-color: #30a14e; } .filter-btn.color-scale-4 { border-color: #216e39; } .filter-btn:hover, .filter-btn:focus { background-color: #ddd; } .reset { border-color: #000; /* 重置按钮边框颜色 */ } /* 突出显示活动过滤器 */ .filter-btn.active { border-color: #666; /* 活动按钮边框颜色 */ font-weight: bold; } 有关设置颜色比例和按钮样式的指导,请参考之前的 CSS 示例。 组装应用程序 将热图组件集成到你的主应用程序文件中。 功能: 将 GitHubCalendar 组件导入到 App.js 中。 在应用程序中渲染 GitHubCalendar 组件。 代码: // src/App.js import React from "react"; import "./App.css"; import GitHubCalendar from "./GitHubCalendar"; function App() { return ( <div className="App"> <GitHubCalendar /> </div> ); } export default App; 启动应用程序 所有组件都已就位,现在是时候看看你的热图日历实际运行的效果了。 功能: 运行应用程序并查看热图日历。 命令: npm start 这将编译 React 应用程序,并在默认的网页浏览器中以 8080 端口打开它。 总结 恭喜你!你刚刚创建了一个 React 应用程序,其中包含一个类似于 GitHub 贡献图的热图日历。从项目初始化开始,你安装了必要的库,创建了一个热图组件,实现了过滤功能,并为组件设置了样式。这个项目提供了一种在 React 中逐步构建复杂 UI 组件的方法,该方法可用于显示各种类型的时间序列数据或用户活动。