在ReactJS中创建日历热图图表(Github Contribution Like)

本文概述

• 1.安装React Calendar Heatmap
• 2.添加默认样式表
• 3.实施你的第一个热图

热图图表以表格格式表示一些数据, 并具有一些定义的颜色范围, 例如低, 平均和高。通常, 这是传统热图的一种变体, 其中数据显示在日历上(通常在列上是月, 在行上是工作日, 每个数据点都是日期), 并且使用你自己感兴趣的度量来显示颜色编码, 通常会因天。

如果你愿意在ReactJS项目中实现这样的图表, 我们将向你展示如何使用React Calendar Heatmap组件来实现它。

1.安装React Calendar Heatmap

React日历热图允许你嵌入svg日历热图组件, 其灵感来自github的贡献图。该组件可以扩展到容器大小, 并且可以进行超级配置。

要在你的项目中安装此组件, 请打开一个新终端, 切换到项目的目录并运行以下命令进行安装：

npm install react-calendar-heatmap

安装后, 你将能够使用react-calendar-heatmap将组件导入代码中。有关此组件的更多信息, 请不要忘记在Github上访问其官方存储库。

2.添加默认样式表

第二步, 你需要加载CSS的主要结构, 该结构将为组件提供热图结构。你可以使用免费的CDN：

<!-- Main CSS of heatmap -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/patientslikeme/react-calendar-heatmap/d0a7d802/src/styles.css">

或从存储库下载styles.css文件的副本, 然后使用JS(通过导入)或使用<link>标记将其添加到项目中。

更改热图颜色

要定义热图的颜色, 有必要通过加载新的CSS文件或仅在HTML模板中创建样式块来添加一些额外的CSS。共有4条规则定义每种刻度尺的颜色：

.react-calendar-heatmap .color-scale-1 { 
    fill: #d6e685; 
}
.react-calendar-heatmap .color-scale-2 { 
    fill: #8cc665; 
}
.react-calendar-heatmap .color-scale-3 {
    fill: #44a340; 
}
.react-calendar-heatmap .color-scale-4 { 
    fill: #1e6823; 
}

3.实施你的第一个热图

最后, 将热图包括在视图中所需要做的就是导入组件并提供所需的属性以对其进行初始化。作为基本点, 你需要提供将要呈现的数据, 此数据需要存储在数组内, 并且每次都是具有单个属性(即日期)的文字对象。此日期为字符串形式, 必须能够由JavaScript的Date类和一个count属性来解释, 该属性指示日期上的项目数量。同样, 你需要提供将在图形中显示的天数, 在这种情况下, 我们将显示整年(365天)。如前所述, 图表会进行扩展以适合父容器, 因此我们将其包装在宽度为700px的div中：

import React from 'react';

// Import the calendarheatmap
import CalendarHeatmap from 'react-calendar-heatmap';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);
        
        this.state = {
            // Some dates to render in the heatmap
            values: [
                { date: '2016-01-01', count: 4 }, { date: '2016-01-22', count: 1 }, { date: '2016-01-30', count: 3 }, { date: new Date(2016, 0, 4)}
            ], // How many days should be shown
            numDays: 365
        }

        this.onClick = this.onClick.bind(this);
    }
 
    onClick(value) {
        console.log(value);
    }

    render() {
        return (
            <div style={{width: 700}}>
                <CalendarHeatmap
                    endDate={new Date('2017-01-01')}
                    numDays={this.state.numDays}
                    values={this.state.values}
                    onClick={this.onClick}
                />
            </div>
        );
    }
}

结果, 使用一些虚拟数据, 该组件将呈现一个简单的图表。如果你愿意进行测试, 则可以制作一个随机的日期生成器来填充日历, 因此, 你可以提供此方法作为返回带有伪数据的数组的值, 而不是提供带有日期的数组：

function getDummyDates(from, to, numberDates) {
    numberDates = numberDates || 50;
    let result = [];

    for(let i = 0; i < numberDates;i++){
        result.push(
            {
                date: new Date(from.getTime() + Math.random() * (to.getTime() - from.getTime())), count: Math.floor(Math.random() * 6)
            }
        );
    }

    return result;
}

this.state = {
    // Some dates to render in the heatmap
    values: getDummyDates(new Date(2016, 0, 1), new Date(2017, 2, 1), 500), // How many days should be shown
    numDays: 365
};

结果图表如下所示：

编码愉快！