今回の記事を読んでいただくと役に立つと思われる方
本記事はWEB上でグラフを綺麗に表現したいと考えている方を対象としています。
ただし、自分でガリガリとプログラムを書くというよりは、表現方法としてどのようなものがあるかを調査している方に参考になると思います。
また、技術的スキルとしては HTML / JavaScript / CSS について、どのようなものかの概要を把握されている方が対象となります。
※自分で直接プログラムの記述やコーディングをしている必要はありません
直接自分でプログラムや HTML / JavaScript等を記載したい方は、本記事内で紹介はしませんので、各JavaScriptライブラリサイトをご参照ください。
※記事内で各 JavaScript ライブラリサイトへリンクしています
また、弊社で WEB 上でグラフ・チャートを可視化するための支援を行っておりますので、本記事をご覧いただきご興味を持っていただいた方は お問い合わせくださいませ。
本記事の概要
特定のデータを可視化するための方法・ツールは数多有り、データ量、データ保存方法、目的などに合わせて選択する必要があります。
まず始めに、データを可視化するまでには大まかに以下のような手順が必要となります。
| 手順 | 内容 |
|---|---|
| １ | データ収集 |
| ２ | データ整形 |
| ３ | データ集計、分析 |
| ４ | 集計、分析結果を可視化 |
上記各々について、特化したツール、サービス、複数の要素をカバーできるツール、サービスなどが沢山あります。データ量や予算、目的に合わせて選択していくことになります。
例えば、Tableauというサービスの場合、上記「３」と「４」をカバーしていて、「４」はデスクトップツールで行いますし、Domoというサービスは、上記「１」と「３」と「４」をカバーしていて、「４」は WEB ブラウザ上で専用の管理画面上で行います。
当然予算なども大きく違ってきますし、利用シーンも大きく変わってくるため、目的や予算を定め選定していくことが必要となります。
その中で今回は上記「4」に特化し、かつ特定のデータをWEB上でグラフ・チャートを描画・可視化してくれるJavaScriptライブラリを紹介いたします。
つまり上記「1」～「3」までは別で行い、集計・分析された結果が既に存在している前提で、その結果をWEB上で描画・可視化をしてくれるものとなります。
WEB上で特定のデータをグラフ・チャートに描画や可視化するということは、ブラウザが入っているPC・スマートフォンがあれば閲覧できるため、より多くの人に簡単に見てもらえることになります。
JavaScriptライブラリのメリット
WEB上でグラフを表現する方法として、今までよく使われていたのはエクセルでグラフを作り、それを画像としてWEB上で展開するという方法でした。
しかし今回紹介するJavaScriptライブラリを利用することで、以下の様なメリットがあります。
| メリット | 内容 |
|---|---|
| インタラクティブ性の向上 | 自分で見たい内容にその場でグラフを動かすことができる |
| 閲覧性の向上 | JavaScriptで描画するため、ブラウザサイズに合わせて可変させることが可能 |
| デザイン性の向上 | エクセルのグラフよりも綺麗で見やすい |
JavaScriptライブラリの紹介
WEB上でグラフ・チャートを描画し可視化してくれるJavaScriptライブラリはたくさんあります。主要なもの以下に紹介、比較掲載いたします。
以下に比較した内容を掲載いたします。
比較項目と内容
| 名前 | デザイン性 | グラフ種類 | レスポンシブ対応 | 価格 |
|---|---|---|---|---|
| ライブラリ名称 | チャートの綺麗さ | 対応できるグラフ数 | ブラウザ幅の変化への対応 | 商用利用時の費用 |
各JavaScriptライブラリの比較
| 名前 | デザイン性 | グラフ種類 | レスポンシブ対応 | 価格 |
|---|---|---|---|---|
| HighCharts | ◎ | ◯ | 可 | 有償 |
| d3 | ◯ | ◎ | 不可 | 無償 |
| chart.js | ◯ | ◯ | 可 | 無償 |
| Google Chart Tools | △ | ◯ | 可 | 無償 |
各JavaScriptライブラリの特徴
| 名前 | 特徴 |
|---|---|
| HighCharts | デザイン性が突出している。しかし費用が高い。 |
| d3 | グラフ描画ツール、というよりはデータビジュアライゼーションツールという向きがある。３Dやアニメーション含め様々な表現が可能。 |
| chart.js | 全てで平均的といえる |
| Google Chart Tools | デザインはエクセルのグラフのようで少し劣るが、グラフと表を連動して同時に表示する機能(※1)やフィルター機能(※2)などは、特筆すべき機能と言える。 |
※1：サンプル
以下は同じデータで表とグラフを作成したものです。
詳細は以下サイトを参照ください。
参考サイト：http://yohshiy.blog.fc2.com/blog-entry-204.html
※2：サンプル
以下は数値範囲でフィルタリングするサンプルです。
スライダーで数値範囲を指定します。 この数値範囲に表示項目をフィルタリングしています。
詳細は以下サイトを参照ください。
参考サイト：http://yohshiy.blog.fc2.com/blog-entry-205.html
HightCharts の紹介
今回は、弊社でもクライアントに提案や実装したサイト構築のお手伝いをすることが多い「HighCharts」について、簡単にご紹介いたします。
「HighCharts」は上記比較表にもあるように、とてもデザイン性にすぐれた描画をしてくれる JavaScript ライブラリです。
是非以下のデモ画面をご覧いただき、気になったグラフやチャートを見てみてください。
また、例えば、以下はサンプルとしてこのサイトに表示したものです。
横のラベルの「Tokyo」や「New York」などをクリックすると非表示にでき、見たいデータだけに絞り込むなどサイト上でのインタラクティブ性に優れています。
実現方法を簡単に触れると、以下の JavaScript 記載をしています。
また、グラフやチャートを表示したい箇所に以下のようなタグを入れてあげることで実現することができます。
他にもたくさんのグラフやチャートパターンがあり、それらが比較的簡単に、綺麗に WEB上で表現できるため、非常に便利なツールの一つといえます。
ただ、そんな便利な HighCharts ですが他の JavaScript ライブラリと較べて２つ、デメリットがあります。
■■HighCharts のデメリット１：費用■■
比較表に記載したとおり、HighChart は他の JavaScript ライブラリと違い、商用利用には費用がかかってきます。
ウェブアプリではないシンプルな HTML での利用で９０ドルです。
ウェブアプリ利用になると５９０ドル程度になります。
ライセンスや費用の詳細は こちら に記載されていますので、事前に必ず確認するようにしましょう。
■■HighCharts のデメリット２：日本語ドキュメントが少ない■■
他のライブラリに比べて、日本語のドキュメントが非常に少ないです。いくつか個人の方などで試した内容等をまとめてくれているサイトはありますが、そのまま実装しても上手く動かない、等があります。
そのため基本的には HighCharts のサイト上で英語ドキュメントを見ながらの実装となります。
以上をご覧になり、ご興味をお持ちの方は是非 お問い合わせくださいませ。
