之前留了一塊空位要給圖表，就是交給今天來把這塊空白填上。我們今天的進度就是要將支出和收入記錄視覺化，讓使用者更能分析自己的理財習慣。

實現圖表功能步驟

• 引入圖表庫:使用Chart.js繪製圖表
• 設定圓餅圖
• 更新圖表數據

更新HTML

HTML不用做很多修改，只要加上一標籤來引入圖表庫，以及元素繪製圖表即可。這樣就完成實現圖表功能步驟的第一步～
引入圖表庫的標籤：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

繪製圖表的元素：

<!-- 右側：圖表和淨收入 -->
<div class="right-section">
       <h3>淨收入：$<span id="net-amount">0</span></h3>
       <h2>圖表</h2>
       <canvas id="myChart"></canvas>
</div>

JavaScript設定圖表

JavaScript主要是要來處理圖表動態改變的部分，讓每一次更新都能讓圖表變更成最新的資料顯示，同時也不能忘記 data storage的部分也應該要更新。

let chart;

function initializeChart(){
    const ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx,{
        type: 'doughnut',
        data:{
            labels: ['支出','收入'],
            datasets: [{
                label:'收支情況',
                data:[totalAmount,totalIncome],
                backgroundColor:['#f94144','#43aa8b'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

//更新圖表
function updateChart(){
    chart.data.datasets[0].data = [totalAmount,totalIncome];
    chart.update();
}

window.onload = function() {
    loadData();
    initializeChart();
};

除了需要加上這一部分外，addExpense、addincome也要記得加上updateChart();，這樣才能成功呼叫並更新圖表。

CSS修改

我原本以為不需要修改CSS，因此最一開始並沒有動CSS任何一處，沒想到在首次測試功能的時候，那三個區塊都不斷往下變長，造成網頁很卡很當，且圖表顯示的位置很奇怪，後來發現是CSS的部分，應該要讓最右邊的區塊固定大小，而左區與中區則是改成自動控制長度。

.left-section {
    width: 30%;
    background-color: #eddbc7;
    color: #a88971;
    padding: 5px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: auto; 
}

.middle-section {
    width: 30%;
    background-color: #eddbc7;
    color: #a88971;
    padding: 5px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: auto; 
}

.right-section {
    width: 30%;
    background-color: #eddbc7;
    color: #a88971;
    padding: 5px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 600px; 
}

.right-section canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 400px; 
}

canvas 的部分是控制圖表的外觀，要解決我上述的無限拉長問題則是在right section加上height:600px 固定高度，left 和 middle 則是讓 height 為 auto。這樣就能順利解決無限拉長的問題。

測試功能

最後圖表順利顯示圖表，另外，項目增加，左中區塊也會正常拉長。若刪除項目或增加項目以及重新載入，圖表都能正常更新與保存。

參考資料

https://chatgpt.com/