使用|使用 wikift 系统的 wikift-contribution-charts 使用wikift系统的wikift-contribut

wikift-contribution-charts 是一套angular2开发的用于显示用户分享的图表, 先看一下效果:

文章图片
image.png 是不是有些类似于 GitHub 的 commit 记录呢? wikift-contribution-charts 使用方式很简单, 数据结构也不是很繁琐, 纳闷我们先看一下如何使用该组件?

在 angular2 项目的 package.json 文件中加入以下代码:

"wikift-contribution-charts": "^1.0.0"

停止当前项目, 使用以下命令安装需要依赖

npm install

在需要使用该组件的 module 组件中加入以下内容

import { WikiftContributionModule } from 'wikift-contribution'; @NgModule({ imports: [ ..., WikiftContributionModule, ... ], exports: [], declarations: [ ], providers: [ ], })

在对应 module 的组件的展示层(html 页面)键入以下内容

填充需要的 data 数据结构(在组件的 compment 文件里面添加)

{ "data": [ { "date": 1514736000000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1514822400000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1514908800000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1514995200000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515081600000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515168000000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515254400000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515340800000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515427200000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 }, { "date": 1515513600000, "details": [ { "name": null, "date": 1546185600000, "value": 0 } ], "total": 0 } ] }

【使用|使用 wikift 系统的 wikift-contribution-charts】此时访问页面即可看到展示效果