JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <div class="wrap">
        <div class="container">
            <span>資料來源：政府資料開放平臺</span>
            <div class="chart-list">
                <div class="chart-item">
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart-item">

                    <canvas id="BarChart"></canvas>
                </div>
                <div class="chart-item">

                    <canvas id="PieChart"></canvas>
                </div>
            </div>
            
            
        </div>
    </div>

CSS

.container{
        width: 80%;
        margin: 60px auto;
    }
    span {    
        font-size: 14px;
        color: #999;
        text-align: right;
        margin-bottom: 20px;
    }
    .chart-item + .chart-item{
        margin-top: 80px;
    }

JavaScript

const lineChart = document.getElementById('lineChart');
        const lineLabels =  ['2023/5/1(一)', '2023/5/2(二)', '2023/5/3(三)', '2023/5/4(四)', '2023/5/5(五)', '2023/5/6(六)', '2023/5/7(日)'];
        const lineDatas = [72335, 84140, 84486, 85003, 90925, 78936, 68860];
        const lineTitle = '桃園捷運 112年5月運量';
        const lineChartData = new Chart(lineChart,{
            type: 'line',
            data: {
                labels: lineLabels,
                datasets: [{
                    label: lineTitle,
                    data: lineDatas,
                    borderColor: 'rgb(59 130 246)',
                    fill: true,
                    backgroundColor: 'rgb(59 130 246 / 20%)',
                    pointBackgroundColor: 'rgb(59 130 246)',
                    borderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 8,
                }]
            },
            options:{
                plugins:{
                    title: {
                        display: true,
                        text: lineTitle,
                        font: {
                            size: 24
                        }
                    },
                }
            }
        })

        const BarChart = document.getElementById('BarChart');
        const BarLabels = ["十八尖山", "青青草原", "城隍廟", "新竹漁港", "賞蟹步道", "青草湖", "十七公里自行車道", "新竹公園"];
        const BarDatas =[224536, 42854, 277326, 446103, 39134, 0, 27216, 54312];
        const BarTitle = '110年新竹市重要遊憩據點遊客人次統計';
        const BarChartData = new Chart(BarChart,{
            type: 'bar',
            data: {
                labels: BarLabels,
                datasets: [{
                    label: BarTitle,
                    data: BarDatas,
                    borderColor: 'rgb(244 63 94)',
                    fill: false,
                    backgroundColor: 'rgb(244 63 94 / 20%)',
                    borderWidth: 2,
                }]
            },
            options:{
               ...