G2Plot-Calendar

G2Plot-Calendar: plugin based on G2Plot v2. Live Demo, CodeSandbox.

Install

$ npm i --save g2plot-calendar

Usage

• render

import { P } from '@antv/g2plot';
import * as G2PlotCalendar from 'g2plot-calendar';

let plot;

fetch('https://gw.alipayobjects.com/os/antfincdn/nvYn7dOQB9/result.json')
  .then((data) => data.json())
  .then((data) => {
    // 第一次默认渲染
    plot = new P('container', {}, G2PlotCalendar.adaptor, {
      ...G2PlotCalendar.defaultOptions,
      width: 800,
      height: 100,
      data,
    });

    plot.render();
  });

• update

plot.update({
  data: [],
});

• browser

<script src="https://unpkg.com/@antv/g2plot@2"></script>
<script src="https://unpkg.com/g2plot-calendar@1"></script>
<script>
  fetch('https://gw.alipayobjects.com/os/antfincdn/nvYn7dOQB9/result.json')
    .then((data) => data.json())
    .then((data) => {
      // 第一次默认渲染
      var calendarPlot = new G2Plot.P('calendar-result', {}, G2PlotCalendar.adaptor, {
        ...G2PlotCalendar.defaultOptions,
        width: 800,
        height: 100,
        data,
      });

      calendarPlot.render();
    });
</script>

Configure

type Datum = {
  date: string;
  value: number | null;
};

export interface CalendarOptions {
  /** 数据 */
  readonly data: Datum[];
  /** 颜色, 默认: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39'] */
  readonly color: string[];
}

License

MIT@visiky.