Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. 鮮やかなグラフを簡単に描画!JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方
  1. action
  2. URLをコピーしました

鮮やかなグラフを簡単に描画!JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方

  • 2017年1月26日
  • ニュース

グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。

しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。

そこで今回は、グラフやチャートを JavaScript で動的に生成することができるChat.jsを紹介します。

Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。
  

Chart.jsとは?

chartjs.png http://www.chartjs.org

Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミックに表示することができる JavaScript ライブラリです。

同じようにグラフを作成できる JavaScript ライブラリとしてはD3.jsが有名です。
D3.jsは複雑なグラフやチャートを描画できる反面、グラフの描画処理を自身で実装しなければならないので、 JavaScript 初心者から中級者にとっては「難しい」と感じてしまうようです。

Chart.jsはD3.jsのような複雑なデータビジュアリゼーションを表示することはできませんが、グラフやチャートの作成に特化しているので、初心者にも簡単に扱えるという点がメリットだと言えます。
  

Chart.jsの特徴

charts.jpg

Chart.jsには簡単に扱えるシンプルさはもちろんのこと、次のような特徴があります。
  

1. 豊富なチャートタイプ

様々な種類のチャート描画に対応しています。

・ 折れ線グラフ
・ 棒グラフ
・ レーダーチャート
・ 極性面グラフ (鶏頭図)
・ 円グラフ・ドーナツ型チャート
・ バブルチャート

  

2. レスポンシブ対応

ウィンドウがリサイズされると、Chart.jsはグラフやチャートを再描画して、ウィンドウサイズに合わせてくれます。
  

3. 混合チャート

棒グラフと折れ線グラフなど、複数のグラフを見やすく表示することができます。
  

4. トランジション・アニメーション対応

データや色を変更したり、新たなデータセットを追加したら、アニメーション効果でふわりと変化していきます。
  

Chart.jsの基本的な使い方

htmljava.png

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.

棒グラフやレーダーチャートなども、同じ要領で作成することができます。
ぜひ試してみてください。
  

公式ドキュメントはこちら

Chart.jsではドキュメントが用意されており、ドキュメントに書かれている細かい設定を施すことで、さらに複雑なグラフを作成することができます。

公式ドキュメント:http://www.chartjs.org/docs/
  

まとめ

今回は、Chart.jsを使ったグラフ・チャートの作り方を解説していきました。
エクセルを使ってグラフを作成して図として保存するのも一つの方法ですが、Chart.jsを使えば非常に軽量で動的なグラフを簡単に作成することができます。

JavaScript さえ扱うことができれば、スクロールしたらグラフが登場する、といった複雑な動作も実装することができます。
オプションの指定で自由にカスタマイズできるので、幅広いデザインに柔軟に対応してくれそうです。
  

関連記事

  • SVGにも対応!滑らかな動きを実現するモーションライブラリ11選
  • 【全て無料】業務効率・生産性を向上させる!国内外のオンラインクラウドサービス60選
  • ホームページにアニメーションを実装するライブラリ&プラグイン12選
  • 個性的なデザインの参考に!ユニークなレイアウトのホームページ18選
  • こんなにあるの!?空きスペースを活用したサービス50選

関連記事

  • SVGにも対応!滑らかな動きを実現するモーションライブラリ11選
  • 【全て無料】業務効率・生産性を向上させる!国内外のオンラインクラウドサービス60選
  • ホームページにアニメーションを実装するライブラリ&プラグイン12選
  • 個性的なデザインの参考に!ユニークなレイアウトのホームページ18選

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

関連キーワード

  • JavaScript (35)

この記事を書いた人

酒井 涼

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
  
>> 執筆記事一覧はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

SFAの導入"失敗"事例とその理由

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

SaaSの意味とは?何ができる?有名ツールも紹介

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

現会員425,432人

ログインはこちら

おすすめ記事

SVGにも対応!滑らかな動きを実現するモーションライブラリ11選

【全て無料】業務効率・生産性を向上させる!国内外のオンラインクラウドサービス60選

ホームページにアニメーションを実装するライブラリ&プラグイン12選

個性的なデザインの参考に!ユニークなレイアウトのホームページ18選

こんなにあるの!?空きスペースを活用したサービス50選

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら