Google Charts Toolsについて

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.チャートの種類と説明
1Line Charts
線/スプラインに基づいたチャートを作るために使用されます。
2Area Charts
エリアごとのチャートを作るために使用されます。
3Pie Charts
円グラフを作るために使用されます。
4Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines
散布図を作るために使用されます。
5Bubble Charts
バブルに基づいたチャートを作るために使用されます。
6Dynamic Charts
動的なチャートを作るために使用され、ユーザーがチャートを変更できます。
7Combinations
さまざまなチャートの組み合わせを作るために使用されます。
83D Charts
3Dチャートを作るために使用されます。
9Angular Gauges
スピードメータータイプのチャートを作るために使用されます。
10Heat Maps
ヒートマップを作るために使用されます。
11Tree 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.チャートの種類と説明
1Basic Area
基本的な面グラフです。
2Area with negative values
面グラフには負の値があります。
3Stacked area
エリアが互いに積み重ねられたチャートです。
4Percentage area
パーセンテージで表示されたデータチャートです。
5Area with missing points
データ内の欠落した値のチャートです。
6Inverted axes
逆軸を使用するエリアです。

Google チャート – 棒グラフ

棒グラフは、棒に基づいたチャートを作るために使用されます。この章では、以下の棒グラフに基づいたチャートについて説明します。

Sr.No.チャートの種類と説明
1Basic Bar
基本的な棒グラフです。
2Grouped Bar Chart
グループ化された棒グラフです。
3Stacked Bar
棒グラフには、積み重ねられた棒グラフがあります。
4Negative Stacked bar
負のスタックがある棒グラフです。
5Percentage Stacked bar
パーセンテージデータを含む棒グラフです。
6Material Bar Chart
マテリアルデザインに触発された縦棒グラフです。
7Bar Chart with data labels
データラベル付きの棒グラフです。

Google Charts – バブルチャート

バブルチャートは、バブルに基づいたチャートを作るために使用されます。この章では、以下のバブルに基づいたチャートについて説明します。

Sr.No.チャートの種類と説明
1Basic Bubble
基本的なバブルチャートです。
2Bubble chart with data labels
データラベル付きのバブルチャートです。

Google Charts – ガントチャート

ガントチャートは、長期間(数か月や数年など)のカレンダーを作るために使用されます。 この章では、以下の日付に基づいたガントチャートについて説明します。

Sr.No.チャートの種類と説明
1Basic Calendar
基本的なガントチャートです。
2Calendar with customized colors
カスタムガントチャートです。

Google Charts – ローソク足(株価)チャート

ローソク足(株価)チャートは、始値と終値の値の差を示すために使用され、通常は株式を表すために使用されます。この章では、ローソク足(株価)に基づく次のチャート種類について説明します。

Sr.No.チャートの種類と説明
1Basic Candlestick
基本的なローソク足チャートです。
2Candlestick with customized colors
カスタマイズされたローソク足チャートです。

Google Charts – 棒グラム

棒グラムは、棒に基づいてグラフを作るために使用されます。 この章では、以下の列に基づいたグラフについて説明します。

Sr.No.チャートの種類と説明
1Basic Column
基本的な棒グラムです。
2Grouped Column
グループ化された棒グラムです。
3Stacked Column
棒グラムの棒グラムは互いに積み重ねられています。
4Negative Stacked Column
負のスタック付きの棒グラムです。
5Percentage Stacked Column
パーセンテージデータの棒グラムです。
6Material Column Chart
マテリアルデザインに触発された棒グラムです。
7Column 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.チャートの種類と説明
1Basic Histogram
基本的なヒストグラムです。
2Controlling Color
ヒストグラムのカスタムカラーです。
3Controlling Buckets
カスタマイズされたヒストグラムバケットです。
4Multiple Series
複数のシリーズのヒストグラムです。

Google Charts – 折れ線グラフ

折れ線グラフは、線に基づいたグラフを作るために使用されます。この章では、以下の折れ線グラフについて説明します。

Sr.No.チャートの種類と説明
1Basic line
基本的な折れ線グラフです。
2With visible points
データポイントが表示されたグラフです。
3Customizable background color
カスタム背景色付きのグラフです。
4Customizable line color
線の色がカスタムされるグラフです。
5Customizable axis and tick labels
カスタム軸と目盛りラベル付きのグラフです。
6Crosshairs
折れ線グラフは、選択したデータポイントの十字線を示します。
7Customizable line style
カスタムの線の色付きのグラフです。
8Line Charts with curved lines
滑らかな曲線付きのグラフです。
9Material Line Chart
マテリアルデザインに触発された折れ線グラムです。
10Top X Line Chart
マテリアルデザインに触発された折れ線グラムです。グラフの上部にX軸があります。

Google Charts – 地図

Google Map Chartは、Google Maps APIで地図を表示します。 データ値は地図上にマーカーとして表示されます。 データ値は、座標(緯度と経度のペア)または実際の住所にすることができます。 地図は、識別されたすべてのポイントを含むようにそれに応じて拡大または縮小されます。

Sr.No.チャートの種類と説明
1Basic Map
基本的なGoogle mapです。
2Map using Latitude/Longitude
緯度と経度を使用して場所を指定する地図です。
3Customizing 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.チャートの種類と説明
1Basic Pie
基本的な円グラフです。
2Donut Chart
ドーナツ円グラフです。
33D Pie chart
3D 円グラフです。
4Pie chart with exploded slices
分解されたスライスの円グラフです。

Google Charts – サンキーダイアグラム

サンキーダイアグラムは、ある値のセットから別の値のセットへのフローを表すために使用される視覚化ツールです。 接続されたオブジェクトはノードと呼ばれ、接続はリンクと呼ばれます。 Sankeysは、2つのドメイン間の多対多のマッピング、または一連のステージを介した複数のパスを表示するために使用されます。

Sr.No.チャートの種類と説明
1Basic Sankey Chart
基本的なサンキーダイアグラムです。
2Multilevel Sankey Chart
マルチレベルのサンキーダイアグラムです。
3Customizing Sankey Chart
カスタマイズされたサンキーダイアグラムです。

Google Charts – 散布図

Sankeyチャート、散布図、段付き面グラフ、テーブル、タイムライン、TreeMap、トレンドラインは、散布図を作るために使用されます。 この章では、以下の散布図について説明します。

Sr.No.チャートの種類と説明
1Basic Scatter
基本的な散布図です。
2Material Scatter Chart
マテリアルの散布図です。
3Dual Y Axis Scatter Chart
デュアルY軸のマテリアル散布図です。
4Top X Axis Scatter Chart
X軸を上にしたマテリアル散布図です。

Google Charts – ステップ面グラフ

ステップ面グラフは、ステップに基づいた面グラフです。 以下のステップ面グラフについて説明します。

Sr.No.チャートの種類と説明
1Basic Stepped Chart
基本的なステップ面グラフです。
2Stacked Stepped Chart
積上げ面グラフです。
3100% 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.チャートの種類/説明
1Basic Timelines Chart
基本的なタイムラインチャートです。
2Timelines Chart with data labels
データラベル付きのタイムラインチャートです。
3Timelines chart without Row Label
行ラベルのないタイムラインチャートです。
4Timelines 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.チャートの種類と説明
1Basic Trendlines Chart
基本的なトレンドラインチャートです。
2Exponential Trendlines Chart
インデックストレンドラインチャートです。
3Polynomial Trendlines Chart
多項式近似トレンドラインチャートです。
Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です