Javascriptライブラリ「Chart.js」でグラフ・チャートを描く方法をサンプルコード付きでまとめました。
直線グラフ
Chart.jsとは、Canvasを利用してグラフを描画することができます。
主な特徴は次のとおりです。
・記述が他のライブラリに比べて簡単
・折れ線グラフ、棒グラフ、円グラフ、レーダチャート、パイチャートなどを描画可能
・アニメーション機能付き
Chart.jsの使い方を以下にまとめました。
グラフ描画
| – | 項目 |
|---|---|
| 折れ線 | 基本, 色設定, 線の設定, 面を非表示 |
| 棒グラフ | 基本 |
| 円グラフ | 基本, ドーナッツ型 |
| レーダーチャート | 基本 |
| 全般設定 | グリッド・軸ラベル・目盛, アニメーション無効化 |
応用例
| – | 項目 |
|---|---|
| ファイル | CSVデータをグラフ化 |
関連ページ
【Javascript入門】基礎的な使い方とサンプル集
入門者向けにJavascriptの基本文法やサンプルプログラムを解説しています。
web.joho.info
2024.07.04