記事詳細

投稿日

2025年11月19日23時52分

タイトル

javascriptでチャート作成

内容

手順：ASP.NET MVC × JavaScript で支払い割合チャートを作る

1. コントローラーでデータを用意

支払いデータをカテゴリごとに集計し、JSON 形式で返すアクションを作ります。

public class ExpenseController : Controller
{
    public ActionResult GetExpenseRatio()
    {
        var data = new[]
        {
            new { Category = "食費", Amount = 35000 },
            new { Category = "家賃", Amount = 60000 },
            new { Category = "光熱費", Amount = 12000 },
            new { Category = "娯楽", Amount = 8000 }
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

2. ビューに Chart.js を読み込む

CDN を使うと簡単です。

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

3. JavaScript でデータ取得＆描画

ビュー（例: Index.cshtml）で Ajax を使ってデータを取得し、円グラフにします。

<canvas id="expenseChart" width="400" height="400"></canvas>

<script>
fetch('@Url.Action("GetExpenseRatio", "Expense")')
    .then(response => response.json())
    .then(data => {
        const labels = data.map(d => d.Category);
        const amounts = data.map(d => d.Amount);

        new Chart(document.getElementById('expenseChart'), {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: amounts,
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom' },
                    title: { display: true, text: '支払い割合' }
                }
            }
        });
    });
</script>

4. ポイント

集計はサーバー側で行う（JavaScript 側は描画に専念）
JSON 形式で返すと JavaScript で扱いやすい
色やラベルは配列で指定して見やすくする
円グラフ（pie）やドーナツグラフ（doughnut）が割合表示に向いている

💡 この方法なら、家計簿データが更新されても Ajax で最新の割合を即時反映できます。

添付画像

画像はありません

Genreのカテゴリ-名

Controllers

編集 | 記事一覧