JavaScript教學 – 產生圖表

Share This Post

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

今天,我們會分享,如何透過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 線條寬度,就能畫出彩色的圖表:

結語

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

訂閱研究文章

Get updates and learn from the best

More To Explore

Commitizen

前言: 現今軟體功能複雜與龐大,在開發過程中,不管單人開發還是多人協作,對所編寫的代碼與代碼版本管控都是必須的

NFC x Mifare

實作紀錄 readMifare readNdef 知識補充 手機NFC隱含攻擊弱點 掌握原理避免無線盜刷 MI

Scroll to Top