GoogleCharts-クイックガイド

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

特徴

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

Compatability −AndroidやiOSなどのすべての主要なブラウザとモバイルプラットフォームで動作するように見えます。
Multitouch Support−AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。iPhone / iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
Free to Use −オープンソースであり、非営利目的で自由に使用できます。
Lightweight − loader.jsコアライブラリは、非常に軽量なライブラリです。
Simple Configurations − jsonを使用してチャートのさまざまな構成を定義し、習得と使用が非常に簡単です。
Dynamic −チャート生成後でもチャートを変更できます。
Multiple axes− x、y軸に限定されません。チャート上の複数の軸をサポートします。
Configurable tooltips−ツールチップは、ユーザーがチャート上の任意のポイントにカーソルを合わせると表示されます。googlechartsは、ツールチップをプログラムで制御するためのツールチップ組み込みフォーマッターまたはコールバックフォーマッターを提供します。
DateTime support−日時を特別に処理します。日付ごとのカテゴリに対する多数の組み込みコントロールを提供します。
Print −Webページを使用してチャートを印刷します。
External data−サーバーからの動的なデータのロードをサポートします。コールバック関数を使用してデータを制御します。
Text Rotation −任意の方向へのラベルの回転をサポートします。

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

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

シニア番号	チャートの種類と説明
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はオープンソースであり、無料で使用できます。リンクをたどってください：利用規約。

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

GoogleChartsをインストールする

GoogleChartsを使用する方法は2つあります。

Download −ローカルからダウンロード https://developers.google.com/chart そしてそれを使用します。
CDN access−CDNにもアクセスできます。CDNを使用すると、世界中の地域のデータセンター（この場合はGoogle Chartホスト）にアクセスできます。https://www.gstatic.com/charts。

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

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

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

CDNの使用

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

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

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

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

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

GoogleChartライブラリを使用して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>

ここに containerdivは、GoogleChartライブラリを使用して描画されたグラフを含めるために使用されます。ここでは、google.charts.loadメソッドを使用してcorechartsAPIの最新バージョンを読み込んでいます。

ステップ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.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);

結果

結果を確認します。

面グラフは、面積ベースのグラフを描画するために使用されます。このセクションでは、次のタイプのエリアベースのグラフについて説明します。

シニア番号	チャートの種類と説明
1	基本エリア基本面グラフ
2	負の値の領域負の値を持つ面グラフ。
3	スタックエリア領域が互いに積み重なっているチャート。
4	パーセンテージエリアデータをパーセンテージで表したグラフ。
5	ポイントが欠けているエリアデータに欠落しているポイントがあるグラフ。
6	反転軸逆軸を使用した領域。

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

シニア番号	チャートの種類と説明
1	ベーシックバー基本的な棒グラフ
2	グループ化された棒グラフグループ化された棒グラフ。
3	スタックドバーバーが重なり合った棒グラフ。
4	ネガティブスタックバー負のスタックを持つ棒グラフ。
5	スタックされたバーのパーセンテージパーセンテージで表したデータを含む棒グラフ。
6	材料棒グラフマテリアルデザインに触発された棒グラフ。
7	データラベル付きの棒グラフデータラベル付きの棒グラフ。

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

シニア番号	チャートの種類と説明
1	ベーシックバブル基本的なバブルチャート。
2	データラベル付きのバブルチャートデータラベル付きのバブルチャート。

カレンダーチャートは、数か月や数年などの長期間にわたるアクティビティを描画するために使用されます。このセクションでは、次の種類のカレンダーベースのグラフについて説明します。

シニア番号	チャートの種類と説明
1	基本カレンダー基本的なカレンダーチャート。
2	カスタマイズされた色のカレンダーカスタマイズされたカレンダーチャート。

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

シニア番号	チャートの種類と説明
1	基本的なローソク足基本的なローソク足チャート。
2	カスタマイズされた色のローソク足カスタマイズされたローソク足チャート。

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

シニア番号	チャートの種類と説明
1	基本コラム基本縦棒グラフ。
2	グループ化された列グループ化された縦棒グラフ。
3	積み上げ列列が互いに積み重ねられた縦棒グラフ。
4	負のスタック列負のスタックを持つ縦棒グラフ。
5	積み上げ列のパーセンテージパーセンテージで表したデータを含む縦棒グラフ。
6	材料縦棒グラフマテリアルデザインに触発された縦棒グラフ。
7	データラベル付きの縦棒グラフデータラベル付きの縦棒グラフ。

