【JavaScript】Chart.jsでグラフを描画する【棒グラフ、円グラフ、折れ線グラフ】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: javascript ウェブデザイン 初心者向け スタートアップシリーズ chart.js
インストールとチュートリアル 最新版のCDNなら以下サイトから入手できる https://www.jsdelivr.com/package/npm/chart.js?path=dist とりあえず試したい場合は下記CDNをインストールする。(※一部仕様が現行バージョンと異なるため注意) <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> 続いて、グラフを表示させたい場所に下記、canvasタグを配置。 <canvas id="graph"></canvas> これで準備完了。後は、次項以降のJavaScriptを発動させ、任意のグラフを描画させる。 棒グラフ 公式から拝借。 実行させるJavaScriptが下記。 const ctx = ...