Update 社福支出.html

社福支出.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高齡化下的財政挑戰：高雄市老人社會福利支出變化報告</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
             --c-primary: #2c5aa0;
@@ -385,6 +386,12 @@
             text-align: center;
         }
 
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+
         .chart-placeholder {
             background: var(--c-secondary);
             padding: 60px 40px;
@@ -714,37 +721,22 @@
             </div>
 
             <figure>
-                <div class="chart-placeholder">
-                    <strong>圖表佔位符：高雄市總人口與扶老比趨勢圖</strong><br>
-                    類型：長條折線複合圖<br>
-                    X軸：年度（109年至123年）<br>
-                    Y軸（左）：人口數（萬人），以長條圖呈現<br>
-                    Y軸（右）：扶老比，以折線圖呈現<br>
-                    重點：清楚顯示總人口下降與扶老比急速上升的反向趨勢。
+                <div class="chart-container">
+                    <canvas id="populationChart"></canvas>
                 </div>
                 <figcaption>資料來源：高雄市政府主計處，依人口CCR法推估。</figcaption>
             </figure>
 
             <figure>
-                <div class="chart-placeholder">
-                    <strong>圖表佔位符：各年齡層人口變化趨勢</strong><br>
-                    類型：折線圖<br>
-                    X軸：年度（109年至123年）<br>
-                    Y軸：人口數（萬人）<br>
-                    線條：三條線分別代表 0-14歲、15-64歲、65歲以上人口<br>
-                    重點：呈現勞動人口(15-64歲)下降，而高齡人口(65歲以上)穩定上升的交叉趨勢。
+                <div class="chart-container">
+                    <canvas id="ageStructureChart"></canvas>
                 </div>
                 <figcaption>資料來源：高雄市政府主計處，依人口CCR法推估。</figcaption>
             </figure>
             
             <figure>
-                <div class="chart-placeholder">
-                    <strong>圖表佔位符：三大老人社福支出預估</strong><br>
-                    類型：堆疊區域圖或分組長條圖<br>
-                    X軸：年度（113年至123年）<br>
-                    Y軸：支出金額（億元）<br>
-                    分類：中低收入老人生活津貼、65歲以上老人健保費補助、重陽節敬老禮金<br>
-                    重點：視覺化呈現三項主要支出的成長趨勢及總額的快速膨脹。
+                <div class="chart-container">
+                    <canvas id="welfareSpendingChart"></canvas>
                 </div>
                 <figcaption>資料來源：高雄市政府主計處，依人口推估及物價指數模型計算。</figcaption>
             </figure>
@@ -851,7 +843,7 @@
             });
 
             // Scroll-triggered animations
-            const fadeElements = document.querySelectorAll('.overview-item, .kpi-card, .pullquote, .timeline-item, figure, .source-list li');
+            const fadeElements = document.querySelectorAll('.overview-item, .kpi-card, .pullquote, .timeline-item, .source-list li');
             
             const observerOptions = {
                 root: null,
@@ -873,6 +865,219 @@
                 animationObserver.observe(el);
             });
             
