差分

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

--- javascript:chartjs [2024/08/27 12:31] – [ビルド方法] ともやん
+++ javascript:chartjs [2024/08/27 13:46] (現在) – [サンプルアプリケーションをビルドする] ともやん
@@ 行 116: / 行 116: @@
 ==== サンプルアプリケーションをビルドする ====
 公式: [[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>
@@ 行 122: / 行 123: @@
 <font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <font color="#999999">package.json</font>
 </pre></html></WRAP>
-<WRAP color_mincode><code javascript>
+<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>
-  "name": "chartjs-example",
+<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>
-  "version": "1.0.0",
+<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>
-  "license": "MIT",
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
-  "scripts": {
+<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>
-    "dev": "parcel src/index.html",
+<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>
-    "build": "parcel build src/index.html"
+<font color="#F8F8F2">  },</font>
-  },
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;devDependencies&quot;</font><font color="#F8F8F2">: {</font>
-  "devDependencies": {
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;parcel&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^2.6.2&quot;</font>
-    "parcel": "^2.6.2"
+<font color="#F8F8F2">  },</font>
-  },
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;dependencies&quot;</font><font color="#F8F8F2">: {</font>
-  "dependencies": {
+<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>
-    "@cubejs-client/core": "^0.31.0",
+<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>
-    "chart.js": "^4.0.0"
+<font color="#F8F8F2">  }</font>
-  }
+<font color="#F8F8F2">}</font>
-}
+</pre></html></WRAP>
-</code></WRAP>
 </WRAP>
+<html><code>pnpm install</code></html> を実行して依存関係をインストールする...🤔\\
 <WRAP color_term>
 <WRAP color_command><html><pre>
@@ 行 163: / 行 164: @@
 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>