
鮮やかなグラフを簡単に描画!JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方
グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。
しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。
そこで今回は、グラフやチャートをJavaScriptで動的に生成することができるChat.jsを紹介します。
Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。
Chart.jsとは?
Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミックに表示することができるJavaScriptライブラリです。
同じようにグラフを作成できるJavaScriptライブラリとしてはD3.jsが有名です。
D3.jsは複雑なグラフやチャートを描画できる反面、グラフの描画処理を自身で実装しなければならないので、JavaScript初心者から中級者にとっては「難しい」と感じてしまうようです。
Chart.jsはD3.jsのような複雑なデータビジュアリゼーションを表示することはできませんが、グラフやチャートの作成に特化しているので、初心者にも簡単に扱えるという点がメリットだと言えます。
Chart.jsの特徴
Chart.jsには簡単に扱えるシンプルさはもちろんのこと、次のような特徴があります。
1. 豊富なチャートタイプ
様々な種類のチャート描画に対応しています。
・ 折れ線グラフ
・ 棒グラフ
・ レーダーチャート
・ 極性面グラフ (鶏頭図)
・ 円グラフ・ドーナツ型チャート
・ バブルチャート
2. レスポンシブ対応
ウィンドウがリサイズされると、Chart.jsはグラフやチャートを再描画して、ウィンドウサイズに合わせてくれます。
3. 混合チャート
棒グラフと折れ線グラフなど、複数のグラフを見やすく表示することができます。
4. トランジション・アニメーション対応
データや色を変更したり、新たなデータセットを追加したら、アニメーション効果でふわりと変化していきます。
Chart.jsの基本的な使い方
Chart.jsの使い方は極めてシンプルです。
HTML側で描画する範囲をカンバス(canvas)として作成し、JavaScript側でグラフデータ(lineChartData)とグラフ全体にオプション(option)を設定するだけです。
ドーナツ型チャートを例にしてグラフ作成の手順を確認していきましょう。
1. HTML Canvasを用意
まずは、HTML側でライブラリを読み込み、カンバス(canvas)を用意します。
<!--Chart.jsの読み込み -->
<script src="chart.js"></script>
<!--描画領域 -->
<canvas id="mycanvas" height="450" width="800"></canvas>
2. JavaScriptでデータを用意
次に、JavaScript側でデータを用意します。まずはサンプルコードをご覧ください。
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
各要素の解説は、次のとおりです。
value : ドーナツ型チャートの割合となる数値を指定します。
color : チャートの色を指定します。
highlight : マウスカーソルを合わせた時に変化するホバーの色を指定します。
label : 凡例となるラベルを指定します。
3. JavaScriptでオプションの設定
次に、JavaScript側でグラフの表示オプションを設定します。
「getElementById」の部分にcanvasのidを指定します。
var myChart = new Chart(document.getElementById("mycanvas").getContext("2d")).Doughnut(data);
完成
これらを適切に指定することで、次のようなドーナツ型チャートを作ることができました。
See the Pen ygVZBK by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
棒グラフやレーダーチャートなども、同じ要領で作成することができます。
ぜひ試してみてください。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング