JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<! -- https://data.gov.tw/dataset/124695-->
<canvas id="myLineChart" width="400" height="400"></canvas>
<! -- https://data.gov.tw/dataset/124442-->
<canvas id="myBarChart" width="400" height="400"></canvas>
<! -- https://data.gov.tw/dataset/123298-->
<canvas id="myPieChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

JavaScript

var ctx = document.getElementById('myLineChart');
var myChart = new Chart(ctx, {
  type: 'line', //圖表類型
  data: {
    //標題
    labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
    datasets: [{
      label: '新北市刑事案件犯罪人口率(男性)', //標籤
      data: [1235.4760867023, 1827.5019069493, 2151.4345520074, 2239.2256597077, 2219.1723945847, 2179.1701328754 , 2149.3130879561, 1677.8441678491,1396.0739648557, 1398.838972364], //資料
      //圖表背景色
      borderColor: 'green',
     pointBackgroundColor: 'white'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          responsive: true //符合響應式
        }
      }]
    }
  }
});


var myBarChart = document.querySelector("#myBarChart");
var barChartData = new Chart(myBarChart, {
    type: 'bar',
    data: {
        labels: ['未滿15歲', '15~19歲', '20~24歲', '25~29歲', '30~34歲', '35~39歲', '40~44歲', '45~49歲', '50~54歲'],
        datasets: [{
            label: '件數',
            data: ['755777', '316863', '335945', '292197', '311059', '333132', '318745', '282496', '176831'],
              backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)'
      ]
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        layout: {
            padding: {
                left: 50,
                right: 50,
                top: 0,
                bottom: 50,
            }
        },
        title: {
            display: true,
            text: '現住人口之婚姻狀況(2000年)',
            fontSize: 25,
        },
        tooltips: {
            titleFontSize: 17,
            bodyFontSize: 15,
        },
    },
});
var myPieChart =...