記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<span style="color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;" data-pasted="true">プロジェクトにChart.jsを追加します。<span style="color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">ページに影響のある&lt;header&gt;に相当する部分にchart.jsを追加します。<span style="color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">例：プロジェクトの_Layout.chtmlのヘッダー部&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: 18px;">https://cdn.jsdelivr.net/npm/chart.js&quot;&amp;gt</a>;&lt;/script&gt;&lt;/head&gt;<span style="color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;" data-pasted="true">ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<span style="color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">または、ページ内に追加。<ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">または、フロントエンドビルドシステムを使用している場合は、npmまたはパッケージマネージャーを介してインストールします。</li></ul><h3 data-bm="59" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">コントローラーを作成する</h3><ul data-bm="60" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">データ取得を処理するコントローラーを作成し、それをビューに渡します。</li></ul>public class ChartController : Controller{&nbsp; &nbsp; public IActionResult Index()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; // Example data&nbsp; &nbsp; &nbsp; &nbsp; var chartData = new&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Labels = new[] { &quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Data = new[] { 10, 20, 30, 40 }&nbsp; &nbsp; &nbsp; &nbsp; }; &nbsp; &nbsp; &nbsp; &nbsp; return View(chartData);&nbsp; &nbsp; }}ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<div tabindex="0" style="color: rgba(0, 0, 0, 0.8); padding: 20px; flex: 1 1 0%; font-size: 16px; line-height: 26px; font-weight: 400; overflow: auto; max-height: 420px; font-family: Roboto, Helvetica, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true"><h3 data-bm="61" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 20px / 22px Roboto, sans-serif;">ビューを作成する</h3><ul data-bm="62" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">グラフの Razor ビュー () を作成します。<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Index.cshtml</code></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">グラフをレンダリングするための要素を追加します。<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;canvas&gt;</code></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">JavaScript を使用して、Chart.js チャートを初期化します。<pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div data-bm="72" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 240, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; display: inline-block; color: rgb(83, 41, 130);">Html</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(223, 211, 237); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(83, 41, 130) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">@model dynamic

&lt;div&gt;
 &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
&lt;/div&gt;

&lt;script&gt;
 var ctx = document.getElementById(&#39;myChart&#39;).getContext(&#39;2d&#39;);
 var myChart = new Chart(ctx, {
 type: &#39;bar&#39;, // Chart type (e.g., bar, line, pie)
 data: {
 labels: @Html.Raw(Json.Serialize(Model.Labels)), // X-axis labels
 datasets: [{
 label: &#39;Sample Data&#39;,
 data: @Html.Raw(Json.Serialize(Model.Data)), // Y-axis data
 backgroundColor: &#39;rgba(75, 192, 192, 0.2)&#39;,
 borderColor: &#39;rgba(75, 192, 192, 1)&#39;,
 borderWidth: 1
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
 });
&lt;/script&gt;
</code></pre></li></ul><h3 data-bm="63" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 20px / 22px Roboto, sans-serif;">5. スタイルとカスタマイズ</h3><ul data-bm="64" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">Chart.jsオプション (色、ツールチップ、アニメーションなど) を変更してグラフをカスタマイズします。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">必要に応じて、レイアウトと応答性のために CSS を追加します。</li></ul><h3 data-bm="65" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 20px / 22px Roboto, sans-serif;">6. テストとデバッグ</h3><ul data-bm="66" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">アプリケーションを実行し、コントローラのアクション(例: )に移動します。<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">/Chart/Index</code></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">グラフが正しくレンダリングされ、データが表示されることを確認します。</li></ul><h3 data-bm="67" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 20px / 22px Roboto, sans-serif;">7. オプションの機能強化</h3><ul data-bm="68" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">動的データ: データベースまたは API からデータをフェッチし、ビューに渡します。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">AJAX 統合: AJAX を使用して、ページを更新せずにグラフを動的に更新します。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">複数のチャート: 複数の要素を追加し、複数のChart.jsインスタンスを初期化します。<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;canvas&gt;</code></li></ul><p data-bm="69" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert;">この概要は、Chart.jsを使用して ASP.NET Core MVC でグラフを作成するための基礎を提供します。アプリケーションの要件に基づいてさらに拡張できます。</div>

添付画像

画像を変更

Back to List

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