目次
Google Chart tools – 概要
Google ChartsはJavaScriptに基づいたグラフライブラリであり、インタラクティブなグラフ関数を追加することでWebアプリケーションを強化します。多いのチャートをサポートします。 チャートは、Chrome、Firefox、Safari、Internet Explorer(IE) などの標準ブラウザでSVGを使用して描画されます。古いバージョンの IE 6では、VMLを使用してグラフィックを作ります。
特徴
以下のは、Google Chartsライブラリの主な特徴です。
- 互換性– すべての主要なブラウザとモバイルプラットフォーム(AndroidやiOSなど)でシームレスに実行されます。
- マルチタッチサポート– マルチタッチは、タッチスクリーンベースのプラットフォーム(AndroidやiOSなど)でサポートされています。iPhone/iPadおよびAndroidに基づいたスマートフォン/タブレットに非常に適しています。
- 無料で使用– オープンソースであり、非営利目的で無料で使用できます。
- 軽量– loader.jsコアライブラリは、非常に軽量なライブラリです。
- 単純な構成– jsonを使用して、チャートのさまざまな構成を定義します。これは、理解しやすくて、使用が非常に簡単です。
- 動的– チャートが生成されても、チャートも変更できます。
- 多軸– x、y軸に限定されません。チャート上の複数の軸をサポートします。
- 構成可能なツールチップ– ユーザーがチャート上の任意のポイントにマウスを合わせると、ツールチップが表示されます。 googlechartsは、ツールチップをプログラムで制御するためのツールチップ組み込みフォーマッターまたはコールバックフォーマッターを提供します。
- 日付と時刻のサポート– 特に日付と時刻を処理します。日付ごとのカテゴリに多数の組み込みコントロールを提供します。
- 印刷– Webページを使用してチャートを印刷します。
- 外部データ– サーバーからのデータの動的ロードをサポートします。コールバック関数を使用して、データを制御します。
- テキストの回転– ラベルを任意の方向に回転することをサポートします。
サポートされているチャートの種類
Google Chart Libraryは、以下のチャートを提供します。
Sr.No. | チャートの種類と説明 |
1 | Line Charts 線/スプラインに基づいたチャートを作るために使用されます。 |
2 | Area Charts エリアごとのチャートを作るために使用されます。 |
3 | Pie Charts 円グラフを作るために使用されます。 |
4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 散布図を作るために使用されます。 |
5 | Bubble Charts バブルに基づいたチャートを作るために使用されます。 |
6 | Dynamic Charts 動的なチャートを作るために使用され、ユーザーがチャートを変更できます。 |
7 | Combinations さまざまなチャートの組み合わせを作るために使用されます。 |
8 | 3D Charts 3Dチャートを作るために使用されます。 |
9 | Angular Gauges スピードメータータイプのチャートを作るために使用されます。 |
10 | Heat Maps ヒートマップを作るために使用されます。 |
11 | Tree Maps 樹形図を作るために使用されます。 |
次の記事では、上記の各種類のチャートについて例を挙げて詳しく説明します。
ライセンス
Google Chartsはオープンソースであり、無料で使用できます。 リンクをクリックします:利用規約。
Google Charts – 環境設定
この記事では、Webアプリケーション開発用にGoogle Chartsライブラリを設定する方法について説明します。
Google Chartsをインストールする
Google Chartsを使用するには2つの方法があります。
- ダウンロード– https://developers.google.com/chartからローカルにダウンロードして使用します。
- CDNアクセス– CDNにアクセスできます。 CDNを使用すると、世界各地のデータセンターにアクセスでき、この場合はGoogle Chartをホスティングします。https://www.gstatic.com/charts。
ダウンロードされたGoogleチャートを使用する
以下のスクリプトを使用して、HTMLページにgooglecharts JavaScriptファイルを含めます–
<head>
<script src = "/googlecharts/loader.js"></script>
</head>
CDNを使用する
このチュートリアルでは、CDNバージョンのGoogle Chart ライブラリを使用しています。
以下のスクリプトを使用して、Google Chart JavaScriptファイルをHTMLページに含めます–
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>
Google Charts – 構成構文
この記事では、Google Chart APIを使用してチャートを作るために必要な構成を示します。
ステップ1:HTMLページを作成する
Google Chartライブラリを使用してHTMLページを作成します。
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
コンテナdivは、 Google Chartライブラリを使用して作成されたチャートを格納するために使用されます。ここでは、google.charts.loadメソッドを使用して、最新バージョンのcorecharts APIを読み込みます。
ステップ2:構成を作成する
Google Chartライブラリは、json構文を使用した非常に単純な構成を使用します。
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
ここで、dataはjsonデータを表し、optionsはGoogle Chartライブラリがdraw()メソッドによって作られ、コンテナーdivを含むチャートの構成を表します。次に、さまざまなパラメータを構成して、必要なjson文字列を作成します。
タイトル
チャートを作るオプション
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};
データシート
チャートに表示されるデータを構成します。 DataTableは、グラフのデータを含む特別なテーブル構造の集合です。 データテーブルの列は例を表し、行は対応するデータを表します。addColumn()メソッドは、列を追加するために使用されます。最初のパラメータはデータ型を示し、2番目のパラメータは例を示します。addRows()メソッドは、それに応じて行を追加するために使用されます。
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
ステップ3:チャートを作る
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
実例
以下は完全な実例です–
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
次のコードは、Google Chartライブラリが完全に読み込まれた後、drawChart関数を呼び出してチャートを作ります。
google.charts.setOnLoadCallback(drawChart);
Google チャート – 面グラフ
面グラフは、面積に基づいたグラフを作るために使用されます。この章では、以下のエリアに基づいたグラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Area 基本的な面グラフです。 |
2 | Area with negative values 面グラフには負の値があります。 |
3 | Stacked area エリアが互いに積み重ねられたチャートです。 |
4 | Percentage area パーセンテージで表示されたデータチャートです。 |
5 | Area with missing points データ内の欠落した値のチャートです。 |
6 | Inverted axes 逆軸を使用するエリアです。 |
Google チャート – 棒グラフ
棒グラフは、棒に基づいたチャートを作るために使用されます。この章では、以下の棒グラフに基づいたチャートについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Bar 基本的な棒グラフです。 |
2 | Grouped Bar Chart グループ化された棒グラフです。 |
3 | Stacked Bar 棒グラフには、積み重ねられた棒グラフがあります。 |
4 | Negative Stacked bar 負のスタックがある棒グラフです。 |
5 | Percentage Stacked bar パーセンテージデータを含む棒グラフです。 |
6 | Material Bar Chart マテリアルデザインに触発された縦棒グラフです。 |
7 | Bar Chart with data labels データラベル付きの棒グラフです。 |
Google Charts – バブルチャート
バブルチャートは、バブルに基づいたチャートを作るために使用されます。この章では、以下のバブルに基づいたチャートについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Bubble 基本的なバブルチャートです。 |
2 | Bubble chart with data labels データラベル付きのバブルチャートです。 |
Google Charts – ガントチャート
ガントチャートは、長期間(数か月や数年など)のカレンダーを作るために使用されます。 この章では、以下の日付に基づいたガントチャートについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Calendar 基本的なガントチャートです。 |
2 | Calendar with customized colors カスタムガントチャートです。 |
Google Charts – ローソク足(株価)チャート
ローソク足(株価)チャートは、始値と終値の値の差を示すために使用され、通常は株式を表すために使用されます。この章では、ローソク足(株価)に基づく次のチャート種類について説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Candlestick 基本的なローソク足チャートです。 |
2 | Candlestick with customized colors カスタマイズされたローソク足チャートです。 |
Google Charts – 棒グラム
棒グラムは、棒に基づいてグラフを作るために使用されます。 この章では、以下の列に基づいたグラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Column 基本的な棒グラムです。 |
2 | Grouped Column グループ化された棒グラムです。 |
3 | Stacked Column 棒グラムの棒グラムは互いに積み重ねられています。 |
4 | Negative Stacked Column 負のスタック付きの棒グラムです。 |
5 | Percentage Stacked Column パーセンテージデータの棒グラムです。 |
6 | Material Column Chart マテリアルデザインに触発された棒グラムです。 |
7 | Column Chart with data labels データラベル付きの棒グラムです。 |
Google Charts – 組み合わせチャート
組み合わせチャートは、各シリーズを以下の異なるマーカータイプとして表示するのに役立ちます:線、領域、バー、ローソク足、および階段状領域。 シリーズにデフォルトのマークタイプを割り当てるには、seriesType属性を使用します。 シリーズ属性は、各シリーズの属性を個別に指定するために使用されます。 このグラフを作るために使用される設定は、Google Charts Configuration Syntaxの記事にあります。次には、完全な実例をご覧ください。
構成
ComboChart
クラスを使用して、組み合わせグラフを表示します。
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));
実例
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Google Charts – ヒストグラム
ヒストグラムは、数値データをバケットにグループ化し、バケットをセグメント化された列として表示するグラフです。それらは、値が範囲内に入る頻度としてデータセットの分布を説明するために使用されます。Google Chartsは、バケットの数を自動的に選択します。すべてのバケットの幅は同じで、高さはバケット内のデータポイントの数に比例します。 ヒストグラムは、他の点ではヒストグラムと似ています。 このセクションでは、次のヒストグラムに基づいたグラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Histogram 基本的なヒストグラムです。 |
2 | Controlling Color ヒストグラムのカスタムカラーです。 |
3 | Controlling Buckets カスタマイズされたヒストグラムバケットです。 |
4 | Multiple Series 複数のシリーズのヒストグラムです。 |
Google Charts – 折れ線グラフ
折れ線グラフは、線に基づいたグラフを作るために使用されます。この章では、以下の折れ線グラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic line 基本的な折れ線グラフです。 |
2 | With visible points データポイントが表示されたグラフです。 |
3 | Customizable background color カスタム背景色付きのグラフです。 |
4 | Customizable line color 線の色がカスタムされるグラフです。 |
5 | Customizable axis and tick labels カスタム軸と目盛りラベル付きのグラフです。 |
6 | Crosshairs 折れ線グラフは、選択したデータポイントの十字線を示します。 |
7 | Customizable line style カスタムの線の色付きのグラフです。 |
8 | Line Charts with curved lines 滑らかな曲線付きのグラフです。 |
9 | Material Line Chart マテリアルデザインに触発された折れ線グラムです。 |
10 | Top X Line Chart マテリアルデザインに触発された折れ線グラムです。グラフの上部にX軸があります。 |
Google Charts – 地図
Google Map Chartは、Google Maps APIで地図を表示します。 データ値は地図上にマーカーとして表示されます。 データ値は、座標(緯度と経度のペア)または実際の住所にすることができます。 地図は、識別されたすべてのポイントを含むようにそれに応じて拡大または縮小されます。
Sr.No. | チャートの種類と説明 |
1 | Basic Map 基本的なGoogle mapです。 |
2 | Map using Latitude/Longitude 緯度と経度を使用して場所を指定する地図です。 |
3 | Customizing markers 地図内のカスタムマーカーです。 |
Google Charts – 組織図
組織図は、ノード階層を表すのに役立ち、組織内の上位/下位の関係を表すために使用されます。例えば、家系図は組織図です。 このグラフを作るために使用される設定は、Google Chartsの構文 という記事にあります。次には、完全な実例をご覧ください。
構成
OrgChart
クラスで組織図を表示します。
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));
実例
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Google Charts – 円グラフ
円グラフは、円グラフに基づいたグラフを作るために使用されます。 この章では、以下の円グラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Pie 基本的な円グラフです。 |
2 | Donut Chart ドーナツ円グラフです。 |
3 | 3D Pie chart 3D 円グラフです。 |
4 | Pie chart with exploded slices 分解されたスライスの円グラフです。 |
Google Charts – サンキーダイアグラム
サンキーダイアグラムは、ある値のセットから別の値のセットへのフローを表すために使用される視覚化ツールです。 接続されたオブジェクトはノードと呼ばれ、接続はリンクと呼ばれます。 Sankeysは、2つのドメイン間の多対多のマッピング、または一連のステージを介した複数のパスを表示するために使用されます。
Sr.No. | チャートの種類と説明 |
1 | Basic Sankey Chart 基本的なサンキーダイアグラムです。 |
2 | Multilevel Sankey Chart マルチレベルのサンキーダイアグラムです。 |
3 | Customizing Sankey Chart カスタマイズされたサンキーダイアグラムです。 |
Google Charts – 散布図
Sankeyチャート、散布図、段付き面グラフ、テーブル、タイムライン、TreeMap、トレンドラインは、散布図を作るために使用されます。 この章では、以下の散布図について説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Scatter 基本的な散布図です。 |
2 | Material Scatter Chart マテリアルの散布図です。 |
3 | Dual Y Axis Scatter Chart デュアルY軸のマテリアル散布図です。 |
4 | Top X Axis Scatter Chart X軸を上にしたマテリアル散布図です。 |
Google Charts – ステップ面グラフ
ステップ面グラフは、ステップに基づいた面グラフです。 以下のステップ面グラフについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Stepped Chart 基本的なステップ面グラフです。 |
2 | Stacked Stepped Chart 積上げ面グラフです。 |
3 | 100% Stacked Stepped Chart 100% 積上げ面グラフです。 |
Google Charts – テーブルチャート
テーブルチャートは、並べ替えやページングが可能なテーブルを表示するのに役立ちます。 フォーマット文字列を使用するか、セル値としてHTMLを直接挿入して、テーブルセルをフォーマットできます。 値はデフォルトで右揃えになっています。ブール値はチェックマークまたはクロスマークとして表示されます。 ユーザーは、キーボードまたはマウスを使用して単一の行を選択できます。 列見出しはソートに使用できます。 スクロール中、タイトル行は固定されたままです。 このテーブルは、ユーザーの操作に対応するイベントをトリガーします。 このグラフを作るために使用される設定は、Google Charts Configuration Syntaxの構文という記事にあります。次には、完全な実例をご覧ください。
構成
Tableクラスを使用して、テーブルグラフを表示しました。
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));
実例
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Google Charts – タイムラインチャート
タイムラインは、時間の経過とともに一連のリソースの使い方を説明します。 以下のタイムラインチャートについて説明します。
Sr.No. | チャートの種類/説明 |
1 | Basic Timelines Chart 基本的なタイムラインチャートです。 |
2 | Timelines Chart with data labels データラベル付きのタイムラインチャートです。 |
3 | Timelines chart without Row Label 行ラベルのないタイムラインチャートです。 |
4 | Timelines chart coloring カスタムタイムラインチャートです。 |
Google Charts – 樹形図
TreeMapは、データツリーの視覚的表現であり、各ノードには0個以上の子ノードと1つの親ノード(ルートを除く)が含まれる場合があります。 各ノードは長方形として表示され、割り当てた値に応じてサイズと色を調整できます。 サイズと色は、グラフ内の他のすべてのノードと比較して評価されます。 以下は、樹形図の例です。 このグラフを作るために使用される設定は、Google Charts Configuration Syntaxの構文という記事にあります。次には、完全な実例をご覧ください。
構成
TreeMapクラスで樹形図を表示します。
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));
実例
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Google Charts – トレンドラインチャート
トレンドラインは、データの全体的な方向を示すためにグラフに重ねられた線です。 Google Chartsは、Sankey Charts、Scatter Charts、Stepded Area Charts、Table、Timelines、TreeMap、Trendlines、Bar Charts、Column Charts、LineChartsのトレンドラインを自動的に生成できます。 次には、トレンドラインチャートについて説明します。
Sr.No. | チャートの種類と説明 |
1 | Basic Trendlines Chart 基本的なトレンドラインチャートです。 |
2 | Exponential Trendlines Chart インデックストレンドラインチャートです。 |
3 | Polynomial Trendlines Chart 多項式近似トレンドラインチャートです。 |
コメントを残す