{"id":12391,"date":"2026-05-29T12:13:50","date_gmt":"2026-05-29T03:13:50","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=12391"},"modified":"2026-05-29T13:00:00","modified_gmt":"2026-05-29T04:00:00","slug":"chart-js-12391","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/chart-js-12391\/","title":{"rendered":"Chart.js\u3067\u68d2\u30b0\u30e9\u30d5\u3092\u4f5c\u308b\u304b\u3093\u305f\u3093\u306a\u4f7f\u3044\u65b9\u3010\u30b3\u30d4\u30daOK\u3011"},"content":{"rendered":"<!--\r\ntitle: Chart.js\u3067\u68d2\u30b0\u30e9\u30d5\u3092\u4f5c\u308b\u304b\u3093\u305f\u3093\u306a\u4f7f\u3044\u65b9\u3010\u30b3\u30d4\u30daOK\u3011\r\ndescription: Chart.js\u3092\u4f7f\u3063\u3066\u30b7\u30f3\u30d7\u30eb\u306a\u68d2\u30b0\u30e9\u30d5\u3092\u3059\u3050\u4f5c\u308c\u308b\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u89e3\u8aac\u3002CDN\u8aad\u307f\u8fbc\u307f\u304b\u3089\u68d2\u306e\u8272\u30fb\u5e45\u30fb\u8ef8\u30e9\u30d9\u30eb\u30fb\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u307e\u3067\u3001\u624b\u3063\u53d6\u308a\u65e9\u304f\u5b9f\u88c5\u3057\u305f\u3044\u4eba\u5411\u3051\u306b\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002\r\n\u30bf\u30b0: Chart.js, \u68d2\u30b0\u30e9\u30d5, JavaScript, \u30b0\u30e9\u30d5\u4f5c\u6210, CDN, chart.umd.js, barPercentage, categoryPercentage, ticks, callback\r\n-->\r\n\r\n<p>Chart.js\u306f\u3001HTML\u306e <code>&lt;canvas&gt;<\/code> \u8981\u7d20\u3092\u4f7f\u3063\u3066\u30b0\u30e9\u30d5\u3092\u63cf\u753b\u3059\u308bJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/p>\r\n<p>Canvas\u30d9\u30fc\u30b9\u306a\u306e\u3067\u8efd\u91cf\u304b\u3064\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3067\u3001\u68d2\u30b0\u30e9\u30d5\u30fb\u6298\u308c\u7dda\u30fb\u5186\u30b0\u30e9\u30d5\u306a\u30698\u7a2e\u985e\u306e\u30b0\u30e9\u30d5\u3092\u624b\u8efd\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002MIT\u30e9\u30a4\u30bb\u30f3\u30b9\u3067\u5546\u7528\u5229\u7528\u3082\u7121\u6599\u3067\u3059\u3002<\/p>\r\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f<b class=\"bold\">\u30b7\u30f3\u30d7\u30eb\u306a\u68d2\u30b0\u30e9\u30d5<\/b>\u306b\u7d5e\u3063\u3066\u3001\u3059\u3050\u4f7f\u3048\u308b\u30b3\u30fc\u30c9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\u7a4d\u307f\u4e0a\u3052\u68d2\u30b0\u30e9\u30d5\u3084\u6298\u308c\u7dda\u3068\u306e\u6df7\u5408\u30b0\u30e9\u30d5\u306b\u3064\u3044\u3066\u306f\u5225\u8a18\u4e8b\u3067\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\r\n\r\n<!-- \u2605\u76ee\u6b21\u30ea\u30b9\u30c8 -->\r\n<ul class=\"tocList mt-1r\" data-toc-id=\"js-tocBWGD\" style=\"height:28rem\"><\/ul>\r\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">CDN\u3067\u8aad\u307f\u8fbc\u3080<\/h2>\r\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u3067\u3001HTML\u306b1\u884c\u8ffd\u52a0\u3059\u308b\u3060\u3051\u3067\u4f7f\u3048\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/chart.js&quot;&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\r\n<p>\u30d5\u30c3\u30bf\u30fc\u3067\u8aad\u307f\u8fbc\u3080\u5834\u5408\u306f <code>foot.php<\/code> \u306a\u3069\u306b\u8ffd\u8a18\u3059\u308b\u3060\u3051\u3067OK\u3067\u3059\u3002<\/p>\r\n<blockquote>\r\n<p>\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u56fa\u5b9a\u3057\u305f\u3044\u5834\u5408\u306f <code>https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js<\/code> \u306e\u3088\u3046\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u672c\u756a\u30b5\u30a4\u30c8\u3067\u306f\u4e88\u671f\u3057\u306a\u3044\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u907f\u3051\u308b\u305f\u3081\u30d0\u30fc\u30b8\u30e7\u30f3\u56fa\u5b9a\u304c\u5b89\u5fc3\u3067\u3059\u3002<\/p>\r\n<\/blockquote>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">\u57fa\u672c\u306e\u69cb\u9020<\/h2>\r\n<p>\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u306b\u306f <code>&lt;canvas&gt;<\/code> \u8981\u7d20\u3068 <code>new Chart()<\/code> \u306e2\u3064\u3060\u3051\u5fc5\u8981\u3067\u3059\u3002<\/p>\r\n<pre><code class=\"language-html\">&lt;div style=&quot;position: relative; width: 100%; height: 300px;&quot;&gt;\r\n  &lt;canvas id=&quot;myChart&quot; role=&quot;img&quot; aria-label=&quot;\u30b0\u30e9\u30d5\u306e\u8aac\u660e&quot;&gt;\u30c6\u30ad\u30b9\u30c8\u3067\u306e\u30c7\u30fc\u30bf\u8aac\u660e&lt;\/canvas&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\nnew Chart(document.getElementById(&#39;myChart&#39;), {\r\n  type: &#39;bar&#39;,       \/\/ \u30b0\u30e9\u30d5\u306e\u7a2e\u985e\r\n  data: { ... },     \/\/ \u30c7\u30fc\u30bf\r\n  options: { ... }   \/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\r\n<p><code>&lt;canvas&gt;<\/code> \u3092 <code>&lt;div&gt;<\/code> \u3067\u56f2\u3093\u3067\u9ad8\u3055\u3092\u6307\u5b9a\u3059\u308b\u306e\u304c\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002<code>&lt;canvas&gt;<\/code> \u81ea\u4f53\u306bCSS\u3067\u9ad8\u3055\u3092\u6307\u5b9a\u3059\u308b\u3068\u5d29\u308c\u308b\u3053\u3068\u304c\u3042\u308b\u305f\u3081\u3001\u30e9\u30c3\u30d1\u30fc\u5074\u3067\u9ad8\u3055\u3092\u7ba1\u7406\u3057\u307e\u3059\u3002<\/p>\r\n<p>\u307e\u305f\u3001<code>role=&quot;img&quot;<\/code> \u3068 <code>aria-label<\/code> \u306f\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u5bfe\u5fdc\u306e\u305f\u3081\u306b\u5fc5\u305a\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">\u68d2\u30b0\u30e9\u30d5\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\r\n\r\n\r\n\r\n\r\n<figure class=\"chart-wrapper\">\r\n  <figcaption class=\"chart-caption\" style=\"position:relative;\">\r\n    <span class=\"chart-label fz-xs\" style=\"position:absolute; top:0.8rem; left:1rem;\">\uff08\u4e07\u5186\uff09<\/span>\r\n    <h4 class=\"chart-title fz-md ta-center\">2020\u5e74\u301c2024\u5e74\u306e\u58f2\u4e0a\u63a8\u79fb\u68d2\u30b0\u30e9\u30d5<\/h4>\r\n  <\/figcaption>\r\n\r\n  <!-- \u30b0\u30e9\u30d5\u672c\u4f53 -->\r\n  <div class=\"chart-content\" style=\"position:relative; width:100%; height:300px;\">\r\n    <canvas id=\"js-chartCKNB\" role=\"img\" aria-label=\"2020\u5e74\u301c2024\u5e74\u306e\u58f2\u4e0a\u63a8\u79fb\u68d2\u30b0\u30e9\u30d5\"><\/canvas>\r\n  <\/div>\r\n<\/figure><!-- \/\/\/.chart -->\r\n\r\n<!-- Chart.js -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js\"><\/script>\r\n<script>\r\n  (function () {\r\n    \/\/\u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u8868\u793a\u3059\u308b\r\n    const labelPlugin = [{\r\n      afterDraw(chart) {\r\n        const ctx = chart.ctx;\r\n        chart.data.datasets[0].data.forEach((val, i) => {\r\n          const bar = chart.getDatasetMeta(0).data[i];\r\n          ctx.save();\r\n          ctx.fillStyle = '#444';\r\n          ctx.font = '12px sans-serif';\r\n          ctx.textAlign = 'center';\r\n          ctx.fillText(val.toLocaleString(), bar.x, bar.y - 6);\r\n          ctx.restore();\r\n        });\r\n      }\r\n    }];\r\n\r\n    new Chart(document.getElementById('js-chartCKNB'), {\r\n      type: 'bar',\r\n      data: {\r\n        labels: ['2020\u5e74', '2021\u5e74', '2022\u5e74', '2023\u5e74', '2024\u5e74'],\r\n        datasets: [\r\n          {\r\n            label: '\u81ea\u793e\u5546\u54c1\u58f2\u4e0a',\r\n            data: [1820, 1950, 2100, 2280, 2410],\r\n            backgroundColor: '#005B92',\r\n            barPercentage: 0.5,\r\n            categoryPercentage: 0.6\r\n          }\r\n        ]\r\n      },\r\n      options: {\r\n        responsive: true,\r\n        maintainAspectRatio: false,\r\n        devicePixelRatio: window.devicePixelRatio || 2,\r\n        plugins: {\r\n          legend: { display: false },   \/\/ \u2190 \u30c7\u30d5\u30a9\u30eb\u30c8\u51e1\u4f8b\u3092\u975e\u8868\u793a\r\n        },\r\n        scales: {\r\n          x: {\r\n            ticks: {\r\n              font: { size: 13 },\r\n              color: '#1F2023',\r\n              maxRotation: 0\r\n            },\r\n            grid: { display: false }    \/\/ \u2190 \u7e26\u7dda\u3092\u975e\u8868\u793a\r\n          },\r\n          y: {\r\n            min: 0,\r\n            max: 2500,\r\n            ticks: {\r\n              stepSize: 500,\r\n              callback: v => v === 2500 ? '' : v.toLocaleString() + '\u4e07'         \/\/ \u2190 \u4e00\u756a\u4e0a\u306e\u30e9\u30d9\u30eb\u3092\u975e\u8868\u793a\r\n            },\r\n            grid: {\r\n              color: ctx => ctx.tick.value === 2500 ? 'transparent' : '#e8e8e8'  \/\/ \u2190 \u4e00\u756a\u4e0a\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u975e\u8868\u793a\r\n            }\r\n          }\r\n        }\r\n      },\r\n      plugins: labelPlugin  \/\/ \u2190 \u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u8868\u793a\u3059\u308b\r\n    });\r\n  })();\r\n<\/script>\r\n\r\n<pre class=\"mt-2r\"><code class=\"language-html\">&lt;figure class=&quot;chart-wrapper&quot;&gt;\r\n  &lt;figcaption class=&quot;chart-caption&quot; style=&quot;position:relative;&quot;&gt;\r\n    &lt;span class=&quot;chart-label fz-xs&quot; style=&quot;position:absolute; top:0.8rem; left:1rem;&quot;&gt;\uff08\u4e07\u5186\uff09&lt;\/span&gt;\r\n    &lt;h4 class=&quot;chart-title fz-md ta-center&quot;&gt;2020\u5e74\u301c2024\u5e74\u306e\u58f2\u4e0a\u63a8\u79fb\u68d2\u30b0\u30e9\u30d5&lt;\/h4&gt;\r\n  &lt;\/figcaption&gt;\r\n\r\n  &lt;!-- \u30b0\u30e9\u30d5\u672c\u4f53 --&gt;\r\n  &lt;div class=&quot;chart-content&quot; style=&quot;position:relative; width:100%; height:300px;&quot;&gt;\r\n    &lt;canvas id=&quot;js-chartCKNB&quot; role=&quot;img&quot; aria-label=&quot;2020\u5e74\u301c2024\u5e74\u306e\u58f2\u4e0a\u63a8\u79fb\u68d2\u30b0\u30e9\u30d5&quot;&gt;&lt;\/canvas&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/figure&gt;&lt;!-- \/\/\/.chart --&gt;\r\n\r\n&lt;!-- Chart.js --&gt;\r\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n  (function () {\r\n    \/\/\u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u8868\u793a\u3059\u308b\r\n    const labelPlugin = &lsqb;{\r\n      afterDraw(chart) {\r\n        const ctx = chart.ctx;\r\n        chart.data.datasets&lsqb;0&rsqb;.data.forEach((val, i) =&gt; {\r\n          const bar = chart.getDatasetMeta(0).data&lsqb;i&rsqb;;\r\n          ctx.save();\r\n          ctx.fillStyle = &#39;#444&#39;;\r\n          ctx.font = &#39;12px sans-serif&#39;;\r\n          ctx.textAlign = &#39;center&#39;;\r\n          ctx.fillText(val.toLocaleString(), bar.x, bar.y - 6);\r\n          ctx.restore();\r\n        });\r\n      }\r\n    }&rsqb;;\r\n\r\n    new Chart(document.getElementById(&#39;js-chartCKNB&#39;), {\r\n      type: &#39;bar&#39;,\r\n      data: {\r\n        labels: &lsqb;&#39;2020\u5e74&#39;, &#39;2021\u5e74&#39;, &#39;2022\u5e74&#39;, &#39;2023\u5e74&#39;, &#39;2024\u5e74&#39;&rsqb;,\r\n        datasets: &lsqb;\r\n          {\r\n            label: &#39;\u81ea\u793e\u5546\u54c1\u58f2\u4e0a&#39;,\r\n            data: &lsqb;1820, 1950, 2100, 2280, 2410&rsqb;,\r\n            backgroundColor: &#39;#005B92&#39;,\r\n            barPercentage: 0.5,\r\n            categoryPercentage: 0.6\r\n          }\r\n        &rsqb;\r\n      },\r\n      options: {\r\n        responsive: true,\r\n        maintainAspectRatio: false,\r\n        devicePixelRatio: window.devicePixelRatio || 2,\r\n        plugins: {\r\n          legend: { display: false },   \/\/ \u2190 \u30c7\u30d5\u30a9\u30eb\u30c8\u51e1\u4f8b\u3092\u975e\u8868\u793a\r\n        },\r\n        scales: {\r\n          x: {\r\n            ticks: {\r\n              font: { size: 13 },\r\n              color: &#39;#1F2023&#39;,\r\n              maxRotation: 0\r\n            },\r\n            grid: { display: false }    \/\/ \u2190 \u7e26\u7dda\u3092\u975e\u8868\u793a\r\n          },\r\n          y: {\r\n            min: 0,\r\n            max: 2500,\r\n            ticks: {\r\n              stepSize: 500,\r\n              callback: v =&gt; v === 2500 ? &#39;&#39; : v.toLocaleString() + &#39;\u4e07&#39;         \/\/ \u2190 \u4e00\u756a\u4e0a\u306e\u30e9\u30d9\u30eb\u3092\u975e\u8868\u793a\r\n            },\r\n            grid: {\r\n              color: ctx =&gt; ctx.tick.value === 2500 ? &#39;transparent&#39; : &#39;#e8e8e8&#39;  \/\/ \u2190 \u4e00\u756a\u4e0a\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u975e\u8868\u793a\r\n            }\r\n          }\r\n        }\r\n      },\r\n      plugins: labelPlugin  \/\/ \u2190 \u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u8868\u793a\u3059\u308b\r\n    });\r\n  })();\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\r\n\r\n<p><code>type: &#39;bar&#39;<\/code> \u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\u3067\u7e26\u68d2\u30b0\u30e9\u30d5\u306b\u306a\u308a\u307e\u3059\u3002\u6a2a\u68d2\u30b0\u30e9\u30d5\u306b\u3057\u305f\u3044\u5834\u5408\u306f <code>type: &#39;bar&#39;<\/code> \u306e\u307e\u307e <code>indexAxis: &#39;y&#39;<\/code> \u3092options\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">\u3088\u304f\u4f7f\u3046\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\r\n<h3 class=\"fz-ml\">\u68d2\u306e\u8272\u3092\u5909\u3048\u308b<\/h3>\r\n<p><code>backgroundColor<\/code> \u3067\u8272\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u7279\u5b9a\u306e\u68d2\u3060\u3051\u8272\u3092\u5909\u3048\u305f\u3044\u5834\u5408\u306f\u914d\u5217\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">datasets: &lsqb;\r\n  {\r\n    data: &lsqb;1820, 1950, 2100, 2280, 2410&rsqb;,\r\n\r\n    \/\/ \u5168\u90e8\u540c\u3058\u8272\r\n    backgroundColor: &#39;#005B92&#39;,\r\n\r\n    \/\/ \u68d2\u3054\u3068\u306b\u500b\u5225\u6307\u5b9a\uff08\u6700\u5f8c\u3060\u3051\u8584\u304f\u3059\u308b\u4f8b\uff09\r\n    backgroundColor: &lsqb;&#39;#005B92&#39;, &#39;#005B92&#39;, &#39;#005B92&#39;, &#39;#005B92&#39;, &#39;#80A5C2&#39;&rsqb;\r\n  }\r\n&rsqb;\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u68d2\u306e\u5e45\u3092\u8abf\u6574\u3059\u308b<\/h3>\r\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u68d2\u304c\u3084\u3084\u592a\u3081\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<code>barPercentage<\/code> \u3068 <code>categoryPercentage<\/code> \u306e2\u3064\u3067\u8abf\u6574\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">datasets: &lsqb;\r\n  {\r\n    data: &lsqb;...&rsqb;,\r\n    barPercentage: 0.5,      \/\/ \u30ab\u30c6\u30b4\u30ea\u5185\u306e\u68d2\u306e\u5e45\uff080\u301c1\uff09\r\n    categoryPercentage: 0.6  \/\/ \u30ab\u30c6\u30b4\u30ea\u5168\u4f53\u306b\u5bfe\u3059\u308b\u5360\u6709\u7387\uff080\u301c1\uff09\r\n  }\r\n&rsqb;\r\n<\/code><\/pre>\r\n<table class=\"table my-0.5r\">\r\n  <thead>\r\n  <tr class=\"rung\">\r\n    <th>barPercentage<\/th>\r\n    <td>categoryPercentage<\/td>\r\n    <td>\u898b\u305f\u76ee<\/td>\r\n  <\/tr>\r\n<\/thead><tbody>\r\n<tr class=\"rung\">\r\n  <th>0.8<\/th>\r\n  <td>0.8<\/td>\r\n  <td>\u30c7\u30d5\u30a9\u30eb\u30c8\uff08\u592a\u3081\uff09<\/td>\r\n<\/tr><tr class=\"rung\">\r\n<th>0.5<\/th>\r\n<td>0.6<\/td>\r\n<td>\u4e2d\u7d30<\/td>\r\n<\/tr><tr class=\"rung\">\r\n<th>0.3<\/th>\r\n<td>0.5<\/td>\r\n<td>\u7d30\u3081<\/td>\r\n<\/tr>\r\n<\/tbody><\/table>\r\n<h3 class=\"fz-ml\">\u8ef8\u306b\u5358\u4f4d\u3092\u4ed8\u3051\u308b<\/h3>\r\n<p><code>ticks.callback<\/code> \u3067\u8ef8\u30e9\u30d9\u30eb\u306b\u5358\u4f4d\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<code>toLocaleString()<\/code> \u3067\u30ab\u30f3\u30de\u533a\u5207\u308a\u306b\u3082\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">scales: {\r\n  y: {\r\n    ticks: {\r\n      callback: v =&gt; v.toLocaleString() + &#39;\u4e07&#39;\r\n      \/\/ \u4f8b\uff1a2000 \u2192 &quot;2,000\u4e07&quot;\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u7e26\u7dda\uff08\u30b0\u30ea\u30c3\u30c9\uff09\u3092\u975e\u8868\u793a\u306b\u3059\u308b<\/h3>\r\n<p>X\u8ef8\u306e\u30b0\u30ea\u30c3\u30c9\u7dda\u306f\u898b\u305f\u76ee\u304c\u3046\u308b\u3055\u304f\u306a\u308a\u304c\u3061\u3067\u3059\u3002<code>grid.display: false<\/code> \u3067\u975e\u8868\u793a\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">scales: {\r\n  x: {\r\n    grid: { display: false }\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>Y\u8ef8\u306e\u6700\u5927\u5024\u30e9\u30d9\u30eb\u3068\u30b0\u30ea\u30c3\u30c9\u7dda\u3060\u3051\u6d88\u3057\u305f\u3044\u5834\u5408\u306f <code>callback<\/code> \u3068 <code>color<\/code> \u3092\u7d44\u307f\u5408\u308f\u305b\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">scales: {\r\n  y: {\r\n    min: 0,\r\n    max: 2500,\r\n    ticks: {\r\n      callback: v =&gt; v === 2500 ? &#39;&#39; : v.toLocaleString() + &#39;\u4e07&#39;\r\n    },\r\n    grid: {\r\n      color: ctx =&gt; ctx.tick.value === 2500 ? &#39;transparent&#39; : &#39;#e8e8e8&#39;\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b<\/h3>\r\n<p>\u30db\u30d0\u30fc\u6642\u306b\u8868\u793a\u3055\u308c\u308b\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u6587\u5b57\u5217\u3092\u5909\u3048\u308b\u306b\u306f <code>tooltip.callbacks.label<\/code> \u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">plugins: {\r\n  tooltip: {\r\n    callbacks: {\r\n      label: ctx =&gt; `${ctx.dataset.label}: ${ctx.parsed.y.toLocaleString()}\u4e07\u5186`\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u8868\u793a\u3059\u308b<\/h3>\r\n<p>Chart.js\u6a19\u6e96\u3067\u306f\u68d2\u306e\u4e0a\u306b\u6570\u5024\u3092\u51fa\u3059\u6a5f\u80fd\u304c\u306a\u3044\u305f\u3081\u3001<code>plugins<\/code> \u306b\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">const labelPlugin = &lsqb;{\r\n  afterDraw(chart) {\r\n    const ctx = chart.ctx;\r\n    chart.data.datasets&lsqb;0&rsqb;.data.forEach((val, i) =&gt; {\r\n      const bar = chart.getDatasetMeta(0).data&lsqb;i&rsqb;;\r\n      ctx.save();\r\n      ctx.fillStyle = &#39;#444&#39;;\r\n      ctx.font = &#39;12px sans-serif&#39;;\r\n      ctx.textAlign = &#39;center&#39;;\r\n      ctx.fillText(val.toLocaleString(), bar.x, bar.y - 6);\r\n      ctx.restore();\r\n    });\r\n  }\r\n}&rsqb;;\r\n\r\nnew Chart(document.getElementById(&#39;myChart&#39;), {\r\n  type: &#39;bar&#39;,\r\n  data: { ... },\r\n  options: { ... },\r\n  plugins: labelPlugin  \/\/ \u2190 \u3053\u3053\u3067\u6e21\u3059\r\n});\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u30c7\u30d5\u30a9\u30eb\u30c8\u51e1\u4f8b\u3092\u975e\u8868\u793a\u306b\u3059\u308b<\/h3>\r\n<p>\u8907\u6570\u7cfb\u5217\u306e\u3068\u304d\u306bChart.js\u304c\u81ea\u52d5\u3067\u51fa\u3059\u51e1\u4f8b\u306f <code>legend.display: false<\/code> \u3067\u975e\u8868\u793a\u306b\u3057\u3066\u3001HTML\u3067\u81ea\u4f5c\u3059\u308b\u3068\u30c7\u30b6\u30a4\u30f3\u306e\u81ea\u7531\u5ea6\u304c\u4e0a\u304c\u308a\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">plugins: {\r\n  legend: { display: false }\r\n}\r\n<\/code><\/pre>\r\n<pre><code class=\"language-html\">&lt;!-- HTML\u51e1\u4f8b\u306e\u4f8b --&gt;\r\n&lt;div style=&quot;display: flex; gap: 16px; font-size: 12px; margin-bottom: 8px;&quot;&gt;\r\n  &lt;span style=&quot;display: flex; align-items: center; gap: 5px;&quot;&gt;\r\n    &lt;span style=&quot;width: 10px; height: 10px; background: #005B92; border-radius: 2px; display: inline-block;&quot;&gt;&lt;\/span&gt;\r\n    \u81ea\u793e\u5546\u54c1\u58f2\u4e0a\r\n  &lt;\/span&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u307c\u3084\u3051\u3092\u9632\u3050\uff08\u9ad8DPI\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u5bfe\u5fdc\uff09<\/h3>\r\n<p>Retina\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306a\u3069\u9ad8\u89e3\u50cf\u5ea6\u306e\u753b\u9762\u3067\u30b0\u30e9\u30d5\u304c\u307c\u3084\u3051\u3066\u898b\u3048\u308b\u5834\u5408\u306f <code>devicePixelRatio<\/code> \u3092\u660e\u793a\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">options: {\r\n  devicePixelRatio: window.devicePixelRatio || 2,\r\n  ...\r\n}\r\n<\/code><\/pre>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">\u307e\u3068\u3081<\/h2>\r\n<p>Chart.js\u3067\u68d2\u30b0\u30e9\u30d5\u3092\u4f5c\u308b\u3068\u304d\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\r\n<ul style=\"list-style-type:bullet;\" class=\"my-0.5r\">\r\n<li><code>type: &#39;bar&#39;<\/code> \u3067\u7e26\u68d2\u3001<code>indexAxis: &#39;y&#39;<\/code> \u3092\u8ffd\u52a0\u3059\u308b\u3068\u6a2a\u68d2<\/li>\r\n<li>\u68d2\u306e\u8272\u306f <code>backgroundColor<\/code> \u3067\u6307\u5b9a\u3001\u914d\u5217\u306b\u3059\u308b\u3068\u68d2\u3054\u3068\u306b\u500b\u5225\u6307\u5b9a\u3067\u304d\u308b<\/li>\r\n<li>\u68d2\u306e\u592a\u3055\u306f <code>barPercentage<\/code> \u3068 <code>categoryPercentage<\/code> \u3067\u8abf\u6574<\/li>\r\n<li>\u8ef8\u30e9\u30d9\u30eb\u306f <code>ticks.callback<\/code> \u3067\u5358\u4f4d\u4ed8\u304d\u306b\u3067\u304d\u308b<\/li>\r\n<li>\u68d2\u306e\u4e0a\u306e\u6570\u5024\u306f <code>labelPlugin<\/code> \u3067\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\u3059\u308b<\/li>\r\n<li>\u9ad8DPI\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306e\u307c\u3084\u3051\u306b\u306f <code>devicePixelRatio<\/code> \u3092\u8a2d\u5b9a<\/li>\r\n<\/ul>\r\n\r\n<hr class=\"separator mx-auto mt-3r\" \/>\r\n\r\n<h2 class=\"fz-xl\">\u95a2\u9023\u8a18\u4e8b<\/h2>\r\n\r\n<a href=\"https:\/\/code-plus.jp\/gp\/chart-js-11928\/\" class=\"linkbox my-1.5r\">\r\n<h4 class=\"linkbox-title fz-md\">Chart.js\u3067\u7a4d\u307f\u4e0a\u3052\u68d2\u30b0\u30e9\u30d5\u3092\u4f5c\u308b\u304b\u3093\u305f\u3093\u306a\u4f7f\u3044\u65b9\u3010\u30b3\u30d4\u30daOK\u3011<\/h4>\r\n<picture class=\"linkbox-thumbnail\">\r\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/SS-20260511-154144.png?ver=20260529130000\" alt=\"Chart.js\u3067\u7a4d\u307f\u4e0a\u3052\u68d2\u30b0\u30e9\u30d5\u3092\u4f5c\u308b\u304b\u3093\u305f\u3093\u306a\u4f7f\u3044\u65b9\u3010\u30b3\u30d4\u30daOK\u3011\" loading=\"lazy\" \/>\r\n<\/picture>\r\n<span class=\"linkbox-excerpt\">Chart.js\u3092\u4f7f\u3063\u3066\u7a4d\u307f\u4e0a\u3052\u68d2\u30b0\u30e9\u30d5\u3092\u3059\u3050\u4f5c\u308c\u308b\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u89e3\u8aac\u3002CDN\u306e\u8aad\u307f\u8fbc\u307f\u304b\u3089\u3001\u68d2\u306e\u8272\u30fb\u5e45\u30fb\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306a\u3069\u3088\u304f\u4f7f\u3046\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u307e\u3067\u3001\u624b\u3063\u53d6\u308a\u65e9\u304f\u5b9f\u88c5\u3057\u305f\u3044\u4eba\u5411\u3051\u306b\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002\r\n&emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n<\/span>\r\n<\/a>","protected":false},"excerpt":{"rendered":"Chart.js\u3092\u4f7f\u3063\u3066\u30b7\u30f3\u30d7\u30eb\u306a\u68d2\u30b0\u30e9\u30d5\u3092\u3059\u3050\u4f5c\u308c\u308b\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u89e3\u8aac\u3002CDN\u8aad\u307f\u8fbc\u307f\u304b\u3089\u68d2\u306e\u8272\u30fb\u5e45\u30fb\u8ef8\u30e9\u30d9\u30eb\u30fb\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u307e\u3067\u3001\u624b\u3063\u53d6\u308a\u65e9\u304f\u5b9f\u88c5\u3057\u305f\u3044\u4eba\u5411\u3051\u306b\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002Chart.js, \u68d2\u30b0\u30e9\u30d5, JavaScript, \u30b0\u30e9\u30d5\u4f5c\u6210, CDN, chart.umd.js, barPercentage, categoryPercentage, ticks, callback","protected":false},"author":1,"featured_media":12415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[12],"tags":[931,930,883,882,885,886,887,888,182,113],"class_list":["post-12391","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","tag-callback","tag-ticks","tag-883","tag-chart-js","tag-885","tag-chart-umd-js","tag-barpercentage","tag-categorypercentage","tag-cdn","tag-javascript"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/12391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=12391"}],"version-history":[{"count":10,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/12391\/revisions"}],"predecessor-version":[{"id":12416,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/12391\/revisions\/12416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/12415"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=12391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=12391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=12391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}