在網頁中，經常會需要將數據做呈現，除了傳統的表格呈現方式以外，透過折線圖、直方圖、圓餅圖….等方式，將資料「視覺化」，是非常重要的環節。

今天，我們會分享，如何透過JavaScript，在你的網頁上呈現視覺化的圖表哦！

使用Chart.js

chart.js官網

安裝

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

首先，在 html 上新增一個 canvas，之後我們的圖表會畫在這個容器裡面。

<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,
  };
</script>

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

• labels 則是項目的標籤、資料則是以陣列形式放在 data.datasets.data 裡面。
• type代表產生的圖表類型，包含以下種類：
  
  在圖表加入顏色
  畫到這邊可能會覺得圖表有點單調，不過我們可以在參數裡面加上 backgroundColor 和 borderColor，甚至是 borderWidth 線條寬度，就能畫出彩色的圖表：
  

結語

到這邊就能畫出基本圖表了，在 官方網站的範例中 可以看到各種不同的圖表。如果找不到資料可以用的話，建議可以搭配 政府開放資料 來做練習