這篇要來記錄一下最近使用到 Chart.js 的一些過程以及除錯的方式，

這次因為老闆需要能夠時時觀看他的營收以及客戶的消費型態，員工的績效。 我們的資料科學家就找我一起幫他做資料視覺化的呈現。

在之前沒碰過相關圖表視覺化的情況下，第一個想到的套件就是這個 Chart.js 了。

首先因為是要附加在資料科學家的專案底下，

所以我選擇以 CDN 引用的方式創建一個單頁的 Vue 應用。

成品展示 ：

（讓使用者根據日期區間顯示他需要的資訊並且能夠依照個人習慣將圖表移動先後順序）

（目前資料為隨機生成）

螢幕錄製 2022-08-29 下午6.39.09-1.mov

第一步：

<div>
  <canvas id="myChart"></canvas>
</div>

<script>
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];
  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };

	const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

根據官方文件的教學只要在HTML的部分建立一個 canvas 標籤並給予 ID

接著在 JS 中新增資料以及設定最後創建 Chart 的實體就能在網頁上看到一個精美的圖表了。

第二步：

則是基於這個模式將它改寫成 Vue 的方式並且透過 Ajax 更新資料以及圖表。

在HTML的部分因為會有多張圖表，所以我將需要建立的圖表依序命名建立一個Array，

再利用 v-for 的方式渲染 canvas 的空間並且設定 ID 。