【Chart.js入門】使い方まとめ

この記事では、Javascriptライブラリ「Chart.js」でグラフ・チャートを描く方法をサンプルコード付きでまとめました。

直線グラフ

Chart.jsとは、Canvasを利用してグラフを描画することができます。
主な特徴は次のとおりです。

・記述が他のライブラリに比べて簡単
・折れ線グラフ、棒グラフ、円グラフ、レーダチャート、パイチャートなどを描画可能
・アニメーション機能付き

Chart.jsの使い方を以下にまとめました。

グラフ描画

項目
折れ線 基本, 色設定, 線の設定, 面を非表示
棒グラフ 基本
円グラフ 基本, ドーナッツ型
レーダーチャート 基本
全般設定 グリッド・軸ラベル・目盛, アニメーション無効化

応用例

項目
ファイル CSVデータをグラフ化

関連記事

Javascript入門

シェア&フォローお願いします!