JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="width: 400px;">
  <h2>台灣出生人口數</h2>
  <canvas id="myChart1" width="120" height="100"></canvas>
</div>

<div style="width: 400px;">
  <h2>2014年各國平均降雨量(mm/年)</h2>
  <canvas id="myChart2" width="120" height="100"></canvas>
</div>

<div style="width: 400px;">
  <h2>臺北市112年1月役男徵兵檢查BMI值統計</h2>
  <canvas id="myChart3" width="120" height="100"></canvas>
</div>

CSS

h2{
   text-align: center;
   font-size: 23px;
}
div{
   border: 1px solid silver;
   margin-bottom: 1.5rem;
   padding: 1.5rem;
}

JavaScript

const ctx1 = document.getElementById('myChart1');

  new Chart(ctx1, {
    type: 'line',
    data: {
      labels: ['100年', '101年', '102年', '103年', '104年', '105年', '106年', '107年', '108年', '109年', '110年'],
      datasets: [{
        label: '人數(萬)',
        data: [      19.6627,   22.9481,    19.9113,    21.0383,    21.3598,    20.8440,   19.3844,   18.1601,   17.7767,   16.5249,   15.3820 ],
        borderColor: 'rgb(255, 192, 192)',
        backgroundColor:'rgb(255, 192, 192)',
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  Chart.defaults.font.size = 14;



  const ctx2 = document.getElementById('myChart2');

  new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['台灣', '菲律賓', '日本', '英國', '印度','法國','美國','中國','加拿大','俄羅斯'],
      datasets: [{
        label: '雨量',
        data: [2429, 2348, 1668, 1220, 1083, 867, 715, 645, 537, 406 ],
        borderColor: 'rgb(175, 192, 192)',
        backgroundColor:'rgb(135, 202, 202)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  Chart.defaults.font.size = 14;



  const ctx3 = document.getElementById('myChart3');

  new Chart(ctx3, {
    type: 'pie',
    data: {
      labels: ['小於15', '大於等於15小於20', '大於等於20小於25', '大於等於25小於30', '大於30'],
      datasets: [{
        label: '人數',
        data: [34, 538, 836, 284, 211],
        backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 205, 86)',
      'rgb(55, 205, 86)',
      'rgb(54, 162, 235)',
      
      'rgb(155, 105, 186)'
    ],
        borderWidth: 1
      }]
    },
  });
  Chart.defaults.font.size = 14;