使用 wikift 系统的 wikift-contributio

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 页面)键入以下内容

<wikift-contribution [data]="data"></wikift-contribution>

• 填充需要的 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
        }
    ]
}

此时访问页面即可看到展示效果