差分

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

--- javascript:chartjs [2024/08/23 12:36] – [Performant NPM でプロジェクトの依存関係をインストールする...🤔] ともやん
+++ 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 スタイルのオールインワン環境マネージャー]]\\
-**Chart.js のソースコードをクローンする...🤔**\\
+==== 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>
-**Performant NPM をグローバル インストールする...🤔**\\
+<html><code>pnpm install</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> 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>
-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>
@@ 行 213: / 行 327: @@
 </WRAP>
-==== Chart.js ドキュメントを実行する...🤔 ====
+**Chart.js ドキュメントを実行する...🤔**\\
 Node.js の OpenSSL レガシープロバイダー オプションを有効にして pnpm で実行する😉\\
 Node.js 17 では webpack v4 が使用する openssl 標準が非推奨になったので、これが修正されるまでは OpenSSL レガシープロバイダー オプションを有効にすることで回避する😊\\