差分

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

--- javascript:chartjs [2024/08/23 09:29] – [ハーフドーナツグラフ] ともやん
+++ javascript:chartjs [2024/08/27 13:46] (現在) – [サンプルアプリケーションをビルドする] ともやん
@@ 行 6: / 行 6: @@
 ソースコード: [[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]]\\
 ===== 使い方 =====
@@ 行 108: / 行 109: @@
 </html></WRAP>
-===== ビルド方法 =====
+===== parcel でサンプルを動かす =====
-[[linux:anyenv#node のインストール|node のインストール - anyenv - rbenv スタイルのオールインワン環境マネージャー]]\\
+==== 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">git</font> clone <font color="#A347BA">--depth</font> 1 https://github.com/chartjs/Chart.js.git
+<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_result><html><pre>
+<WRAP color_mincode><html><pre class=bat><font color="#F8F8F2">{</font>
-Cloning into &apos;Chart.js&apos;...
+<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>
-remote: Enumerating objects: 1890, done.
+<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>
-remote: Counting objects: 100% (1890/1890), done.
+<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>
-remote: Compressing objects: 100% (1501/1501), done.
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
-remote: Total 1890 (delta 506), reused 1350 (delta 373), pack-reused 0 (from 0)
+<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>
-Receiving objects: 100% (1890/1890), 11.70 MiB | 10.65 MiB/s, done.
+<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>
-Resolving deltas: 100% (506/506), done.
+<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">npm</font> install <font color="#A347BA">-g</font> pnpm
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font><font color="#999999"> dev</font>
 </pre></html></WRAP>
 <WRAP color_result><html><pre>
-changed 1 package in 1s
+&gt; chartjs-example@1.0.0 dev /home/tomoyan/my_projects/chartjs-example
+&gt; parcel src/index.html
-package is looking for funding
+<font color="#12488B"><b>Server running at http://localhost:1234</b></font>
-  run `npm fund` for details
+✨ <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">pnpm</font> <font color="#A347BA">-v</font>
+<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>
-.8.0
+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>
@@ 行 210: / 行 327: @@
 </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>
@@ 行 215: / 行 337: @@
 </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>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> run docs:dev
 </pre></html></WRAP>
 <WRAP color_result_hlong><html><pre>
@@ 行 294: / 行 416: @@
 </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"]]\\