記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<h2 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; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true"><strong style="font-weight: normal;">手順：ASP.NET MVC &times; JavaScript で支払い割合チャートを作る</strong></h2><h3 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: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><strong style="font-weight: normal;">1. コントローラーでデータを用意</strong></h3><p 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; -webkit-line-clamp: revert; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">支払いデータをカテゴリごとに集計し、JSON 形式で返すアクションを作ります。</p><pre data-priority="2" style="color: rgb(17, 17, 17); 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; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">public class ExpenseController : Controller
{
    public ActionResult GetExpenseRatio()
    {
        var data = new[]
        {
            new { Category = &quot;食費&quot;, Amount = 35000 },
            new { Category = &quot;家賃&quot;, Amount = 60000 },
            new { Category = &quot;光熱費&quot;, Amount = 12000 },
            new { Category = &quot;娯楽&quot;, Amount = 8000 }
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}
</code></pre><h3 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: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><strong style="font-weight: normal;">2. ビューに Chart.js を読み込む</strong></h3><p 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; -webkit-line-clamp: revert; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">CDN を使うと簡単です。</p><pre data-priority="2" style="color: rgb(17, 17, 17); 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; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
</code></pre><h3 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: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><strong style="font-weight: normal;">3. JavaScript でデータ取得＆描画</strong></h3><p 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; -webkit-line-clamp: revert; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">ビュー（例:&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">Index.cshtml</code>）で Ajax を使ってデータを取得し、円グラフにします。</p><pre data-priority="2" style="color: rgb(17, 17, 17); 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; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">&lt;canvas id=&quot;expenseChart&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;

&lt;script&gt;
fetch(&#39;@Url.Action(&quot;GetExpenseRatio&quot;, &quot;Expense&quot;)&#39;)
    .then(response =&gt; response.json())
    .then(data =&gt; {
        const labels = data.map(d =&gt; d.Category);
        const amounts = data.map(d =&gt; d.Amount);

        new Chart(document.getElementById(&#39;expenseChart&#39;), {
            type: &#39;pie&#39;,
            data: {
                labels: labels,
                datasets: [{
                    data: amounts,
                    backgroundColor: [&#39;#FF6384&#39;, &#39;#36A2EB&#39;, &#39;#FFCE56&#39;, &#39;#4BC0C0&#39;]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: &#39;bottom&#39; },
                    title: { display: true, text: &#39;支払い割合&#39; }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre><h3 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: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><strong style="font-weight: normal;">4. ポイント</strong></h3><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: rgb(17, 17, 17); 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(249, 249, 249); 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;"><strong style="font-weight: 700;">集計はサーバー側で行う</strong>（JavaScript 側は描画に専念）</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;"><strong style="font-weight: 700;">JSON 形式で返す</strong>と JavaScript で扱いやすい</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;"><strong style="font-weight: 700;">色やラベルは配列で指定</strong>して見やすくする</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: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">pie</code>）やドーナツグラフ（<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">doughnut</code>）が割合表示に向いている</li></ul><p 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; -webkit-line-clamp: revert; color: rgb(17, 17, 17); 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(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">💡 この方法なら、家計簿データが更新されても Ajax で最新の割合を即時反映できます。</p><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>

添付画像

画像を変更

Back to List

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