November: Procrastination Month
Miss any of our Open RFC calls?Watch the recordings here! »

@antv/calendar-heatmap

1.1.2 • Public • Published

Calendar heatmap

@antv/calendar-heatmap

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

The Calendar heatmap implemented by G2.

Demo

详见 demo

API

参数名 说明 必填 类型 默认值 备注
autoFit 是否自适应宽高,默认为 true boolean true -
partition 是否按月为单位分区绘制 boolean false -
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. 另外如果想要指定一定的时间区间,那么可以声明 startend 属性

实例代码

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: 180,
      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);

Install

npm i @antv/calendar-heatmap

DownloadsWeekly Downloads

83

Version

1.1.2

License

MIT

Unpacked Size

1.22 MB

Total Files

24

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar