【JavaScript 】Chart.jsで簡単にかわいいグラフをかいてみよう。(きほん)

スポンサーリンク

さんもん芝居

妹

かわいいグラフをかきてぇ・・・

姉

どうした急に。

妹

どのライブラリもすっごい業務的で可愛くない!やるきでない!

姉

妹よ。Chart.jsというかわいいグラフがサクッと表示できちゃうライブラリしっているかね。

Chart.jsとは

jQueryのライブラリであるjqplotなど、
JavaScriptでグラフを書くためのライブラリは多々あります。
が、どれも業務的な色使いでイマイチです。
もちろん、どのライブラリも色は自由に変更できるのでしょうが、
できれば初め(色等のオプション設定を全くしない状態)から、
ある程度かわいいグラフを作りたいものです。
(そうじゃないとテンション上がりません。個人的に。)

 

姉

Chart.jsならたった3行でこんなかわいいグラフが作れるんだ。便利っしょ。

準備

姉

よしじゃぁ、グラフをかくためのHTMLファイルをつくってみて。
各内容は、下のやつをコピっていいから。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chart.js練習</title>
</head>
<body>

</body>
</html>
妹

うい。
かけた。

姉

じゃあ、bodyタグの中にcanvas要素を作って。

姉

chart.jsはキャンバス要素に描画するの。
そして、描画するキャンバスはidを使って指定するのです。
だからここでは、「myChart」というidを指定しているわ。

妹

なるほどな。

Chart.jsを読み込む

姉

Chart.jsはライブラリだから、読み込んで使ってあげないと、使えない。
読み込む方法も私が知ってる限りでは2通りあって、
1:ライブラリファイルをダウンロードして、
  インストールして適切な場所にファイルを置いて使う。
2: CDNから読み込むためのコードを1行だけ書く。
今回は簡単な2の方法にするわ。

妹

1の方法の書き方に悪意を感じる。

姉

ということでこの読み込み文をcanvas要素の下に書いてみて。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script> 

グラフを描画する

姉

もうあとは、描画するための処理をゴリゴリ書くだけ。
といっても1つ処理を書くだけだけどね。


<script>
var ctx = document.getElementById('myChart'); // 描画するCanvasを取得する
// 描画処理
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'line', // 線グラフ
// データセットのデータ
data: {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // 凡例
datasets: [{
label: "寝坊の推移", // データの名前
data: [8, 2, 5, 2, 9, 13, 9], // それぞれの月のデータ
}]
},
// ここに設定オプションを書きます
options: {}
});
</script>
姉

最終的にはこんな感じのコードになってるはず。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chart.js練習</title>
</head>
<body>
<canvas id = "myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<script>
var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'line', // 線グラフ
// データセットのデータ
data: {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // 凡例
datasets: [{
label: "寝坊の推移", // データの名前
data: [8, 10, 5, 2, 20, 13, 9], // それぞれの月のデータ
}]
},
// ここに設定オプションを書きます
options: {}
});
</script>
</body>
</html>

では実行してみましょう。

妹

うわ、画面いっぱいにグラフが表示されてる。そしてグレー。
カラフルじゃないけどクールオシャレ。

姉

まぁ、とくに何も指定してないからね。

姉

とにかく、こんなに簡単にグラフが描けちゃうChart.jsってすごいわね。

妹

それ私が言わなあかんやつ。

 


タイトルとURLをコピーしました