javascript:chartjs [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify mr-1" data-icon="mdi:arrow-left" style="vertical-align: -0.125em; transform: rotate(360deg);"><path d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11h12z" fill="currentColor"></path></svg>====== 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]]\\
ドキュメント: [[https://www.chartjs.org/docs/latest/|Chart.js | Chart.js]]\\
サンプル: [[https://www.chartjs.org/docs/master/samples/information.html|Chart.js Samples | Chart.js]]\\

===== 使い方 =====
<WRAP jsfiddle><html>
<style>
.dokuwiki .wrap_jsfiddle iframe {
    transform: unset;
    transform-origin: unset;
}
</style>
<iframe width="100%" height="370" 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="370" 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_12>
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_term>
<WRAP color_mincode><code javascript>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
</code></WRAP>
</WRAP>

The chart can also be programmatically resized by modifying the container size:
<WRAP color_term>
<WRAP color_mincode><code>
chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';
</code></WRAP>
</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 color_term>
<WRAP color_mincode><code html>
  <div class="chart-container">
    <canvas id="myChart"></canvas>
  </div>
</code></WRAP>
</WRAP>
**js**\\
<WRAP color_term>
<WRAP color_mincode><code javascript>
  const config = {
    options: {
      maintainAspectRatio: false,
    }
  }
</code></WRAP>
</WRAP>
**css**\\
<WRAP color_term>
<WRAP color_mincode><code css>
.chart-container {
  position: relative;
  width: 200px;
  height: 400px
}
</code></WRAP>
</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>

===== parcel でサンプルを動かす =====

==== pnpm のインストール ====
{{page>javascript:pnpm#インストール&noheader}}

==== サンプルアプリケーションをビルドする ====
公式: [[https://www.chartjs.org/docs/master/getting-started/usage.html|Step-by-step guide | Chart.js]]\\
\\
新しいプロジェクトディレクトリに、以下の内容の package.json を作成する...🤔\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> chartjs-example <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">cd</font> chartjs-example
<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <font color="#999999">package.json</font>
</pre></html></WRAP>
<WRAP color_mincode><html><pre class=bat><font color="#F8F8F2">{</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;chartjs-example&quot;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;version&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;1.0.0&quot;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;license&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;MIT&quot;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
<font color="#F8F8F2">    </font><font color="#FD971F">&quot;dev&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;parcel src/index.html&quot;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">    </font><font color="#FD971F">&quot;build&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;parcel build src/index.html&quot;</font>
<font color="#F8F8F2">  },</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;devDependencies&quot;</font><font color="#F8F8F2">: {</font>
<font color="#F8F8F2">    </font><font color="#FD971F">&quot;parcel&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^2.6.2&quot;</font>
<font color="#F8F8F2">  },</font>
<font color="#F8F8F2">  </font><font color="#FD971F">&quot;dependencies&quot;</font><font color="#F8F8F2">: {</font>
<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@cubejs-client/core&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.31.0&quot;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">    </font><font color="#FD971F">&quot;chart.js&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^4.0.0&quot;</font>
<font color="#F8F8F2">  }</font>
<font color="#F8F8F2">}</font>
</pre></html></WRAP>
</WRAP>

<html><code>pnpm install</code></html> を実行して依存関係をインストールする...🤔\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
</pre></html></WRAP>
<WRAP color_mincode><html><pre>
Lockfile is up to date, resolution step is skipped
Packages: <font color="#26A269">+188</font>
<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
Progress: resolved <font color="#33C7DE">188</font>, reused <font color="#33C7DE">188</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">188</font>, done
<font color="#5E5C64">node_modules/.pnpm/@swc+core@1.7.18_@swc+helpers@0.5.12/node_modules/@swc/</font>core: Running postinstall script, done in 1.3s<font color="#5E5C64">es/.pnpm/msgpackr-extract@3.0.3/node_modules/</font>msgpackr-extract: Running install script, done in 268ms
<font color="#5E5C64">node_modules/.pnpm/lmdb@2.8.5/node_modules/</font>lmdb: Running install script, done in 221ms

<font color="#33C7DE">dependencies:</font>
<font color="#26A269">+</font> @cubejs-client/core <font color="#5E5C64">0.31.63</font>
<font color="#26A269">+</font> chart.js <font color="#5E5C64">4.4.4</font>

<font color="#33C7DE">devDependencies:</font>
<font color="#26A269">+</font> parcel <font color="#5E5C64">2.12.0</font>

Done in 4.6s
</pre></html></WRAP>
</WRAP>

<html><code>src</code></html> ディレクトリを作成して、以下の内容で <html><code>src/index.html</code></html>、<html><code>src/acquisitions.js</code></html> を作成する...🤔\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> src
<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <u style="text-decoration-style:solid">src/index.html</u>
</pre></html></WRAP>
<WRAP color_mincode><html><pre class=bat>
<font color="#F8F8F2">&lt;!doctype html&gt;</font>
<font color="#FFFFFF">&lt;</font><font color="#F92672">html</font><font color="#A6E22E"> lang=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">en</font><font color="#FFFFFF">&quot;&gt;</font>
<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
<font color="#F8F8F2">    </font><font color="#FFFFFF">&lt;</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font><font color="#F8F8F2">Chart.js example</font><font color="#FFFFFF">&lt;/</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font>
<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;/</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
<font color="#F8F8F2">    </font><font color="#7C7865">&lt;!-- &lt;div style=&quot;width: 500px;&quot;&gt;&lt;canvas id=&quot;dimensions&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;br/&gt; --&gt;</font>
<font color="#F8F8F2">    </font><font color="#FFFFFF">&lt;</font><font color="#F92672">div</font><font color="#A6E22E"> style=</font><font color="#FFFFFF">&quot;</font><font color="#66D9EF">width</font><font color="#FFFFFF">:</font><font color="#A6E22E"> </font><font color="#BE84FF">800</font><font color="#F92672">px</font><font color="#FFFFFF">;&quot;&gt;&lt;</font><font color="#F92672">canvas</font><font color="#A6E22E"> id=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">acquisitions</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">canvas</font><font color="#FFFFFF">&gt;&lt;/</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;</font>

<font color="#F8F8F2">    </font><font color="#7C7865">&lt;!-- &lt;script type=&quot;module&quot; src=&quot;dimensions.js&quot;&gt;&lt;/script&gt; --&gt;</font>
<font color="#F8F8F2">    </font><font color="#FFFFFF">&lt;</font><font color="#F92672">script</font><font color="#F8F8F2"> </font><font color="#A6E22E">type=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">module</font><font color="#FFFFFF">&quot;</font><font color="#F8F8F2"> </font><font color="#A6E22E">src=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">acquisitions.js</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">script</font><font color="#FFFFFF">&gt;</font>
<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;/</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
<font color="#FFFFFF">&lt;/</font><font color="#F92672">html</font><font color="#FFFFFF">&gt;</font>
</pre></html></WRAP>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <u style="text-decoration-style:solid">src/acquisitions.js</u>
</pre></html></WRAP>
<WRAP color_mincode><html><pre class=bat>
<font color="#F92672">import</font><font color="#F8F8F2"> </font><font color="#FFFFFF">Chart</font><font color="#F8F8F2"> </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;chart.js/auto&apos;</font>

<font color="#FFFFFF">(</font><font color="#66D9EF">async</font><font color="#A6E22E"> </font><font color="#66D9EF">function</font><font color="#FFFFFF">()</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">  </font><font color="#66D9EF">const</font><font color="#F8F8F2"> </font><font color="#FFFFFF">data</font><font color="#F8F8F2"> </font><font color="#F92672">=</font><font color="#F8F8F2"> [</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2010</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">10</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2011</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">20</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2012</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">15</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2013</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">25</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2014</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">22</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2015</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">30</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">    { </font><font color="#FFFFFF">year:</font><font color="#F8F8F2"> </font><font color="#AE81FF">2016</font><font color="#F8F8F2">, </font><font color="#FFFFFF">count:</font><font color="#F8F8F2"> </font><font color="#AE81FF">28</font><font color="#F8F8F2"> },</font>
<font color="#F8F8F2">  ];</font>

<font color="#F8F8F2">  </font><font color="#F92672">new</font><font color="#F8F8F2"> Chart</font><font color="#FFFFFF">(</font>
<font color="#F8F8F2">    </font><font color="#A6E22E">document</font><font color="#FFFFFF">.</font><font color="#F8F8F2">getElementById</font><font color="#FFFFFF">(</font><font color="#E6DB74">&apos;acquisitions&apos;</font><font color="#FFFFFF">)</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">    {</font>
<font color="#F8F8F2">      </font><font color="#FFFFFF">type:</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;bar&apos;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">      </font><font color="#FFFFFF">data:</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">        </font><font color="#FFFFFF">labels:</font><font color="#F8F8F2"> </font><font color="#FFFFFF">data.</font><font color="#F8F8F2">map</font><font color="#FFFFFF">(</font><font color="#FD971F">row</font><font color="#F8F8F2"> </font><font color="#66D9EF">=&gt;</font><font color="#F8F8F2"> </font><font color="#FFFFFF">row.year)</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">        </font><font color="#FFFFFF">datasets:</font><font color="#F8F8F2"> [</font>
<font color="#F8F8F2">          {</font>
<font color="#F8F8F2">            </font><font color="#FFFFFF">label:</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;Acquisitions by year&apos;</font><font color="#F8F8F2">,</font>
<font color="#F8F8F2">            </font><font color="#FFFFFF">data:</font><font color="#F8F8F2"> </font><font color="#FFFFFF">data.</font><font color="#F8F8F2">map</font><font color="#FFFFFF">(</font><font color="#FD971F">row</font><font color="#F8F8F2"> </font><font color="#66D9EF">=&gt;</font><font color="#F8F8F2"> </font><font color="#FFFFFF">row.count)</font>
<font color="#F8F8F2">          }</font>
<font color="#F8F8F2">        ]</font>
<font color="#F8F8F2">      }</font>
<font color="#F8F8F2">    }</font>
<font color="#F8F8F2">  </font><font color="#FFFFFF">)</font><font color="#F8F8F2">;</font>
<font color="#F8F8F2">}</font><font color="#FFFFFF">)()</font><font color="#F8F8F2">;</font>
</pre></html></WRAP>
</WRAP>

<html><code>pnpm dev</code></html> を実行して <html><code>http://localhost:1234/</code></html> にアクセスする😉\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font><font color="#999999"> dev</font>
</pre></html></WRAP>
<WRAP color_result><html><pre>

&gt; chartjs-example@1.0.0 dev /home/tomoyan/my_projects/chartjs-example
&gt; parcel src/index.html

<font color="#12488B"><b>Server running at http://localhost:1234</b></font>
✨ <font color="#26A269"><b>Built in 22ms</b></font>
</pre></html></WRAP>
</WRAP>
[[http://localhost:1234/|]]\\
<WRAP zoomimg w500 x1_3>
{{:javascript:chartjs-example_001.png|Chart.js example}}
</WRAP>

===== ビルド方法 =====
[[#pnpm_のインストール|pnpm のインストール]]\\

**Chart.js のソースコードをクローンする...🤔**\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">git</font> clone <font color="#A347BA">--depth</font> 1 https://github.com/chartjs/Chart.js.git
</pre></html></WRAP>
<WRAP color_result><html><pre>
Cloning into &apos;Chart.js&apos;...
remote: Enumerating objects: 1890, done.
remote: Counting objects: 100% (1890/1890), done.
remote: Compressing objects: 100% (1501/1501), done.
remote: Total 1890 (delta 506), reused 1350 (delta 373), pack-reused 0 (from 0)
Receiving objects: 100% (1890/1890), 11.70 MiB | 10.65 MiB/s, done.
Resolving deltas: 100% (506/506), done.
</pre></html></WRAP>
</WRAP>

**Performant NPM でプロジェクトの依存関係をインストールする...🤔**\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
</pre></html></WRAP>
<WRAP color_result_hlong><html><pre>
Scope: all 7 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: <font color="#26A269">+1984</font>
<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
Progress: resolved <font color="#33C7DE">1984</font>, reused <font color="#33C7DE">1982</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">1984</font>, done

<font color="#33C7DE">dependencies:</font>
<font color="#26A269">+</font> @kurkle/color <font color="#5E5C64">0.3.2</font>

<font color="#33C7DE">devDependencies:</font>
<font color="#26A269">+</font> @rollup/plugin-commonjs <font color="#5E5C64">23.0.7</font>
<font color="#26A269">+</font> @rollup/plugin-inject <font color="#5E5C64">5.0.3</font>
<font color="#26A269">+</font> @rollup/plugin-json <font color="#5E5C64">5.0.2</font>
<font color="#26A269">+</font> @rollup/plugin-node-resolve <font color="#5E5C64">15.0.1</font>
<font color="#26A269">+</font> @swc/core <font color="#5E5C64">1.3.42</font>
<font color="#26A269">+</font> @types/estree <font color="#5E5C64">1.0.0</font>
<font color="#26A269">+</font> @types/offscreencanvas <font color="#5E5C64">2019.7.0</font>
<font color="#26A269">+</font> @typescript-eslint/eslint-plugin <font color="#5E5C64">5.57.0</font>
<font color="#26A269">+</font> @typescript-eslint/parser <font color="#5E5C64">5.57.0</font>
<font color="#26A269">+</font> chartjs-adapter-luxon <font color="#5E5C64">1.3.1</font>
<font color="#26A269">+</font> chartjs-adapter-moment <font color="#5E5C64">1.0.1</font>
<font color="#26A269">+</font> chartjs-test-utils <font color="#5E5C64">0.4.0</font>
<font color="#26A269">+</font> concurrently <font color="#5E5C64">7.6.0</font>
<font color="#26A269">+</font> coveralls <font color="#5E5C64">3.1.1</font>
<font color="#26A269">+</font> cross-env <font color="#5E5C64">7.0.3</font>
<font color="#26A269">+</font> eslint <font color="#5E5C64">8.37.0</font>
<font color="#26A269">+</font> eslint-config-chartjs <font color="#5E5C64">0.3.0</font>
<font color="#26A269">+</font> eslint-plugin-es <font color="#5E5C64">4.1.0</font>
<font color="#26A269">+</font> eslint-plugin-html <font color="#5E5C64">7.1.0</font>
<font color="#26A269">+</font> eslint-plugin-markdown <font color="#5E5C64">3.0.0</font>
<font color="#26A269">+</font> esm <font color="#5E5C64">3.2.25</font>
<font color="#26A269">+</font> glob <font color="#5E5C64">8.1.0</font>
<font color="#26A269">+</font> jasmine <font color="#5E5C64">3.99.0</font>
<font color="#26A269">+</font> jasmine-core <font color="#5E5C64">3.99.1</font>
<font color="#26A269">+</font> karma <font color="#5E5C64">6.4.1</font>
<font color="#26A269">+</font> karma-chrome-launcher <font color="#5E5C64">3.1.1</font>
<font color="#26A269">+</font> karma-coverage <font color="#5E5C64">2.2.0</font>
<font color="#26A269">+</font> karma-edge-launcher <font color="#5E5C64">0.4.2</font>
<font color="#26A269">+</font> karma-firefox-launcher <font color="#5E5C64">2.1.2</font>
<font color="#26A269">+</font> karma-jasmine <font color="#5E5C64">4.0.2</font>
<font color="#26A269">+</font> karma-jasmine-html-reporter <font color="#5E5C64">1.7.0</font>
<font color="#26A269">+</font> karma-rollup-preprocessor <font color="#5E5C64">7.0.7</font>
<font color="#26A269">+</font> karma-safari-private-launcher <font color="#5E5C64">1.0.0</font>
<font color="#26A269">+</font> karma-spec-reporter <font color="#5E5C64">0.0.32</font>
<font color="#26A269">+</font> luxon <font color="#5E5C64">3.3.0</font>
<font color="#26A269">+</font> moment <font color="#5E5C64">2.29.4</font>
<font color="#26A269">+</font> moment-timezone <font color="#5E5C64">0.5.42</font>
<font color="#26A269">+</font> pixelmatch <font color="#5E5C64">5.3.0</font>
<font color="#26A269">+</font> rollup <font color="#5E5C64">3.20.2</font>
<font color="#26A269">+</font> rollup-plugin-cleanup <font color="#5E5C64">3.2.1</font>
<font color="#26A269">+</font> rollup-plugin-istanbul <font color="#5E5C64">4.0.0</font>
<font color="#26A269">+</font> rollup-plugin-swc3 <font color="#5E5C64">0.7.0</font>
<font color="#26A269">+</font> rollup-plugin-terser <font color="#5E5C64">7.0.2</font>
<font color="#26A269">+</font> typescript <font color="#5E5C64">4.9.5</font>
<font color="#26A269">+</font> yargs <font color="#5E5C64">17.7.1</font>

Done in 14.4s
</pre></html></WRAP>
</WRAP>

**Chart.js ドキュメントを実行する...🤔**\\
Node.js の OpenSSL レガシープロバイダー オプションを有効にして pnpm で実行する😉\\
Node.js 17 では webpack v4 が使用する openssl 標準が非推奨になったので、これが修正されるまでは OpenSSL レガシープロバイダー オプションを有効にすることで回避する😊\\
[[git>webpack/webpack/issues/14532|nodejs 17: digital envelope routines::unsupported · Issue #14532 · webpack/webpack · GitHub]]\\
webpack v5 では対応されている😉 ([[git>webpack/webpack/pull/14584|add wasm md4 implementation by sokra · Pull Request #14584 · webpack/webpack · GitHub]])\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#2AA1B3"><b>export</b></font><font color="#999999"> NODE_OPTIONS=--openssl-legacy-provider</font>
</pre></html></WRAP>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> run docs:dev
</pre></html></WRAP>
<WRAP color_result_hlong><html><pre>
&gt; chart.js@4.4.4 docs:dev /home/tomoyan/my_projects/_js_src/Chart.js
&gt; pnpm run build &amp;&amp; pnpm --filter &quot;./docs/**&quot; dev


&gt; chart.js@4.4.4 build /home/tomoyan/my_projects/_js_src/Chart.js
&gt; rollup -c &amp;&amp; pnpm emitDeclarations


<font color="#2AA1B3"><b>src/index.umd.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>dist/chart.umd.js</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts -&gt; src/plugins/index.js
<font color="#26A269">created </font><font color="#26A269"><b>dist/chart.umd.js</b></font><font color="#26A269"> in </font><font color="#26A269"><b>6.9s</b></font>

<font color="#2AA1B3"><b>src/index.ts, src/helpers/index.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>./</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/index.ts -&gt; src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts
<font color="#26A269">created </font><font color="#26A269"><b>./</b></font><font color="#26A269"> in </font><font color="#26A269"><b>1.8s</b></font>

<font color="#2AA1B3"><b>src/index.ts, src/helpers/index.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>./</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/index.ts -&gt; src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts
<font color="#26A269">created </font><font color="#26A269"><b>./</b></font><font color="#26A269"> in </font><font color="#26A269"><b>1.9s</b></font>

&gt; chart.js@4.4.4 emitDeclarations /home/tomoyan/my_projects/_js_src/Chart.js
&gt; tsc --emitDeclarationOnly &amp;&amp; pnpm copyDeclarations


&gt; chart.js@4.4.4 copyDeclarations /home/tomoyan/my_projects/_js_src/Chart.js
&gt; node -e &quot;fs.cpSync(&apos;./src/types/&apos;, &apos;./dist/types/&apos;, {recursive:true})&quot;


&gt; docs@4.0.0-dev dev /home/tomoyan/my_projects/_js_src/Chart.js/docs
&gt; vuepress dev --no-cache

<font color="#2AA1B3">wait</font> Extracting site metadata...
<font color="#12488B">tip</font> Apply theme <font color="#A347BA">vuepress-theme-chartjs</font><font color="#5E5C64"> (extends </font><font color="#A347BA">@vuepress/theme-default</font><font color="#5E5C64">)</font> ...
<font color="#E9AD0C">warning</font> pointStyle has multiple declarations with a comment. An arbitrary comment will be used.
The comments for pointStyle are declared at:
	/home/tomoyan/my_projects/_js_src/Chart.js/src/types/index.d.ts:1994
	/home/tomoyan/my_projects/_js_src/Chart.js/src/types/index.d.ts:2044
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">container</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-container&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/last-updated</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-last-updated&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/register-components</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-register-components&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/active-header-links</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-active-header-links&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/search</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-search&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/nprogress</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-nprogress&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">tabs</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-tabs&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">flexsearch</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-flexsearch&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/html-redirect</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-html-redirect&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/google-analytics</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-google-analytics&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">redirect</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-redirect&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">dehydrate</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-dehydrate&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">code-copy</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-code-copy&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">typedoc</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-typedoc&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@simonbrunel/versions</font> <font color="#5E5C64">(i.e. &quot;@simonbrunel/vuepress-plugin-versions&quot;)</font> ...
Documentation generated at ./api
<font color="#12488B">tip</font> Clean cache...

<font color="#41B883">●</font> <font color="#41B883">Client</font> <font color="#41B883">█████████████████</font><font color="#D0CFCC">████████</font> building (66%) <font color="#5E5C64">1192/1270 modules</font> <font color="#5E5C64">78 active</font>
 <font color="#5E5C64">... cache-loader </font><font color="#12488B">›</font><font color="#5E5C64"> vue-loader </font><font color="#12488B">›</font><font color="#5E5C64"> markdown-loader </font><font color="#12488B">›</font><font color="#5E5C64"> api/interfaces/RenderTextOpts.md</font>

<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: Project is running at http://0.0.0.0:8080/
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: webpack output is served from /docs/master/
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: Content not from webpack is served from /home/tomoyan/my_projects/_js_src/Chart.js/docs/.vuepress/public
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: 404s will fallback to /index.html
<font color="#A2734C">Browserslist: caniuse-lite is outdated. Please run:</font>
<font color="#A2734C">  npx update-browserslist-db@latest</font>
<font color="#A2734C">  Why you should do it regularly: https://github.com/browserslist/update-db#readme</font>
<font color="#C01C28">[BABEL] Note: The code generator has deoptimised the styling of /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/.pnpm/@vuepress+core@1.9.9/node_modules/@vuepress/core/.temp/internal/siteData.js as it exceeds the max of 500KB.</font>
</pre></html></WRAP>
<WRAP color_result><html><pre>
<font color="#26A269">success</font> <font color="#5E5C64">[09:27:10]</font> Build <i>e5d5ff</i> finished in 98069 ms! 
<font color="#5E5C64">&gt;</font> VuePress dev server listening at <font color="#2AA1B3">http://localhost:8080/docs/master/</font>
</pre></html></WRAP>
</WRAP>
[[http://localhost:8080/samples/|]]\\
<WRAP zoomimg w500 x1_3>
{{:javascript:chart_js_samples.png|Chart.js Samples}}
</WRAP>

==== トラブルシューティング ====
<html><code>vuepress dev --no-cache</code></html> が opensslError を吐く場合...😢\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> run docs:dev
</pre></html></WRAP>
<WRAP color_result_hlong><html><pre>
&gt; chart.js@4.4.4 docs:dev /home/tomoyan/my_projects/_js_src/Chart.js
&gt; pnpm run build &amp;&amp; pnpm --filter &quot;./docs/**&quot; dev


&gt; chart.js@4.4.4 build /home/tomoyan/my_projects/_js_src/Chart.js
&gt; rollup -c &amp;&amp; pnpm emitDeclarations


<font color="#2AA1B3"><b>src/index.umd.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>dist/chart.umd.js</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts -&gt; src/plugins/index.js
<font color="#26A269">created </font><font color="#26A269"><b>dist/chart.umd.js</b></font><font color="#26A269"> in </font><font color="#26A269"><b>6.5s</b></font>

<font color="#2AA1B3"><b>src/index.ts, src/helpers/index.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>./</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/index.ts -&gt; src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts
<font color="#26A269">created </font><font color="#26A269"><b>./</b></font><font color="#26A269"> in </font><font color="#26A269"><b>1.9s</b></font>

<font color="#2AA1B3"><b>src/index.ts, src/helpers/index.ts</b></font><font color="#2AA1B3"> → </font><font color="#2AA1B3"><b>./</b></font><font color="#2AA1B3">...</font>
<font color="#A2734C"><b>(!) Circular dependency</b></font>
src/index.ts -&gt; src/plugins/index.js -&gt; src/plugins/plugin.colors.ts -&gt; src/index.ts
<font color="#26A269">created </font><font color="#26A269"><b>./</b></font><font color="#26A269"> in </font><font color="#26A269"><b>1.8s</b></font>

&gt; chart.js@4.4.4 emitDeclarations /home/tomoyan/my_projects/_js_src/Chart.js
&gt; tsc --emitDeclarationOnly &amp;&amp; pnpm copyDeclarations


&gt; chart.js@4.4.4 copyDeclarations /home/tomoyan/my_projects/_js_src/Chart.js
&gt; node -e &quot;fs.cpSync(&apos;./src/types/&apos;, &apos;./dist/types/&apos;, {recursive:true})&quot;


&gt; docs@4.0.0-dev dev /home/tomoyan/my_projects/_js_src/Chart.js/docs
&gt; vuepress dev --no-cache

<font color="#2AA1B3">wait</font> Extracting site metadata...
<font color="#12488B">tip</font> Apply theme <font color="#A347BA">vuepress-theme-chartjs</font><font color="#5E5C64"> (extends </font><font color="#A347BA">@vuepress/theme-default</font><font color="#5E5C64">)</font> ...
<font color="#E9AD0C">warning</font> pointStyle has multiple declarations with a comment. An arbitrary comment will be used.
The comments for pointStyle are declared at:
	/home/tomoyan/my_projects/_js_src/Chart.js/src/types/index.d.ts:1994
	/home/tomoyan/my_projects/_js_src/Chart.js/src/types/index.d.ts:2044
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">container</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-container&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/last-updated</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-last-updated&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/register-components</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-register-components&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/active-header-links</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-active-header-links&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/search</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-search&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/nprogress</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-nprogress&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">tabs</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-tabs&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">flexsearch</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-flexsearch&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/html-redirect</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-html-redirect&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@vuepress/google-analytics</font> <font color="#5E5C64">(i.e. &quot;@vuepress/plugin-google-analytics&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">redirect</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-redirect&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">dehydrate</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-dehydrate&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">code-copy</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-code-copy&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">typedoc</font> <font color="#5E5C64">(i.e. &quot;vuepress-plugin-typedoc&quot;)</font> ...
<font color="#12488B">tip</font> Apply plugin <font color="#A347BA">@simonbrunel/versions</font> <font color="#5E5C64">(i.e. &quot;@simonbrunel/vuepress-plugin-versions&quot;)</font> ...
Documentation generated at ./api
<font color="#12488B">tip</font> Clean cache...



<font color="#41B883">●</font> <font color="#41B883">Client</font> <font color="#41B883">██████████</font><font color="#D0CFCC">███████████████</font> building (40%) <font color="#5E5C64">1/2 modules</font> <font color="#5E5C64">1 active</font>
 <font color="#5E5C64">..../node_modules/.pnpm/webpack-dev-server@3.11.3_webpack@4.46.0/node_modules/webpack-dev-server/client/ind</font>
<font color="#5E5C64">ex.js</font>

<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: Project is running at http://0.0.0.0:8080/
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: webpack output is served from /docs/master/
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: Content not from webpack is served from /home/tomoyan/my_projects/_js_src/Chart.js/docs/.vuepress/public
<font color="#12488B">ℹ</font> <font color="#5E5C64">｢wds｣</font>: 404s will fallback to /index.html
node:internal/crypto/hash:79
  this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());
                  ^

</pre></html></WRAP>
<WRAP color_result><html><pre>
Error: error:0308010C:digital envelope routines::unsupported
<font color="#5E5C64">    at new Hash (node:internal/crypto/hash:79:19)</font>
<font color="#5E5C64">    at Object.createHash (node:crypto:139:10)</font>
    at module.exports (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/webpack@4.46.0/node_modules/<u style="text-decoration-style:solid">webpack</u>/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/webpack@4.46.0/node_modules/<u style="text-decoration-style:solid">webpack</u>/lib/NormalModule.js:417:16)
    at handleParseError (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/webpack@4.46.0/node_modules/<u style="text-decoration-style:solid">webpack</u>/lib/NormalModule.js:471:10)
    at /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/webpack@4.46.0/node_modules/<u style="text-decoration-style:solid">webpack</u>/lib/NormalModule.js:503:5
    at /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/webpack@4.46.0/node_modules/<u style="text-decoration-style:solid">webpack</u>/lib/NormalModule.js:358:12
    at /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/loader-runner@2.4.0/node_modules/<u style="text-decoration-style:solid">loader-runner</u>/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/loader-runner@2.4.0/node_modules/<u style="text-decoration-style:solid">loader-runner</u>/lib/LoaderRunner.js:214:10)
    at Array.&lt;anonymous&gt; (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/loader-runner@2.4.0/node_modules/<u style="text-decoration-style:solid">loader-runner</u>/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/enhanced-resolve@4.5.0/node_modules/<u style="text-decoration-style:solid">enhanced-resolve</u>/lib/CachedInputFileSystem.js:55:16)
    at /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/enhanced-resolve@4.5.0/node_modules/<u style="text-decoration-style:solid">enhanced-resolve</u>/lib/CachedInputFileSystem.js:91:9
    at /home/tomoyan/my_projects/_js_src/Chart.js/node_modules/<u style="text-decoration-style:solid">.pnpm</u>/graceful-fs@4.2.11/node_modules/<u style="text-decoration-style:solid">graceful-fs</u>/graceful-fs.js:123:16
<font color="#5E5C64">    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)</font> {
  opensslErrorStack: [
    <font color="#26A269">&apos;error:03000086:digital envelope routines::initialization error&apos;</font>,
    <font color="#26A269">&apos;error:0308010C:digital envelope routines::unsupported&apos;</font>
  ],
  library: <font color="#26A269">&apos;digital envelope routines&apos;</font>,
  reason: <font color="#26A269">&apos;unsupported&apos;</font>,
  code: <font color="#26A269">&apos;ERR_OSSL_EVP_UNSUPPORTED&apos;</font>
}

Node.js v20.17.0
/home/tomoyan/my_projects/_js_src/Chart.js/docs:
<span style="background-color:#C01C28"><font color="#171421"> ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL </font></span> <font color="#C01C28">docs@4.0.0-dev dev: `vuepress dev --no-cache`</font>
<font color="#C01C28">Exit status 1</font>
<span style="background-color:#C01C28"><font color="#171421"> ELIFECYCLE </font></span> <font color="#C01C28">Command failed with exit code 1.</font>
</pre></html></WRAP>
</WRAP>

参考: [[git>vuejs/vuepress/issues/3136|Node 19 Error: error:0308010C:digital envelope routines::unsupported · Issue #3136 · vuejs/vuepress · GitHub]]\\
Node.js の OpenSSL レガシープロバイダー オプションを有効にして再実行する😉\\
<WRAP color_term>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#2AA1B3"><b>export</b></font><font color="#999999"> NODE_OPTIONS=--openssl-legacy-provider</font>
</pre></html></WRAP>
<WRAP color_command><html><pre>
<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> r<font color="#999999">un docs:dev</font>
</pre></html></WRAP>
</WRAP>


===== 参考文献 =====
[[https://laracasts.com/discuss/channels/general-discussion/chartjs-and-half-donuts|ChartJS and "half donuts"]]\\

==== 付録 ====
[[tw>tomoyan596sp/status/1579264862232137729|簡単なべろ👅べろ👅ば〜😋グラフ🤤]]\\
[[tw>tomoyan596sp/status/1590550329388830720|これはバームクーヘン？🤔ハーフドーナツ🤤サンプル追加しておきました😊]]\\

xxxxxxxxxx
 
====== 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]]\\ドキュメント: [[https://www.chartjs.org/docs/latest/|Chart.js | Chart.js]]\\サンプル: [[https://www.chartjs.org/docs/master/samples/information.html|Chart.js Samples | Chart.js]]\\​===== 使い方 =====<WRAP jsfiddle><html><style>.dokuwiki .wrap_jsfiddle iframe {    transform: unset;    transform-origin: unset;}</style><iframe width="100%" height="370" 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;