クオンツの配当投資の日記

どっかの会社員がお金について書く日記。金融、データ分析、就活に関して書こうと思います。

MENU

【Asp.net Core mvc】ModelをBindしてChartJsでグラフを書く方法!

ASP.NET CoreでWebサイト作っています。

f:id:keio_ob:20190429214332p:plain

 

 

 

どうも、Asp.net Core mvc(c#)でwebサイトを作成しているものです。

日本語のサイトだとなかなか情報がないので、書き留めておきます。

Chartjsでグラフの描画

chartjsでグラフを描画する方法について書かれている記事は結構あるんですが、動的なデータに対応する方法はなかなか見つからなかったので書いておきます。

特にASP.net core c#でViewに関連付けたモデルに対して、グラフを描画する方法です。

コードは下の通りです。例として円グラフを描画するコードです。

<canvas id="myPieChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>
<script>
var ctx = document.getElementById("myPieChart");
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: @Html.Raw(Json.Serialize(Model.LabeList)),
datasets: [{

data: @Html.Raw(Json.Serialize(Model.DataList)),
}]
},
options: {

plugins: { colorschemes: { scheme: 'brewer.Paired12' } }
}
});
</script>

 一番、大切なのは赤字の部分。LabelListはIEnumerable<string>、DataListはIEnumerable<int>です。

こうすることでグラフの入力データをModelから定義することができます。

 

青字の部分はプラグインで、データの数に応じて配色を決めてくれるやつです。

一言

こんな感じでいろいろ挙げていきます。要望あったら教えてください。反映させます。