南投縣垃圾處理趨勢分析

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南投縣垃圾處理趨勢與人口分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1100px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 60vh;
            max-height: 600px;
        }
    </style>
</head>
<body class="bg-gray-50 text-slate-800">
    <div class="container mx-auto p-4 md:p-8">
        <main>
            <section class="card mb-12">
                <div class="text-center mb-6">
                    <h2 class="text-2xl font-bold text-[#3357FF]">南投縣廢棄物處理趨勢</h2>
                </div>
                <div class="chart-container">
                    <canvas id="wasteChart"></canvas>
                </div>
            </section>
        </main>
    </div>
    <script>
        const data = {
            years: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年", "2020年", "2021年", "2022年", "2023年", "2024年"],
            produced: [177020, 180366, 187909, 191953, 187571, 179696, 190689, 204624, 212589, 211857, 219960, 232680, 232507],
            recycled: [89493, 91229, 97212, 99240, 98531, 92576, 93431,...

CSS

body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1100px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 60vh;
            max-height: 600px;
        }body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1100px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 60vh;
            max-height: 600px;
        }body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1100px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .chart-container {
            position: relative;
            width: 100%;
            height: 60vh;
            max-height: 600px;
        }body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1100px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .chart-container {
            position: relative;
            width:...

JavaScript

const data = {
            years: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年", "2020年", "2021年", "2022年", "2023年", "2024年"],
            produced: [177020, 180366, 187909, 191953, 187571, 179696, 190689, 204624, 212589, 211857, 219960, 232680, 232507],
            recycled: [89493, 91229, 97212, 99240, 98531, 92576, 93431, 110438, 115847, 115393, 123330, 134784, 134549],
            incinerated: [87420, 89134, 90697, 91377, 74422, 72435, 68012, 53823, 63523, 43675, 51625, 52795, 74224]
        };

        const ctx = document.getElementById('wasteChart').getContext('2d');
        const wasteChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.years.map(label => {
                    if (label.length > 16) {
                        const words = label.split(' ');
                        const lines = [];
                        let currentLine = '';
                        words.forEach(word => {
                            if ((currentLine + ' ' + word).length > 16) {
                                lines.push(currentLine.trim());
                                currentLine = word;
                            } else {
                                currentLine += ' ' + word;
                            }
                        });
                        lines.push(currentLine.trim());
                        return lines;
                    }
                    return label;
                }),
                datasets: [
                    {
                        type: 'line',
                        label: '產生量 (公噸)',
                        data: data.produced,
                        borderColor: 'rgb(255, 87, 51)',
                        backgroundColor: 'rgba(255, 87, 51, 0.4)',
                        fill: true,
                        tension: 0.1,
                        yAxisID: 'y'
                    },
                    {
   ...