対象者
- グラフを使ってデータ分析したい
- グラフのカスタマイズ機能やフィルター機能など目一杯使いたい
- javascript 応用者
グーグルチャートについて
グーグルチャートについては、こちら の記事にまとめておりますのでご覧ください。
今回は、グーグルチャートには実はこういった便利機能がある!という紹介なので、
使い方について、こちらの記事では言及していません。
気になったものがあれば公式ドキュメントをご覧ください。
グーグルスプレッドシートを活用したグーグルチャートの使用方法
日本語訳
GoogleChartsとGoogleSpreadsheetsは緊密に統合されています。
GoogleチャートをGoogleスプレッドシート内に配置すると、GoogleチャートはGoogleスプレッドシートからデータを抽出できます。
このドキュメントは、両方を行う方法を示しています。
どちらの方法を選択しても、基になるスプレッドシートが変更されるたびにグラフが変更されます。
グーグルチャートの印刷方法
Google Chartsは、ブラウザから直接印刷することも、JavaScriptからprint()関数を介して印刷することもできます。チャートのPNG画像へのアクセスを提供する場合は、このgetImageURI()方法を使用できます 。
グラフの色や3Dグラフなどのグラフカスタマイズ方法
チャートは通常、その視覚化に適したカスタムオプションをサポートしています。
たとえば、表グラフはsortColumnデフォルトの並べ替え列を指定するオプションをサポートし、円グラフの視覚化はcolorsスライスの色を指定できるオプションをサポートします。
各チャートのドキュメントには、サポートするオプションが記載されている必要があります。
y軸x軸のカスタマイズ方法について
軸を使用してグラフを作成する場合、それらのプロパティの一部をカスタマイズできます。
グラフの線をカスタマイズする方法
面積グラフ、線グラフ、コンボグラフなど、一部のGoogleグラフには、データポイントを結ぶ線があります。このページの手法を使用して、線の色、太さ、および破線をカスタマイズできます。
グラフの上に要素をつける方法(オーバーレイ)
オーバーレイは、Googleのチャートの上に置かれた領域です。これは通常、特定の統計を呼び出すために使用されますが、HTMLとCSSだけなので、好きなものにすることができます。
簡単な使用法には、CSSクラスを作成し、それをHTMLで参照することが含まれます。JavaScriptは必要ありません。より高度な使用法には、GoogleChartsを使用してオーバーレイの位置とコンテンツをカスタマイズすることが含まれます。
グラフのポイントを変更する方法
多くのGoogleグラフでは、データ値は正確なポイントに表示されます。折れ線グラフは、線で接続されたこれらのポイントのセットであり、散布図はポイントにすぎません。
散布図を除くすべてのグラフで、これらのポイントはデフォルトでゼロサイズになっています。pointSize オプションでサイズを制御でき、pointShape オプションで形状を制御できます。
ツールチップのカスタマイズ方法
ツールチップは、何かにカーソルを合わせるとポップアップする小さなボックスです。(ホバーカードはより一般的で、画面のどこにでも表示できます。ツールチップは、散布図のドットや棒グラフの棒など、常に何かに添付されます。)
このドキュメントでは、GoogleChartsでツールチップを作成およびカスタマイズする方法を学習します。
フィルター機能や他のグラフと連携させて動的にする方法
このページでは、複数のグラフをダッシュボードに組み合わせて、表示するデータを操作するためのコントロールをユーザーに提供する方法を説明します。
ダッシュボードは、同じ基になるデータを共有する複数のグラフをまとめて管理するための簡単な方法です。このページで説明されているAPIを使用することで、ダッシュボードの一部であるすべてのグラフを相互に接続して調整する負担から解放されます。
その他 ツールバー
ツールバー要素を任意のビジュアライゼーションに追加して、ユーザーが基になるデータをCSVファイルまたはHTMLテーブルにエクスポートできるようにしたり、ビジュアライゼーションを任意のWebページまたはガジェットに埋め込むためのコードを提供したりできます。
まとめ
グーグルチャートには、豊富なオプションと便利な機能がついていますね…。
使い方が難しいものもありますが、一度使いこなせるとデータ分析もしやすくなると思いますのでぜひ。