Chart.js入門 (全10回)
JavaScriptで綺麗なグラフを描画することができるChart.jsについて学習していきます。
このレッスンでは Chart.js 2.7.1 を使用しています。
-
#01 Chart.jsを使ってみよう (02:31)
- Chart.jsの概要
- 公式サイトの確認
- index.htmlの作成
-
#02 描画の準備をしていこう (02:20)
- Chart.jsの読み込み
- 描画処理の準備
-
#03 折れ線グラフを描画しよう (02:04)
- 折れ線グラフの描画
- データの追加
- 動作確認
-
#04 軸の設定を変えてみよう (02:54)
- 軸の範囲設定
- 刻み値の設定
- callbackの設定
-
#05 タイトルや凡例の設定をしよう (02:06)
- タイトルの設定
- アニメーション設定
- 凡例の設定
-
#06 折れ線のスタイルを変えてみよう (02:23)
- borderColor
- borderWidth
- fill
- lineTension
- pointStyle
-
#07 棒グラフを作ってみよう (02:23)
- 棒グラフの描画
- スタイルの変更
-
#08 混合グラフを描画しよう (02:57)
- 折れ線グラフの描画
- 縦軸の設定変更
-
#09 レーダーチャートを作ってみよう (02:52)
- レーダーチャートの描画
- 軸の設定変更
-
#10 円グラフを作ってみよう (02:07)
- 円グラフの描画
- ドーナツグラフの描画
補足情報 必要となる知識について
今回のレッスンについては以下も参考にしてみてください。
・JavaScript入門 (全24回)
https://dotinstall.com/lessons/basic_javascript_v2