組み合わせチャートは、各シリーズを次のリストの異なるマーカータイプとしてレンダリングするのに役立ちます：線、領域、棒、ローソク足、および階段状領域。シリーズにデフォルトのマーカータイプを割り当てるには、seriesTypeプロパティを使用します。Seriesプロパティは、各シリーズのプロパティを個別に指定するために使用されます。このグラフの描画に使用される構成については、GoogleChartsの構成構文の章ですでに説明しました。それでは、完全な例を見てみましょう。

構成

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

シニア番号	チャートの種類と説明
1	基本ヒストグラム基本的なヒストグラムチャート。
2	色の制御ヒストグラムチャートのカスタマイズされた色。
3	バケットの制御ヒストグラムチャートのカスタマイズされたバケット。
4	複数シリーズ複数のシリーズを持つヒストグラムチャート。

折れ線グラフは、折れ線ベースのグラフを描画するために使用されます。このセクションでは、次のタイプの線ベースのグラフについて説明します。

シニア番号	チャートの種類と説明
1	ベーシックライン基本的な折れ線グラフ。
2	目に見える点で目に見えるデータポイントのあるグラフ。
3	カスタマイズ可能な背景色カスタマイズされた背景色のチャート。
4	カスタマイズ可能な線の色カスタマイズされた線の色のグラフ。
5	カスタマイズ可能な軸と目盛りラベルカスタマイズされた軸と目盛りのラベルが付いたグラフ。
6	十字線選択時のデータポイントの十字線を示す折れ線グラフ。
7	カスタマイズ可能なラインスタイルカスタマイズされた線の色のグラフ。
8	曲線の折れ線グラフ滑らかな曲線のチャート。
9	材料折れ線グラフマテリアルデザインに触発された折れ線グラフ。
10	トップX折れ線グラフチャートの上にX軸があるマテリアルデザインに触発された折れ線グラフ。

Google Map Chartは、Google MapsAPIを使用して地図を表示します。データ値は、マップ上にマーカーとして表示されます。データ値は、座標（孤立電子対）または実際のアドレスの場合があります。識別されたすべてのポイントが含まれるように、マップはそれに応じて拡大縮小されます。

シニア番号	チャートの種類と説明
1	基本マップ基本的なグーグルマップ。
2	緯度/経度を使用した地図緯度と経度を使用して指定された場所を持つマップ。
3	マーカーのカスタマイズマップ内のカスタマイズされたマーカー。

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

構成

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

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

例

