JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

<span>資料來源：政府資料開放平臺</span>
<canvas id="line-chart" width="400" height="400"></canvas>
<canvas id="bar-chart" width="400" height="400"></canvas>
<canvas id="pie-chart" width="400" height="400"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

CSS

span {
    font-weight: 600;
    font-size: 12px;
    color: #909090;
    text-align: right;
    display: block;
    margin-bottom: 20px;
}

JavaScript

// line chart
var lineChart = document.querySelector("#line-chart");
var numberLine = ['51.11','54.5','58.72','62.3','66.63','71.16','75.72','81.4','88.03','94.79'];
var yearLine = ['101年','102年','103年','104年','105年','106年','107年','108年','109年','110年' ];
var colorLine = 'rgba(100, 25, 255, 0.2)';
var LineChartData = new Chart(lineChart, {
    type: 'line',
    data: {
        labels: yearLine,
        datasets: [{
            label: '老化指數',
            data: numberLine,
            borderColor: 'rgba(255, 93, 93, 0.7)',
            fill: false,
            pointBackgroundColor: 'rgba(255, 93, 93, 1)',
            pointRadius: 4,
            pointHoverRadius: 8,
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                gridLines: {
                    display: false,
                }
            }],
        },
        layout: {
            padding: {
                left: 50,
                right: 50,
                top: 0,
                bottom: 50,
            }
        },
        title: {
            display: true,
            text: '桃園市老化指數',
            fontSize: 25,
        },
        tooltips: {
            titleFontSize: 17,
            bodyFontSize: 15,
            xAlign: 'center',
            yAlign: 'top',
        },
    },
});

// bar chart
var barChart = document.querySelector("#bar-chart");
var numberBar = ['69','137','68','27','16','14','13','21','31','37','27','38'];
var monthBar = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var colorBar = 'rgba(100, 25, 255, 0.2)';
var barChartData = new Chart(barChart, {
    type: 'bar',
    data: {
        labels: monthBar,
        datasets: [{
            label: '件數',
            data: numberBar,
            backgroundColor: colorBar,
            hoverBackgroundColor: 'rgba(100, 25, 255, 0.6)',
        }],
    },
    options: {
        scales: {
            yAxes:...