ContriGraph
Read this in other languages: English.
ContriGraph 是一个用于在 Canvas 上渲染 GitHub 贡献图的类。
官网地址
安装 Install
使用 npm 安装:
npm install contrib-graph
使用 Use
import ContriGraph from 'contrib-graph';
// 创建一个 Canvas 元素
const canvas = document.getElementById('myCanvas');
// 或者
const svg = document.getElementById("mySvg")
// 创建 ContriGraph 实例 /canvas渲染
const contribGraph = new ContriGraph({
canvas: canvas,
size: 10,
gapSize: 5,
data: { /* 数据 */ },
year: 2022,
colorParse: /* 自定义颜色解析函数 */,
});
// 创建 ContriGraph 实例 /svg渲染
const contribGraph = new ContriGraph({
svg: svg,
size: 10,
gapSize: 5,
data: { /* 数据 */ },
year: 2022,
colorParse: /* 自定义颜色解析函数 */,
radius:2
});
// 渲染月份或整年的贡献图
contribGraph.render(1); // 渲染一月份
// 或
contribGraph.render(); // 渲染整年
Option.data 格式
{
"2023-01-05":1,
"2023-03-01":10,
}
构造函数 Constructor
new ContriGraph({
canvas?: HTMLCanvasElement, // Canvas 元素 优先canvas 否则为svg渲染需要传入svg元素
svg?:SVGSVGElement, //svg 元素
size?: number, // 方块大小,默认为 10
gapSize?: number, // 方块间隙大小,默认为 5
data?: Record<string, number>, // 贡献数据,默认为空对象
year?: number, // 年份,默认为当前年份
colorParse?: (value: number) => string, // 颜色解析函数,默认为内置的颜色解析函数
radius?:string //如果为svg模式 radius生效,canvas不生效 默认为 2
});
方法 Methods
// 渲染贡献图,可选择渲染指定月份(1 到 12)或整年。
render(month?: 1|2|3|4|5|6|7|8|9|10|11|12): void
属性 Attribute
width:number // 生成canvas的宽
height:number //生成canvas的高