ローカルでchart.jsのサンプルをいじれるようにする

jsのグラフ描画ライブラリで人気のあるchart.js。

動きをみるだけなら公式サイトのサンプル一覧でいろんなパターンのグラフが確認できます。

https://www.chartjs.org/samples/latest/

グラフを描画するサイトを作ってみようと考えておりまして、ローカル環境でサンプルをいじれるようにしたので、その手順を紹介したいと思います。

リポジトリのclone
依存moduleのインストール
chart.jsのビルド
ローカルのサンプルが動かしてみる

リポジトリのclone

まずはリポジトリのclone ＆ dive

$ git clone https://github.com/chartjs/Chart.js.git
$ cd Chart.js

依存moduleのインストール

ローカル環境にはnode, および npm をインストールしておらず、dockerで動かすようにしているので、最低限の dokcer-compose.ymlを記述。

version: '3'
services:
  node:
    image: 'node:13.10'
    volumes:
      - .:/chart.js
    tty: true

docker-composeでコンテナ起動して、name確認

$ docker-compose up -d
$ docker-compose ps
     Name                 Command            State   Ports
----------------------------------------------------------
chartjs_node_1   docker-entrypoint.sh node   Up

コンテナに入って、依存モジュールのインストール

$ docker exec -it chartjs_node_1 bash
$ cd chart.js
$ npm i

下記メッセージがでたので、

found 443 vulnerabilities (340 low, 63 moderate, 40 high)
  run `npm audit fix` to fix them, or `npm audit` for details

指示通りコマンド実行

$ npm audit fix

chart.jsのビルド

サンプルのHTMLは Chart.js/samples に入っているのですが、動かすにはchart.jsをビルドする必要があるので、ビルドします。

$ npx gulp build

するとサンプルを動かすのに必要なファイルが出力されます。

$ ls -la dist/
total 1048
drwxr-xr-x  2 root root   4096 Apr 21 13:54 .
drwxr-xr-x 11 node node   4096 Apr 21 13:54 ..
-rw-r--r--  1 root root 327720 Apr 21 13:54 Chart.esm.js
-rw-r--r--  1 root root 153245 Apr 21 13:54 Chart.esm.min.js
-rw-r--r--  1 root root 396481 Apr 21 13:54 Chart.js
-rw-r--r--  1 root root 178512 Apr 21 13:54 Chart.min.js