家計簿アプリを作る #38：カテゴリ別予算の消化状況をグラフで見る

プログラミング

家計簿アプリ作成シリーズの第38回です。前回テキストで表示していたカテゴリ別の予算オーバーを、棒グラフでも可視化してみます。

実装方針

既存の data.categoryBudgets({ name, budget, expense }[])をそのまま使い、カテゴリ名を横軸にした棒グラフを追加します。データセットを「予算」と「支出」の2本に分け、支出側は予算オーバーかどうかで棒の色を切り替えます。

データセットの色を要素ごとに変える

Chart.jsは backgroundColor に配列を渡すことで、棒グラフの1本1本に個別の色を指定できます。

const budgetChartData = $derived({
  labels: data.categoryBudgets.map((c) => c.name),
  datasets: [
    {
      label: "予算",
      data: data.categoryBudgets.map((c) => c.budget),
      backgroundColor: "rgba(59, 130, 246, 0.5)",
    },
    {
      label: "支出",
      data: data.categoryBudgets.map((c) => c.expense),
      backgroundColor: data.categoryBudgets.map((c) =>
        c.expense > c.budget
          ? "rgba(239, 68, 68, 0.7)"
          : "rgba(34, 197, 94, 0.7)",
      ),
    },
  ],
});

「予算」データセットは単一の色文字列のまま(全て同じ青系)、「支出」データセットだけ配列にして棒ごとに色を計算しています。同じデータセット内でも、色を配列にするかしないかを混在させられるのは地味に便利でした。

カテゴリが0件でも崩れない

支出カテゴリを1件も登録していない状態だと data.categoryBudgets は空配列になりますが、Bar コンポーネントはラベルもデータも無いグラフを描画するだけでエラーにはならず、特別な分岐は不要でした。

まとめ

ポイント 内容
既存データの再利用 前回作った categoryBudgets をそのままグラフ用データに変換
棒ごとの色分け backgroundColor に配列を渡して要素ごとに色を指定する
空データ対応 空配列でもChart.js側で自然に処理されるため特別な考慮は不要
← トップページに戻る