googlecharts_organization_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: ['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>

結果

結果を確認します。

円グラフは、円ベースのグラフを描画するために使用されます。このセクションでは、次の種類の円ベースのグラフについて説明します。

シニア番号	チャートの種類と説明
1	ベーシックパイ基本的な円グラフ。
2	ドーナツグラフドーナツグラフ。
3	3D円グラフ 3D円グラフ。
4	分解されたスライスの円グラフ分解されたスライスの円グラフ。

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

シニア番号	チャートの種類と説明
1	基本的なサンキーチャート基本的なサンキーチャート。
2	マルチレベルサンキーチャートマルチレベルサンキーチャート。
3	サンキーチャートのカスタマイズカスタマイズされたサンキーチャート。

Sankeyチャート、散布図、段付き面グラフ、テーブル、タイムライン、TreeMap、トレンドラインは、散布ベースのチャートを描画するために使用されます。このセクションでは、次のタイプのスキャッターベースのチャートについて説明します。

シニア番号	チャートの種類と説明
1	基本的な散乱基本的な散布図。
2	材料散布図材料散布図。
3	デュアルY軸散布図デュアルY軸を持つ材料散布図。
4	上部のX軸散布図上部にX軸がある材料散布図。

ステップ面グラフは、ステップベースの面グラフです。次のタイプの階段状面グラフについて説明します。

シニア番号	チャートの種類と説明
1	基本的なステップチャート基本的な段付き面グラフ。
2	積み上げステップチャート積み上げ階段状面グラフ。
3	100％積み上げステップチャート 100％積み上げ階段状面グラフ。

テーブルチャートは、並べ替えやページングが可能なテーブルのレンダリングに役立ちます。表のセルは、フォーマット文字列を使用するか、セル値としてHTMLを直接挿入することによってフォーマットできます。数値はデフォルトで右揃えになっています。ブール値は、チェックマークまたはクロスマークとして表示されます。ユーザーは、キーボードまたはマウスを使用して単一の行を選択できます。列ヘッダーは並べ替えに使用できます。スクロール中、ヘッダー行は固定されたままです。テーブルは、ユーザーの操作に対応するイベントを発生させます。このグラフの描画に使用される構成については、GoogleChartsの構成構文の章ですでに説明しました。それでは、完全な例を見てみましょう。

構成

使用しました 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>

結果

結果を確認します。

タイムラインは、一連のリソースが時間の経過とともにどのように使用されるかを示しています。次のタイプのタイムラインチャートについて説明します。

シニア番号	チャートタイプ/説明
1	基本的なタイムラインチャート基本的なタイムラインチャート
2	データラベル付きのタイムラインチャートデータラベル付きのタイムラインチャート
3	行ラベルのないタイムラインチャート行ラベルのないタイムラインチャート
4	タイムラインチャートのカラーリングカスタマイズされたタイムラインチャート

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

構成

使用しました 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は、Sankeyチャート、Scatterチャート、Stepped Areaチャート、Table、Timelines、TreeMap、Trendlines、Bar Charts、Column Charts、LineChartsのトレンドラインを自動的に生成できます。以下のタイプのトレンドラインチャートについて説明します。

シニア番号	チャートの種類と説明
1	基本トレンドラインチャート基本的なトレンドラインチャート。
2	指数近似曲線チャート指数近似曲線チャート。
3	多項式近似曲線チャート多項式近似曲線チャート。

シニア番号	チャートの種類と説明
1	基本エリア基本面グラフ
2	負の値の領域負の値を持つ面グラフ。
3	スタックエリア領域が互いに積み重なっているチャート。
4	パーセンテージエリアデータをパーセンテージで表したグラフ。
5	ポイントが欠けているエリアデータに欠落しているポイントがあるグラフ。
6	反転軸逆軸を使用した領域。

シニア番号	チャートの種類と説明
1	ベーシックバー基本的な棒グラフ
2	グループ化された棒グラフグループ化された棒グラフ。
3	スタックドバーバーが重なり合った棒グラフ。
4	ネガティブスタックバー負のスタックを持つ棒グラフ。
5	スタックされたバーのパーセンテージパーセンテージで表したデータを含む棒グラフ。
6	材料棒グラフマテリアルデザインに触発された棒グラフ。
7	データラベル付きの棒グラフデータラベル付きの棒グラフ。

シニア番号	チャートの種類と説明
1	基本コラム基本縦棒グラフ。
2	グループ化された列グループ化された縦棒グラフ。
3	積み上げ列列が互いに積み重ねられた縦棒グラフ。
4	負のスタック列負のスタックを持つ縦棒グラフ。
5	積み上げ列のパーセンテージパーセンテージで表したデータを含む縦棒グラフ。
6	材料縦棒グラフマテリアルデザインに触発された縦棒グラフ。
7	データラベル付きの縦棒グラフデータラベル付きの縦棒グラフ。

シニア番号	チャートの種類と説明
1	基本ヒストグラム基本的なヒストグラムチャート。
2	色の制御ヒストグラムチャートのカスタマイズされた色。
3	バケットの制御ヒストグラムチャートのカスタマイズされたバケット。
4	複数シリーズ複数のシリーズを持つヒストグラムチャート。

シニア番号	チャートの種類と説明
1	ベーシックライン基本的な折れ線グラフ。
2	目に見える点で目に見えるデータポイントのあるグラフ。
3	カスタマイズ可能な背景色カスタマイズされた背景色のチャート。
4	カスタマイズ可能な線の色カスタマイズされた線の色のグラフ。
5	カスタマイズ可能な軸と目盛りラベルカスタマイズされた軸と目盛りのラベルが付いたグラフ。
6	十字線選択時のデータポイントの十字線を示す折れ線グラフ。
7	カスタマイズ可能なラインスタイルカスタマイズされた線の色のグラフ。
8	曲線の折れ線グラフ滑らかな曲線のチャート。
9	材料折れ線グラフマテリアルデザインに触発された折れ線グラフ。
10	トップX折れ線グラフチャートの上にX軸があるマテリアルデザインに触発された折れ線グラフ。