記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

1.jchart.jsをダウンロードプロジェクトの_Layout.cshtmlの&lt;head&gt;内に下記のように記述---------------------------------------------------------------------------------------------------------------------&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;utf-8&quot; /&gt;&nbsp; &nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;&nbsp; &nbsp; &lt;title&gt;@ViewData[&quot;Title&quot;] - Kakei&lt;/title&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.css&quot; asp-append-version=&quot;true&quot; /&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;~/Kakei.styles.css&quot; asp-append-version=&quot;true&quot; /&gt;&nbsp; &nbsp;&nbsp;&lt;script src=&quot;<a data-fr-linked="true" href="https://cdn.jsdelivr.net/npm/chart.js" style="font-size: 14px;">https://cdn.jsdelivr.net/npm/chart.js&quot;&amp;gt</a>;&lt;/script&gt;&lt;/head&gt;--------------------------------------------------------------------------------------------------------------------------Controller側のコード// データベースからデータを取得&nbsp;var records = await _context.Payment.ToListAsync();var mylabel = recordsi.Select(r =&gt; r.PayCategory.CategoryName).ToArray();var mydata = &nbsp; records.Select(r =&gt;r..Amount) .ToArray();Jsonのオブジェクトを作成して、Viewに送る。&nbsp;var chartData = new&nbsp;{&nbsp; &nbsp; &nbsp;labels = mylabel,&nbsp; &nbsp; &nbsp;data = mydata &nbsp; &nbsp;&nbsp;&nbsp;};&nbsp;return View(chartData);----------------------------------------------------------------//labelに相当するデータにリレーションシップがあるデータベースの場合//Distinctしなければならないlabelであるから//データベースからName列をDistinctし、Amount列を取得する例：var xData = _context.Payment.Include(p =&gt; p.PayCategory)　//PayCategoryにstring Name列がある&nbsp; &nbsp; .GroupBy(x =&gt; x.PayCategory.CategoryName)&nbsp; &nbsp; .Select(g =&gt; new&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; labels = g.Key, // DistinctなName&nbsp; &nbsp; &nbsp; &nbsp; data = g.Sum(x =&gt; x.Amount)　　　 // Distinctされた部分のAmountの合計　&nbsp; &nbsp; })&nbsp; &nbsp; .ToList(); // ラベルとデータを分離var xlabels = xData.Select(x =&gt; x.labels).ToList();var xdata = xData.Select(x =&gt; x.data).ToList(); var chartData = new{&nbsp; &nbsp; labels = xlabels,&nbsp; &nbsp; data = xdata &nbsp; &nbsp; //mydata};//ViewBag.Labels = xlabels;//ViewBag.Data = xdata;　　　//左記2つのViewBagを使用してもチャートが作成できる。 // ビューにデータを渡すreturn View(chartData);--------------------------------------------------------------------------------------------------------------------------------------------Viewのコード&lt;div class=&quot;row&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;col-md-6&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;ド―ナツチャートで表示&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;width: 50%; margin: auto;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;canvas id=&quot;myPieChart&quot;&gt;&lt;/canvas&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;col-md-6&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;棒チャートで表示&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h4&gt;@ViewBag.TotalAmount&lt;/h4&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;width: 100%; margin: auto;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;canvas id=&quot;myBarChart&quot;&gt;&lt;/canvas&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;&lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; // サーバーから渡されたデータを取得&nbsp; &nbsp; &nbsp; &nbsp; const chartData = @Html.Raw(Json.Serialize(Model)) &nbsp; &nbsp; &nbsp; &nbsp; // Chart.jsで円グラフを描画&nbsp; &nbsp; &nbsp; &nbsp; const ctx = document.getElementById(&#39;myPieChart&#39;).getContext(&#39;2d&#39;);&nbsp; &nbsp; &nbsp; &nbsp; new Chart(ctx, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: &#39;doughnut&#39;, // 円グラフ&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: chartData.labels, // ラベル&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: chartData.data, // データ&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 99, 132, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(54, 162, 235, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 206, 86, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(75, 192, 192, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255,20,147,0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(0,255,255,0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &#39;rgba(189,183,107,0.2)&#39;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 99, 132, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(54, 162, 235, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 206, 86, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(75, 192, 192, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255,20,147,1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(0,255,255,1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &#39;rgba(189,183,107,0.1)&#39;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; responsive: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plugins: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: &#39;top&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // tooltip:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; callbacks:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; label: function(tooltipItem){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return tooltipItem.label + &#39;;&#39; + tooltipItem.row + &#39;%&#39;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; const ctx1 = document.getElementById(&#39;myBarChart&#39;).getContext(&#39;2d&#39;);&nbsp; &nbsp; &nbsp; &nbsp; new Chart(ctx1, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: &#39;bar&#39;, // 円グラフ&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: chartData.labels, // ラベル&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axis: &#39;y&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: &#39;家計簿&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: chartData.data, // データ&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 99, 132, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(54, 162, 235, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 206, 86, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(75, 192, 192, 0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255,20,147,0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(0,255,255,0.2)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &#39;rgba(189,183,107,0.2)&#39;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 99, 132, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(54, 162, 235, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255, 206, 86, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(75, 192, 192, 1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(255,20,147,1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#39;rgba(0,255,255,1)&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &#39;rgba(189,183,107,0.1)&#39;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; responsive: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plugins: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: &#39;top&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indexAxis: &#39;y&#39;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // tooltip:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; callbacks:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; label: function(tooltipItem){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return tooltipItem.label + &#39;;&#39; + tooltipItem.row + &#39;%&#39;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&lt;/script&gt;--------------------------------------------------------------------------------------------------------------------------------ViewBagをデータに利用する場合のscript&nbsp;// Chart.jsで円グラフを描画&nbsp;const ctx = document.getElementById(&#39;myPieChart&#39;).getContext(&#39;2d&#39;);&nbsp;new Chart(ctx, {&nbsp; &nbsp; &nbsp;type: &#39;doughnut&#39;, // 円グラフ&nbsp; &nbsp; &nbsp;data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;labels: @Html.Raw(Json.Serialize(ViewBag.Labels)), &nbsp; // ラベル&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: @Html.Raw(Json.Serialize(ViewBag.Data)), // データ&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;backgroundColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&#39;rgba(255, 99, 132, 0.2)&#39;, Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる