Google Chart-概要

*Google Charts* は、インタラクティブなチャート作成機能を追加してWebアプリケーションを強化することを目的とした、純粋なJavaScriptベースのチャート作成ライブラリです。 幅広いチャートをサポートしています。 チャートは、Chrome、Firefox、Safari、Internet Explorer（IE）などの標準ブラウザーでSVGを使用して描画されます。 レガシーIE 6では、VMLを使用してグラフィックを描画します。

特徴

以下は、Google Chartライブラリの主な機能です。

互換性-すべての主要なブラウザと、AndroidやiOSなどのモバイルプラットフォームで動作します。
マルチタッチのサポート-AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。 iPhone/iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
無料-オープンソースであり、非営利目的で無料で使用できます。
軽量-loader.jsコアライブラリは、非常に軽量なライブラリです。
シンプルな構成-jsonを使用してチャートのさまざまな構成を定義し、学習と使用が非常に簡単です。
動的-チャート生成後でもチャートを変更できます。
複数軸-x、y軸に制限されません。チャート上の複数の軸をサポートします。
設定可能なツールチップ-ユーザーがチャート上の任意のポイントにカーソルを合わせるとツールチップが表示されます。 googlechartsは、ツールチップをプログラムで制御するためのツールチップの組み込みフォーマッターまたはコールバックフォーマッターを提供します。
* DateTimeサポート*-日付時刻を特別に処理します。日付に関する賢明なカテゴリに対して多数の組み込みコントロールを提供します。
印刷-Webページを使用してグラフを印刷します。
外部データ-サーバーからの動的なデータのロードをサポートします。コールバック関数を使用してデータを制御します。
テキストの回転-あらゆる方向のラベルの回転をサポートします。

サポートされているチャートタイプ

Google Chartsライブラリは、次の種類のグラフを提供します-

Sr.No.	Chart Type & Description
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 立体チャートの描画に使用されます。
9	Angular Gauges 速度計タイプのチャートを描画するために使用されます。
10	Heat Maps ヒートマップの描画に使用されます。
11	Tree Maps ツリーマップの描画に使用されます。

次の章では、上記の各タイプのチャートを例とともに詳細に説明します。

ライセンス

Google Chartはオープンソースであり、無料で使用できます。リンクをたどってください：https://developers.google.com/chart/terms#license [利用規約]。

Google Chart-環境設定

この章では、Webアプリケーション開発で使用するGoogle Chartライブラリをセットアップする方法について説明します。

Google Chartをインストール

Google Chartを使用するには2つの方法があります。

ダウンロード-https://developers.google.com/chartからローカルにダウンロードして使用します。
* CDNアクセス*-CDNにもアクセスできます。 CDNにより、世界中の地域のデータセンター（この場合はGoogle Chartホスト* [[1]]

ダウンロードしたGoogleチャートを使用する

次のスクリプトを使用してHTMLページにgooglecharts JavaScriptファイルを含めます-

<head>
   <script src = "/googlecharts/loader.js"></script>
</head>

CDNを使用する

'_このチュートリアルでは、CDNバージョンのGoogle Chartライブラリを使用しています。_

次のスクリプトを使用して、HTMLページにGoogle Chart JavaScriptファイルを含めます-

<head>
   <script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>

Google Chart-構成構文

この章では、Google Chart APIを使用してグラフを描画するために必要な構成を紹介します。

ステップ1：HTMLページを作成する

Google Chartライブラリを使用してHTMLページを作成します。

googlecharts_configuration

<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>

ここで、 container 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);

ここで、データはJSONデータを表し、オプションは、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

<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>

次のコードはdrawChart関数を呼び出して、Google Chartライブラリが完全にロードされたときにチャートを描画します。

google.charts.setOnLoadCallback(drawChart);

結果

結果を確認します。

Google Charts-エリアチャート

エリアチャートは、エリアベースのチャートを描画するために使用されます。このセクションでは、以下のタイプのエリアベースのチャートについて説明します。

Sr.No.	Chart Type & Description
1	Basic Area 基本面グラフ
2	Area with negative values 負の値を持つ面グラフ。
3	Stacked area 互いに積み上げられた領域を持つグラフ。
4	Percentage area パーセンテージでデータを示すグラフ。
5	Area with missing points データに欠損点があるチャート。
6	Inverted axes 反転軸を使用するエリア。

Google Charts-棒グラフ

棒グラフは、棒グラフを描くために使用されます。このセクションでは、以下のタイプの棒グラフを説明します。

Sr.No.	Chart Type & Description
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チャート-バブルチャート

バブルチャートは、バブルベースのチャートを描画するために使用されます。このセクションでは、次の種類のバブルベースのチャートについて説明します。

Sr.No.

Chart Type & Description

1

Basic Bubble

基本的なバブルチャート。

2

Bubble chart with data labels

データラベル付きのバブルチャート。

Googleチャート-カレンダーチャート

カレンダーチャートは、月や年などの長い期間にわたって活動を描くために使用されます。このセクションでは、次の種類のカレンダーベースのチャートについて説明します。

Sr.No.

Chart Type & Description

1

Basic Calendar

基本的なカレンダーチャート。

2

Calendar with customized colors

カスタマイズされたカレンダーグラフ。

Google Chart-ローソク足チャート

ローソク足チャートは、値の差異に対する始値と終値を表示するために使用され、通常は株を表すために使用されます。このセクションでは、次のタイプのローソク足ベースのチャートについて説明します。

Sr.No.

Chart Type & Description

1

Basic Candlestick

基本的なローソク足チャート。

2

Candlestick with customized colors

カスタマイズされたローソク足チャート。

Google Charts-縦棒グラフ

縦棒グラフは、縦棒ベースのグラフを描画するために使用されます。このセクションでは、以下のタイプの列ベースのチャートについて説明します。

Sr.No.	Chart Type & Description
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チャート-組み合わせチャート

組み合わせグラフは、各シリーズを、ライン、エリア、バー、ローソク足、および階段状エリアのリストから異なるマーカータイプとしてレンダリングするのに役立ちます。シリーズにデフォルトのマーカータイプを割り当てるには、seriesTypeプロパティを使用します。シリーズプロパティを使用して、各シリーズのプロパティを個別に指定します。 link：/googlecharts/googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、このグラフを描画するために使用される構成を見てきました。それでは、完全な例を見てみましょう。

構成

*ComboChart* クラスを使用して、組み合わせベースのチャートを表示しました。

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

例

googlecharts_combination_chart

<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 Chartは、バケットの数を自動的に選択します。すべてのバケットは幅が等しく、バケット内のデータポイントの数に比例した高さを持っています。ヒストグラムは、他の点で縦棒グラフに似ています。このセクションでは、次のタイプのヒストグラムベースのチャートについて説明します。

Sr.No.	Chart Type & Description
1	Basic Histogram 基本的なヒストグラムチャート。
2	Controlling Color ヒストグラムチャートのカスタマイズされた色。
3	Controlling Buckets ヒストグラムチャートのカスタマイズされたバケット。
4	Multiple Series 複数のシリーズを持つヒストグラムチャート。

Google Charts-折れ線グラフ

折れ線グラフは、折れ線グラフを描くために使用されます。このセクションでは、次の種類の折れ線グラフを説明します。

Sr.No.	Chart Type & Description
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チャート-マップ

Google Map Chartは、Google Maps APIを使用して地図を表示します。データ値は、マーカーとしてマップ上に表示されます。データ値は、座標（緯度と経度のペア）または実際のアドレスです。マップはそれに応じて拡大縮小され、識別されたすべてのポイントが含まれるようになります。

Sr.No.

Chart Type & Description

1

Basic Map

基本的なGoogleマップ。

2

Map using Latitude/Longitude

緯度と経度を使用して指定された場所を持つマップ。

3

Customizing markers

マップ内のカスタマイズされたマーカー。

Google Charts-組織図

組織図は、組織の上位/下位の関係を表すために使用されるノードの階層のレンダリングに役立ちます。たとえば、家系図は組織図の一種です。 link：/googlecharts/googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、このグラフを描画するために使用される構成を見てきました。それでは、完全な例を見てみましょう。

構成

*OrgChart* クラスを使用して、組織ベースのチャートを表示しました。

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));

例

googlecharts_organization_chart

<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.	Chart Type & Description
1	Basic Pie 基本的な円グラフ。
2	Donut Chart ドーナツグラフ。
3	3D Pie chart 3D円グラフ。
4	Pie chart with exploded slices スライスを展開した円グラフ。

Google Charts-Sankey Charts

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

Sr.No.

Chart Type & Description

1

Basic Sankey Chart

基本的なサンキーチャート。

2

Multilevel Sankey Chart

マルチレベルサンキーチャート。

3

Customizing Sankey Chart

カスタマイズされたサンキーチャート。

Google Charts-散布図

Sankey Charts、Scatter Charts、Stepped Area Charts、Table、Timelines、TreeMap、Trendlinesは、散布図に基づいて描画されます。このセクションでは、次のタイプの散布図に基づいたチャートについて説明します。

Sr.No.	Chart Type & Description
1	Basic Scatter 基本的な散布図。
2	Material Scatter Chart マテリアル散布図。
3	Dual Y Axis Scatter Chart デュアルY軸を持つマテリアル散布図。
4	Top X Axis Scatter Chart 上部にX軸を持つマテリアル散布図。

Googleチャート-ステップエリアチャート

ステップエリアチャートは、ステップベースのエリアチャートです。次のタイプの階段状エリアチャートについて説明します。

Sr.No.

Chart Type & Description

1

Basic Stepped Chart

基本的なステップエリアチャート。

2

Stacked Stepped Chart

積み上げ階段グラフ。

3

100% Stacked Stepped Chart

100％積み上げ階段エリアチャート。

Googleチャート-テーブルチャート

テーブルチャートは、ソートおよびページングできるテーブルのレンダリングに役立ちます。表のセルは、書式文字列を使用するか、HTMLをセル値として直接挿入することで書式設定できます。数値はデフォルトで右揃えです。ブール値は、チェックマークまたはクロスマークとして表示されます。ユーザーは、キーボードまたはマウスを使用して単一の行を選択できます。列ヘッダーはソートに使用できます。スクロール中、ヘッダー行は固定されたままです。テーブルは、ユーザーの操作に対応するイベントを発生させます。 link：/googlecharts/googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、このグラフを描画するために使用される構成を見てきました。それでは、完全な例を見てみましょう。

構成

*Table* クラスを使用して、Tableベースのチャートを表示しました。

//table chart
var chart = new google.visualization.Table(document.getElementById('container'));

例

googlecharts_table_chart

<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チャート-タイムラインチャート

タイムラインは、リソースのセットが長期にわたってどのように使用されるかを示します。次のタイプのタイムラインチャートについて説明します。

Sr.No.	Chart Type/Description
1	Basic Timelines Chart 基本タイムラインチャート
2	Timelines Chart with data labels データラベル付きタイムラインチャート
3	Timelines chart without Row Label 行ラベルのないタイムラインチャート
4	Timelines chart coloring カスタマイズされたタイムラインチャート

Google Charts-TreeMap Chart

TreeMapはデータツリーを視覚的に表現したもので、各ノードには0個以上の子と1つの親（ルートを除く）があります。各ノードは長方形として表示され、割り当てた値に応じてサイズと色を変更できます。サイズと色は、グラフ内の他のすべてのノードに対して相対的に評価されます。以下は、ツリーマップチャートの例です。 link：/googlecharts/googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、このグラフを描画するために使用される構成を見てきました。それでは、完全な例を見てみましょう。

構成

ツリーマップ図を表示するために TreeMap クラスを使用しました。

//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));

例

googlecharts_treemap

<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チャート-トレンドラインチャート

トレンドラインは、データの全体的な方向を示すためにチャートに重ねられた線です。 Google Chartsは、Sankey Charts、Scatter Charts、Stepped area charts、Table、Timelines、TreeMap、Trendlines、Bar Charts、Column Charts、Line Chartsのトレンドラインを自動的に生成できます。次のタイプのトレンドラインチャートについて説明します。

Sr.No.

Chart Type & Description

1

Basic Trendlines Chart

基本的なトレンドラインチャート。

2

Exponential Trendlines Chart

指数トレンドラインチャート。

3

Polynomial Trendlines Chart

多項式トレンドラインチャート。

Googlecharts-quick-guide

Google Chart-概要

特徴

サポートされているチャートタイプ

ライセンス

Google Chart-環境設定

Google Chartをインストール

ダウンロードしたGoogleチャートを使用する

CDNを使用する

Google Chart-構成構文

ステップ1：HTMLページを作成する

ステップ2：構成を作成する

タイトル

データ表

ステップ3：チャートを描く

例

結果

Google Charts-エリアチャート

Google Charts-棒グラフ

Googleチャート-バブルチャート

Googleチャート-カレンダーチャート

Google Chart-ローソク足チャート

Google Charts-縦棒グラフ

Googleチャート-組み合わせチャート

構成

例

結果

Google Charts-ヒストグラムチャート

Google Charts-折れ線グラフ

Googleチャート-マップ

Google Charts-組織図

構成

例

結果

Google Charts-円グラフ

Google Charts-Sankey Charts

Google Charts-散布図

Googleチャート-ステップエリアチャート

Googleチャート-テーブルチャート

構成

例

結果

Googleチャート-タイムラインチャート

Google Charts-TreeMap Chart

構成

例

結果

Googleチャート-トレンドラインチャート