ASP.NET MVCプロジェクトにおいて、バックエンドのデータをフロントエンドのJavaScriptグラフライブラリ（ApexChartsなど）と連携させる必要がある場合、一般的にはMVCコントローラーからAjaxリクエストを通じてデータを取得し、フロントエンドのJavaScriptでそのデータを使用してグラフを描画します。
以下に、ASP.NET MVCでコントローラーを設定してデータを返し、ビューでJavaScript（おそらくjQueryを介して）とApexChartsを使用してこれらのデータを折れ線グラフとして表示する基本的な例を示します。
ステップ 1: MVCコントローラーの設定
まず、ASP.NET MVCプロジェクトでJSONオブジェクトを含むデータを返すコントローラーを作成します。
using System.Web.Mvc;
using System.Web.Script.Serialization; // System.Web.Extensionsへの参照が必要です
public class DataVisualizationController : Controller
{
public ActionResult FetchGraphData()
{
// これがデータソースであると仮定します。実際にはデータベースクエリの結果かもしれません
var graphData = new
{
Months = new[] { "1月", "2月", "3月", "4月", "5月" },
Datasets = new[]
{
new { Label = "売上", Values = new[] { 30, 40, 35, 50, 49 } }
}
};
// JavaScriptSerializerを使用してオブジェクトをJSON文字列にシリアライズします（またはJsonResultを使用）
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonData = serializer.Serialize(graphData);
// JSON結果を返します
return Content(jsonData, "application/json");
// より簡潔にJsonResultを使用する方法（推奨）
// return Json(graphData, JsonRequestBehavior.AllowGet);
}
}
ステップ 2: ビューの設定
ビューでは、BootstrapとApexChartsのCSSおよびJavaScriptファイルを導入し、グラフを表示するためのコンテナを追加する必要があります。その後、jQueryの$.ajaxメソッドを使用してコントローラーからデータを取得し、そのデータを使用してApexChartsグラフを初期化できます。
<!DOCTYPE html>
<html>
<head>
<title>ApexCharts デモ</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="graphContainer" style="width: 800px;height:450px;margin:0 auto;"></div>
<script>
$(document).ready(function () {
$.ajax({
url: '/DataVisualization/FetchGraphData', // URLがコントローラーとメソッドに一致していることを確認してください
type: 'GET',
dataType: 'json',
success: function (response) {
var chartConfig = {
series: [{
name: response.Datasets[0].Label,
data: response.Datasets[0].Values
}],
chart: {
height: 400,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
title: {
text: '月次売上データ',
align: 'center'
},
xaxis: {
categories: response.Months
},
yaxis: {
title: {
text: '売上高'
}
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
tooltip: {
followCursor: true
}
};
var salesChart = new ApexCharts(document.querySelector("#graphContainer"), chartConfig);
salesChart.render();
},
error: function (xhr, status, error) {
console.error('データの読み込みに失敗しました:', error);
$('#graphContainer').html('<div class="alert alert-danger">データの読み込みに失敗しました。しばらくしてから再試行してください。</div>');
}
});
});
</script>
</body>
</html>
この実装により、ASP.NET MVCアプリケーションで動的なデータをApexChartsを使用して視覚化できます。コントローラーはデータをJSON形式で提供し、フロントエンドのJavaScriptはそのデータを使用してインタラクティブなグラフを生成します。