@antv/calendar-heatmap

Calendar heatmap

@antv/calendar-heatmap

• 仓库地址：https://github.com/antvis/calendar-heatmap

The Calendar heatmap implemented by G2.

Demo

详见 demo

API

参数名	说明	必填	类型	默认值	备注
autoFit	是否自适应宽高，默认为 true	否	boolean	true	-
width	图表宽度	否	number	-	-
height	图表高度	否	number	-	-
data	绘制数据	是	object[]	-	-
dateField	数据中代表时间的字段	是	string	-	-
valueField	数据中需要可视化的数值字段	是	string	-	-
colors	颜色映射	否	string[]	-	-
condition	颜色映射条件	否	Function	-	当声明 condition 时，必须同时声明 colors
squareStyle	方块的样式	否	object	-	-
size	方块的大小	否	number	16	-
axis	坐标轴样式	否	object	-	可配置属性： 1. visible 是否展示 2. tickCount 刻度数量 3. style 文本样式
title	图表各个月份的标题配置	否	object	-	可配置属性： 1. visible 是否展示 2. style 文本样式
start	开始月份	否	string	-	声明日历开始的月份，格式必须为 'YYYY-MM'，无论用户数据中是否有该月份的值，都会以 start 为准
end	结束月份	否	string	-	声明日历结束的月份，格式必须为 'YYYY-MM'，无论用户数据中是否有该月份的值，都会以 start 为准

数据结构说明

标准的 JSON 数组，每条记录需要包含 'YYYY-MM-DD' 的日期以及数值字段。

如下所示：

[
  { date: '2017-06-01', commits: 20 },
  { date: '2017-06-02', commits: 0 },
  { date: '2017-06-03', commits: 1 },
  { date: '2017-05-16', commits: 18 },
  { date: '2017-10-16', commits: 4 },
];

几点说明：

1. 时间格式建议使用 'YYYY-MM-DD'，但是不要求排序
2. 程序会为每个月自动补齐月份的应有的天数，比如上述数据只包含了 '2017-06'，只有三天数据，但是在日历图中我们需要可视化整个月份，所以程序会自动将 2017-06-01 ~ 2019-06-30 每一天的数据补齐，用户无需自己处理
3. 另外如果想要指定一定的时间区间，那么可以声明 start 和 end 属性

实例代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CalendarHeatmap from '@antv/calendar-heatmap';

class App extends Component {
  render() {
    const data = [
      { date: '2017-06-01', commits: 20 },
      { date: '2017-06-02', commits: 0 },
      { date: '2017-06-03', commits: 1 },
      { date: '2017-05-16', commits: 18 },
      { date: '2017-10-16', commits: 4 },
    ];

    const chartCfg = {
      start: '2016-10',
      end: '2017-10',
      data,
      height: 200,
      size: 10,
      dateField: 'date',
      valueField: 'commits',
      condition: val => {
        if (val === 0) {
          return '#F2F3F5';
        }

        if (val > 0 && val <= 1) {
          return '#BAE7FF';
        }

        if (val > 1 && val <= 10) {
          return '#1890FF';
        }

        if (val > 10) {
          return '#0050B3';
        }
      },
    };
    return (
      <div>
        <CalendarHeatmap {...chartCfg} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);