+            // --- Chart.js Initialization ---
+            const ctx = document.getElementById('populationChart').getContext('2d');
+            const chartLabels = ['109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123'];
+            const populationData = [276.6, 274.5, 272.8, 273.8, 273.1, 272.1, 270.9, 269.7, 268.3, 266.9, 265.3, 263.6, 261.8, 259.8, 257.8];
+            const dependencyRatioData = [23.3, 24.7, 26.1, 27.4, 28.8, 30.4, 31.8, 33.2, 34.7, 36.1, 37.4, 38.7, 39.9, 41.2, 42.5];
+
+            const populationChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: chartLabels,
+                    datasets: [{
+                        label: '總人口數 (萬人)',
+                        data: populationData,
+                        backgroundColor: 'rgba(44, 90, 160, 0.6)',
+                        borderColor: 'rgba(44, 90, 160, 1)',
+                        borderWidth: 1,
+                        yAxisID: 'y',
+                        order: 2
+                    }, {
+                        label: '扶老比 (%)',
+                        data: dependencyRatioData,
+                        type: 'line',
+                        borderColor: '#e74c3c',
+                        backgroundColor: '#e74c3c',
+                        tension: 0.3,
+                        yAxisID: 'y1',
+                        order: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '高雄市總人口與扶老比趨勢圖 (民國109-123年)',
+                            font: { size: 18, family: "'Microsoft JhengHei', sans-serif" },
+                            padding: { top: 10, bottom: 20 }
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false,
+                        },
+                    },
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: '年度'
+                            }
+                        },
+                        y: {
+                            type: 'linear',
+                            display: true,
+                            position: 'left',
+                            title: {
+                                display: true,
+                                text: '總人口數 (萬人)'
+                            },
+                            min: 250
+                        },
+                        y1: {
+                            type: 'linear',
+                            display: true,
+                            position: 'right',
+                            title: {
+                                display: true,
+                                text: '扶老比 (%)'
+                            },
+                            grid: {
+                                drawOnChartArea: false, // only want the grid lines for one axis to show up
+                            },
+                            min: 20
+                        }
+                    }
+                }
+            });
+
+            // --- Chart.js Age Structure Chart ---
+            const ageCtx = document.getElementById('ageStructureChart').getContext('2d');
+            const ageLabels = ['109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123'];
+            const ageData0to14 = [32.3, 31.6, 30.9, 30.6, 30.0, 29.9, 29.3, 28.3, 27.6, 26.8, 25.9, 25.1, 24.3, 23.6, 23.0];
+            const ageData15to64 = [198.1, 194.7, 191.9, 190.9, 188.7, 185.8, 183.3, 181.2, 178.7, 176.4, 174.3, 171.9, 169.8, 167.3, 164.7];
+            const ageData65plus = [46.1, 48.1, 50.0, 52.3, 54.4, 56.4, 58.4, 60.2, 62.0, 63.6, 65.1, 66.6, 67.7, 68.9, 70.0];
+
+            const ageStructureChart = new Chart(ageCtx, {
+                type: 'line',
+                data: {
+                    labels: ageLabels,
+                    datasets: [
+                        {
+                            label: '15-64歲 (萬人)',
+                            data: ageData15to64,
+                            borderColor: '#2c5aa0',
+                            backgroundColor: 'rgba(44, 90, 160, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        },
+                        {
+                            label: '65歲以上 (萬人)',
+                            data: ageData65plus,
+                            borderColor: '#e74c3c',
+                            backgroundColor: 'rgba(231, 76, 60, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        },
+                        {
+                            label: '0-14歲 (萬人)',
+                            data: ageData0to14,
+                            borderColor: '#f39c12',
+                            backgroundColor: 'rgba(243, 156, 18, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '高雄市各年齡層人口變化趨勢 (民國109-123年)',
+                            font: { size: 18, family: "'Microsoft JhengHei', sans-serif" },
+                            padding: { top: 10, bottom: 20 }
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        }
+                    },
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: '年度'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: '人口數 (萬人)'
+                            }
+                        }
+                    }
+                }
+            });
+
+
+            // --- Chart.js Welfare Spending Chart ---
+            const welfareCtx = document.getElementById('welfareSpendingChart').getContext('2d');
+            const welfareLabels = ['113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123'];
+            const welfareData1 = [38, 40, 43, 45, 48, 50, 53, 55, 58, 60, 63]; // 中低收
+            const welfareData2 = [28, 29, 31, 33, 35, 37, 38, 40, 42, 44, 45]; // 健保
+            const welfareData3 = [9, 9, 9, 10, 10, 10, 11, 11, 11, 11, 11]; // 敬老
+
+            const welfareSpendingChart = new Chart(welfareCtx, {
+                type: 'bar',
+                data: {
+                    labels: welfareLabels,
+                    datasets: [
+                        {
+                            label: '中低收入老人生活津貼',
+                            data: welfareData1,
+                            backgroundColor: 'rgba(44, 90, 160, 0.7)',
+                        },
+                        {
+                            label: '65歲以上老人健保費補助',
+                            data: welfareData2,
+                            backgroundColor: 'rgba(231, 76, 60, 0.7)',
+                        },
+                        {
+                            label: '重陽節敬老禮金',
+                            data: welfareData3,
+                            backgroundColor: 'rgba(243, 156, 18, 0.7)',
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '三大老人社福支出預估 (民國113-123年)',
+                            font: { size: 18, family: "'Microsoft JhengHei', sans-serif" },
+                            padding: { top: 10, bottom: 20 }
+                        },
+                         tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        }
+                    },
+                    scales: {
+                        x: {
+                            stacked: true,
+                            title: {
+                                display: true,
+                                text: '年度'
+                            }
+                        },
+                        y: {
+                            stacked: true,
+                            title: {
+                                display: true,
+                                text: '支出金額 (億元)'
+                            }
+                        }
+                    }
+                }
+            });
+
+
             // Event listeners
             window.addEventListener('scroll', () => {
                 updateActiveNav();
@@ -886,3 +1091,6 @@
     </script>
 </body>
 </html>
+
+
+