Chart.js入門

JavaScriptで綺麗なグラフを描画することができるChart.jsについて学習していきます。

#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)
- 円グラフの描画
- ドーナツグラフの描画

2018年2月8日

今回のレッスンについては以下も参考にしてみてください。

3分動画でマスターできるプログラミング学習サービスです。

ドットインストール - 3分動画でマスターできるプログラミング学習サービス