JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
    <div class="container">
      <canvas id="myChart1"></canvas>
      <a
        href="https://data.taipei/dataset/detail?id=86d005f3-becd-4cfb-8bb8-4fb0af2f4fbe"
      >
        資料來源</a>
    </div>
    <div class="container">
      <canvas id="myChart2"></canvas>
      <a href="https://data.gov.tw/dataset/121138">資料來源</a>
    </div>

    <div class="container">
      <canvas id="myChart3"></canvas>
      <a href="https://data.gov.tw/dataset/155735">資料來源</a>
    </div>

    <script></script>
  </body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
  width: 100svw;
  /* display: flex;
  justify-content: space-evenly;
  align-items: center; */
}

.container {
  width: 90vw;
  height: 350px;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 20px auto;
  overflow: auto;
  resize: both;
}

JavaScript

(async function () {
  const originalData = [
    {
      項目: "雲梯消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 17,
      堪用且已達年限數量: 19,
      總數: 36,
    },
    {
      項目: "化學消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 5,
      堪用且已達年限數量: 7,
      總數: 12,
    },
    {
      項目: "水箱消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 133,
      堪用且已達年限數量: 29,
      總數: 162,
    },
    {
      項目: "水庫消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 9,
      堪用且已達年限數量: 8,
      總數: 17,
    },
    {
      項目: "泡沫消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 0,
      堪用且已達年限數量: 0,
      總數: 0,
    },
    {
      項目: "幫浦消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 10,
      堪用且已達年限數量: 3,
      總數: 13,
    },
    {
      項目: "超高壓消防車",
      參考使用年限: 15,
      堪用且未達年限數量: 0,
      堪用且已達年限數量: 0,
      總數: 0,
    },
    {
      項目: "消防車合計",
      參考使用年限: "無",
      堪用且未達年限數量: 174,
      堪用且已達年限數量: 66,
      總數: 240,
    },
    {
      項目: "救助器材車",
      參考使用年限: 15,
      堪用且未達年限數量: 12,
      堪用且已達年限數量: 1,
      總數: 13,
    },
    {
      項目: "排煙車",
      參考使用年限: 15,
      堪用且未達年限數量: 1,
      堪用且已達年限數量: 3,
      總數: 4,
    },
    {
      項目: "照明車",
      參考使用年限: 15,
      堪用且未達年限數量: 2,
      堪用且已達年限數量: 3,
      總數: 5,
    },
    {
      項目: "空氣壓縮車",
      參考使用年限: 15,
      堪用且未達年限數量: 5,
      堪用且已達年限數量: 3,
      總數: 8,
    },
    {
      項目: "救災指揮車",
      參考使用年限: 15,
      堪用且未達年限數量: 28,
      堪用且已達年限數量: 0,
      總數: 28,
    },
    {
      項目: "水陸兩用車",
      參考使用年限: 15,
      堪用且未達年限數量: 0,
      堪用且已達年限數量: 0,
      總數: 0,
    },
    {
      項目: "災情勘查車",
      參考使用年限: 15,
      堪用且未達年限數量: 6,
      堪用且已達年限數量: 9,
      總數: 15,
    },
    {
      項目: "化學災害處理車",
      參考使用年限: 15,
      堪用且未達年限數量: 1,
      堪用且已達年限數量: 3,
      總數: 4,
    },
    {
      項目: "火災現場勘驗車",
      參考使用年限: 15,
      堪用且未達年限數量: 3,
      堪用且已達年限數量: 1,
      總數: 4,
    },
    {
      項目: "消防警備車",
      參考使用年限: 15,
      堪用且未達年限數量: 57,
      堪用且已達年限數量: 0,
      總數: 57,
    },
    {
      項目: "消防救災越野車",
      參考使用年限: 6,
      堪用且未達年限數量: 0,
     ...