差分

このページの2つのバージョン間の差分を表示します。

--- javascript:chartjs [2022/10/12 08:31] – ともやん
+++ javascript:chartjs [2022/11/10 12:44] (現在) – [付録] ともやん
@@ 行 1: / 行 1: @@
 ====== Chart.js - デザイナーと開発者向けのシンプルでありながら柔軟な JavaScript チャート ======
+<WRAP logo>
+{{:javascript:chartjs-logo.svg|Chart.js Logo}}
+</WRAP>
 本家: [[https://www.chartjs.org|Chart.js | Open source HTML5 Charts for your website]]\\
 ソースコード: [[git>chartjs/Chart.js|chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tag]]\\
@@ 行 6: / 行 9: @@
 ===== 使い方 =====
 <WRAP jsfiddle><html>
-<iframe width="100%" height="450" src="//jsfiddle.net/tomoyan596/4vw7e2j5/embedded/result,html,js,css,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<style>
+.dokuwiki .wrap_jsfiddle iframe {
+    transform: unset;
+    transform-origin: unset;
+}
+</style>
+<iframe width="100%" height="350" src="//jsfiddle.net/tomoyan596/4vw7e2j5/embedded/result,html,js,css,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</html></WRAP>
+===== コードのメンテナンス性とわかりやすさ =====
+[[https://www.chartjs.org/docs/latest/getting-started/|Getting Started | Chart.js]]\\
+Chart.js の「はじめに」のように、HTML、JavaScript、CSS に分けて、JavaScript は ''const labels'' (ラベル定義)、''const data'' (データ定義)、''const config'' (設定)、''const myChart'' (グラフ描画) に分けて記述する🤔\\
+<WRAP jsfiddle><html>
+<style>
+.dokuwiki .wrap_jsfiddle iframe {
+    transform: unset;
+    transform-origin: unset;
+}
+</style>
+<iframe width="100%" height="350" src="//jsfiddle.net/tomoyan596/ry0fha6d/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</html></WRAP>
+==== キャンバスサイズの変更 ====
+公式ドキュメント [[https://www.chartjs.org/docs/latest/configuration/responsive.html|Responsive Charts | Chart.js]] より抜粋🤔\\
+<WRAP round tip 90% minfont>
+The following examples **do not work:**\\
+  * ''<canvas height="40vh" width="80vw">'': **invalid** values, the canvas doesn't resize ([[https://codepen.io/chartjs/pen/oWLZaR|example]])\\
+  * ''<canvas style="height:40vh; width:80vw">'': **invalid** behavior, the canvas is resized but becomes blurry ([[https://codepen.io/chartjs/pen/WjxpmO|example]])\\
+  * ''<canvas style="margin: 0 auto;">'': **invalid** behavior, the canvas continually shrinks. Chart.js needs a dedicated container for each canvas and this styling should be applied there.\\
+**Important Note**\\
+Detecting when the canvas size changes can not be done directly from the ''canvas'' element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only.** Responsiveness can then be achieved by setting relative values for the container size ([[https://codepen.io/chartjs/pen/YVWZbz|example]]):
+<WRAP color_code mincode><code javascript>
+<div class="chart-container" style="position: relative; height:40vh; width:80vw">
+    <canvas id="chart"></canvas>
+</div>
+</code></WRAP>
+The chart can also be programmatically resized by modifying the container size:
+<WRAP color_code mincode><code>
+chart.canvas.parentNode.style.height = '128px';
+chart.canvas.parentNode.style.width = '128px';
+</code></WRAP>
+Note that in order for the above code to correctly resize the chart height, the [[https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options|maintainAspectRatio]] option must also be set to ''false''.
+</WRAP>
+<WRAP jsfiddle><html>
+<style>
+.dokuwiki .wrap_jsfiddle iframe {
+    transform: unset;
+    transform-origin: unset;
+}
+</style>
+<iframe width="100%" height="470" src="//jsfiddle.net/tomoyan596/d6kbuyv7/embedded/result,html,js,css,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</html></WRAP>
+''%%<canvas>%%'' を直接リサイズするのではなく、コンテナ ''%%<div class="chart-container">%%'' に入れてコンテナをリサイズする🤔\\
+''options'' の ''maintainAspectRatio'' はデフォルトで ''true'' だが、これをキャンバスの縦横比を維持しないように ''false'' に設定する🤔\\
+''maintainAspectRatio'': サイズ変更時に元のキャンバスの縦横比 (width/height) を維持します。\\
+''aspectRatio'': キャンバスの縦横比 (width/height)。チャートの種類によりデフォルト 1 または 2。\\
+**HTML**\\
+<WRAP mincode><code html>
+  <div class="chart-container">
+    <canvas id="myChart"></canvas>
+  </div>
+</code></WRAP>
+**js**\\
+<WRAP mincode><code javascript>
+  const config = {
+    options: {
+      maintainAspectRatio: false,
+    }
+  }
+</code></WRAP>
+**css**\\
+<WRAP mincode><code css>
+.chart-container {
+  position: relative;
+  width: 200px;
+  height: 400px
+}
+</code></WRAP>
+===== ハーフドーナツ グラフ =====
+<WRAP jsfiddle><html>
+<iframe width="100%" height="470" src="//jsfiddle.net/tomoyan596/5hautoe1/embedded/result,html,js,css,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP>
 ===== 参考文献 =====
+[[https://laracasts.com/discuss/channels/general-discussion/chartjs-and-half-donuts|ChartJS and "half donuts"]]\\
 ==== 付録 ====
 [[tw>tomoyan596sp/status/1579264862232137729|簡単なべろ👅べろ👅ば〜😋グラフ🤤]]\\
+[[tw>tomoyan596sp/status/1590550329388830720|これはバームクーヘン？🤔ハーフドーナツ🤤サンプル追加しておきました😊]]\\