json-server 與 chart.js

發表於 | 更新於 | 分類於

前言

好一陣子沒有寫 Blog 了，原因也是因為初階的 Angular 學到一個段落了，團隊的 Leader 決定讓隊伍內的成員們以敏捷開發的方式跑看看一個 Side Project ，順便讓我學習如何與團隊合作一個專案。

而這篇文章主要是簡單記錄自己如何使用 json-server 快速 Mock 一個 API 讓自己串接，並且使用 chart.js 繪製出堆疊長條圖。

在專案中使用 json-server

來到 json-server 的 GitHub 查看如何使用。

下載 json-server

使用步驟如下：

  • 如果是新的專案而且沒有 package.json 檔
    • 輸入 npm init 建立 package.json 檔
  • 輸入 npm install -g json-server 安裝 json-server

建立 db.json

接著新增 db.json 檔，內容可先複製官網範例進行參考：

1
2
3
4
5
6
7
8
9
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

輸入 json-server db.json 運行 json-serve ，等候呼叫 API

db.json 檔就是當呼叫 API 時會傳回那些資料的檔案，舉例來說：

  • 預設狀態下，在網址列輸入 http://localhost:3000/posts
    • 會傳回 { "id": 1, "title": "json-server", "author": "typicode" }

這邊因為之後要使用 chart.js 進行圖表繪製，所以我另外有準備資料，因為跟工作有關就不貼上來了。

自訂路由

大多時候 json-server 的預設範例是滿足不了我們的。

舉例來說，我想要 Mock 的 API 路徑希望是：

1
/api/v1/issues/analysis?gid=:gid&sDate=:sDate&eDate=:eDate

這時候就需要自訂路由了！

新增 route.json 檔案

接著在裡面貼上官網的範例：

1
2
3
4
5
6
{
  "/api/*": "/$1",
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles\\?id=:id": "/posts/:id"
}

如上設定後，對應結果如下：

  • 輸入 /api/posts # → /posts
  • 輸入 /api/posts/1 # → /posts/1
  • 輸入 /posts/1/show # → /posts/1
  • 輸入 /posts/javascript # → /posts?category=javascript
  • 輸入 /articles?id=1 # → /posts/1

找出規則後，修改 route.json 變成我們要的結果。

1
2
3
4
{
  "/api/v1/issues/analysis\\?gid=:gid&sDate=:sDate&eDate=:eDate": "/api",
  "/api/v1/issues/analysis": "/api"
}

自訂配置

為了更方便使用，也可以自行配置 json-server 。

新增 json-server.json

並且在裡面輸入：

1
2
3
"port": 5000,              //自定 port
"watch": true,             //監聽改動
"routes": "route.json"     //路由配置路徑

因為只有使用到這些配置，更多配置請參考官方 GitHub 文件。

配置已經完成了，最後在 package.json 中加入以下指令：

1
2
3
"scripts": {
  "mock": "json-server --c json-server.json db.json"
},

之後只需要執行 npm run mock 指令即可運行以上這些配置囉！

參考文件

在專案中使用 chart.js

先到 chart.js 官方了解如何使用，發現有兩種使用方式：

為了方便，這裡我使用了 CDN 的方式使用 chart.js

參考官方建立一個範本

由於我想畫的是堆疊柱狀圖，但我們依然可先參考官方的起手範例，先行建構一個範本。

1
<canvas id="myChart"></canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',
    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    // Configuration options go here
    options: {}
});

官網文件寫得十分詳細，但因為是英文，所以需要花一點時間找相關的方法、屬性如何使用。

最後參考了這篇文章得知如何把柱狀圖堆疊起來，修改程式碼後順利完成本次目標～

因為資料涉及公司，所以就不放上程式碼以及相關圖片了。

0%