記事詳細

投稿日

2025年10月25日20時20分

タイトル

MVCでチャートを作成する手順

内容

プロジェクトにChart.jsを追加します。

ページに影響のある<header>に相当する部分にchart.jsを追加します。

例：プロジェクトの_Layout.chtmlのヘッダー部

<!DOCTYPE html>

<head>

<title>@ViewData["Title"] - Kakei</title>

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

</head>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

または、ページ内に追加。

または、フロントエンドビルドシステムを使用している場合は、npmまたはパッケージマネージャーを介してインストールします。

コントローラーを作成する

データ取得を処理するコントローラーを作成し、それをビューに渡します。

public class ChartController : Controller

{

public IActionResult Index()

{

// Example data

var chartData = new

{

Labels = new[] { "January", "February", "March", "April" },

Data = new[] { 10, 20, 30, 40 }

};

return View(chartData);

}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ビューを作成する

グラフの Razor ビュー () を作成します。Index.cshtml
グラフをレンダリングするための要素を追加します。<canvas>

JavaScript を使用して、Chart.js チャートを初期化します。

Html
@model dynamic

<div>
    <canvas id="myChart"></canvas>
</div>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar', // Chart type (e.g., bar, line, pie)
        data: {
            labels: @Html.Raw(Json.Serialize(Model.Labels)), // X-axis labels
            datasets: [{
                label: 'Sample Data',
                data: @Html.Raw(Json.Serialize(Model.Data)), // Y-axis data
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

5. スタイルとカスタマイズ

Chart.jsオプション (色、ツールチップ、アニメーションなど) を変更してグラフをカスタマイズします。
必要に応じて、レイアウトと応答性のために CSS を追加します。

6. テストとデバッグ

アプリケーションを実行し、コントローラのアクション(例: )に移動します。/Chart/Index
グラフが正しくレンダリングされ、データが表示されることを確認します。

7. オプションの機能強化

動的データ: データベースまたは API からデータをフェッチし、ビューに渡します。
AJAX 統合: AJAX を使用して、ページを更新せずにグラフを動的に更新します。
複数のチャート: 複数の要素を追加し、複数のChart.jsインスタンスを初期化します。<canvas>

この概要は、Chart.jsを使用して ASP.NET Core MVC でグラフを作成するための基礎を提供します。アプリケーションの要件に基づいてさらに拡張できます。

添付画像

画像はありません

Genreのカテゴリ-名

Controllers

編集 | 記事一覧