@antv/calendar-heatmap
The Calendar heatmap implemented by G2.
Last updated 6 months ago by simaq .
MIT · Original npm · Tarball · package.json
$ cnpm install @antv/calendar-heatmap 
SYNC missed versions from official npm registry.

Calendar heatmap

@antv/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);

Current Tags

  • 1.1.2                                ...           latest (6 months ago)

6 Versions

  • 1.1.2                                ...           6 months ago
  • 1.1.1                                ...           6 months ago
  • 1.1.0                                ...           6 months ago
  • 1.0.2                                ...           6 months ago
  • 1.0.1                                ...           6 months ago
  • 1.0.0                                ...           6 months ago

Copyright 2014 - 2017 © taobao.org |