ツリーマップ

  1. Overview
  2. 例
  3. ハイライト
  4. ツールチップ
  5. 読み込んでいます
  6. データ形式
  7. 構成オプション
  8. メソッド
  9. イベント
  10. データポリシー

概要

データツリーを視覚的に表したもの。各ノードに 0 個以上の子と 1 つの親（親を持たないルートを除く）を設定できます。各ノードは長方形として表示されます。各ノードは、割り当てた値に応じてサイズと色が付けられます。サイズと色は、グラフ内の他のすべてのノードを基準として評価されます。同時に表示する階数を指定できます。また、必要に応じて、より深い階層をヒント付きで表示することもできます。ノードがリーフノードの場合は、サイズと色を指定できます。リーフノードでない場合は、リーフノードの境界ボックスとして表示されます。デフォルトの動作では、ユーザーがノードを左クリックするとツリー下に移動し、グラフを右クリックするとツリー上に戻ります。

グラフの合計サイズは、ページに挿入する要素のサイズによって決まります。名前が長すぎて表示できないリーフノードがある場合、その名前は省略記号（...）付きで切り捨てられます。

例

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        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],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ハイライト

要素をハイライト表示するかどうかを指定できます。また、ハイライト表示したときに使用する特定の要素に特定の色を設定できます。ハイライト表示を有効にするには、highlightOnMouseOver:true（v49 以前の場合）または enableHighlight: true（v50 以降の場合）を設定します。そこから、さまざまな HighlightColor オプションを使用して、要素のハイライト表示に使用する色を設定できます。 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

ツールチップ

デフォルトでは、ツリーマップのツールチップは基本で、ツリーマップのセルのラベルが表示されます。これは、セルが小さすぎてラベルを含めることができない場合に便利ですが、このセクションで説明するようにさらにカスタマイズできます。

ツリーマップのツールチップは、他のグラフとは異なる方法でカスタマイズされます。つまり、関数を定義してから、その関数に generateTooltip オプションを設定します。たとえば、次のような例が考えられます。

上のグラフでは、ユーザーがツリーマップのセルにカーソルを合わせたときに表示される HTML を含む文字列を返すだけの showStaticTooltip という関数を定義しています。試してみましょう。これを生成するコードは次のとおりです。

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

generateTooltip 関数には任意の JavaScript を使用できます。通常は、データ値に応じて変化するツールチップが必要です。次の例は、データテーブル内のすべてのフィールドにアクセスする方法を示しています。

上のツリーマップのセルにカーソルを合わせると、セルごとに異なるツールチップが表示されます。ツリーマップのツールチップ関数はすべて、row、size、value の 3 つの値を取ります。

  • row: データテーブルのセルの行
  • size: このセルとそのすべての子の値（列 3）の合計
  • value: セルの色。0 ～ 1 の数値で表します。

showFullTooltip では、5 行の HTML ボックスが返されます。

  • 1 行目にはデータテーブルの該当する行が表示され、data.getValue を多用しています。
  • 2 行目では、これがどの行であるか（単なる row パラメータ）を示しています。
  • 3 行目では、データテーブルの列 3 の情報（この行の 3 列目の値と子孫の値の合計）がわかります。
  • 4 行目から、データテーブルの列 4 の情報がわかります。これは値ですが、セルの色に対応する 0 ～ 1 の間の数値として表現されます。
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

読み込んでいます

google.charts.load パッケージ名は "treemap" です。

  google.charts.load("current", {packages: ["treemap"]});

ビジュアリゼーションのクラス名は google.visualization.TreeMap です。

  var visualization = new google.visualization.TreeMap(container);

データ形式

データ表の各行は 1 つのノード（グラフ内の長方形）を表します。各ノード（ルートノードを除く）には親ノードが 1 つあります。各ノードは、現在表示されている他のノードを基準とした値に応じて、サイズと色が付けられます。

データテーブルには、次の形式の 4 つの列が必要です。

  • 列 0 - [文字列] このノードの ID。有効な JavaScript 文字列（スペースを含む）と、文字列が保持できる任意の長さを指定できます。この値はノードヘッダーとして表示されます。
  • 列 1 - [文字列] - 親ノードの ID。ルートノードの場合は空白のままにします。ツリーマップごとに使用できるルートは 1 つのみです。
  • 列 2 - [数値] - ノードのサイズ。任意の正の値を使用できます。この値は、現在表示されている他のすべてのノードを基準として計算されたノードのサイズを決定します。非リーフノードの場合、この値は無視され、すべての子のサイズから計算されます。
  • 列 3 - [省略可、数値] - このノードの色を計算するために使用される省略可能な値。正または負の任意の値を使用できます。色の値はまず minColorValue から maxColorValue までのスケールで再計算され、次に minColor から maxColor までのグラデーションからノードに色が割り当てられます。

構成オプション

名前
enableHighlight（v50 以降）

要素をハイライト表示するかどうかを指定します。デフォルトのトリガーは、カーソルを合わせたときです。 トリガーは eventsConfig で構成できます。true に設定すると、さまざまな highlightColor オプションを使用して、さまざまな要素のハイライト表示を指定できます。

型: boolean
デフォルト: false
eventsConfig（v50 以降）

ツリーマップ インタラクションをトリガーするイベント構成。 インタラクションを構成するフォーマット:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
操作の config 配列が定義されていないか、欠落している場合は、default が使用されます。
config が空の配列の場合、インタラクションは無効になります。
有効な設定にするには、mouse_event が必須で、サポートされているマウスイベントである必要があります。この場合、最大 4 つのオプションのキー修飾子を指定できます。
サポートされている操作:
ハイライト、ハイライト表示、ロールアップ、ドリルダウン
サポートされるマウスイベント:
「click」、「contextmenu」、「dblclick」、「mouseout」、「mouseover」。'contextmenu' は右クリックに対応する。
サポートされているマウスイベントの修飾キー:
'altKey'、'ctrlKey'、'metaKey'、'shiftKey'。
現在の構成を取得します。
メソッド getEventsConfig() を呼び出します。
Ctrl+Shift+Right_Click を使用してツリーを上に移動する例:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
タイプ: オブジェクト
デフォルト: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

テキストの色。HTML のカラー値を指定します。

型: string
デフォルト: #ffffff
fontFamily

すべてのテキストに使用するフォント ファミリー。

型: string
デフォルト: auto
fontSize

すべてのテキストのフォントサイズ（ポイント単位）。

タイプ: 数値
デフォルト: 12
forceIFrame

インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。

型: boolean
デフォルト: false
headerColor

各ノードのヘッダー セクションの色。HTML のカラー値を指定します。

型: string
デフォルト: #988f86
headerHeight

各ノードのヘッダー セクションの高さ。ピクセル単位で指定します（ゼロでもかまいません）。

番号を入力
デフォルト: 0
headerHighlightColor

カーソルを合わせているノードのヘッダーの色。HTML のカラー値または null を指定します。null の場合、この値は headerColor から 35% 明るくなります。

型: string
デフォルト: null
manifestOnMouseOver（v50 以降では非推奨）

v50 以降では非推奨です。v50 以降では、enableHighlight を使用してください。 マウスオーバーしたときに要素をハイライト表示するかどうかを決定します。true に設定すると、さまざまな highlightColor オプションを使用して、さまざまな要素のハイライト表示を指定できます。

型: boolean
デフォルト: false
hintOpacity

maxPostDepth が 1 より大きい場合（現在の深度より下のノードが表示される）場合、hintOpacity でノードの透明度を指定します。0 ～ 1 の範囲で指定してください。値が大きいほど、ノードが暗くなります。

タイプ: 数値
デフォルト: 0.0
maxColor

列 3 の値が maxColorValue の長方形の色。HTML のカラー値を指定します。

型: string
デフォルト: #00dd00
maxDepth

現在のビューに表示するノードレベルの最大数。レベルは現在のプレーン内でフラット化されます。ツリーのレベルがこれより多い場合、表示するために移動する必要があります。また、このノード内には色付きの長方形として、これより下の maxPostDepth レベルが表示されます。

タイプ: 数値
デフォルト: 1
maxHighlightColor

列 3 で最も大きい値を持つノードに使用するハイライト表示の色。HTML のカラー値または null を指定します。null の場合は、maxColor の値が 35% 明るくされた値になります。

型: string
デフォルト: null
maxPostDepth

maxDepth 以外のノードのレベルを「ヒンティング」形式で表示する数。ヒント付きのノードは、maxDepth の制限内にあるノード内で色付きの長方形として表示されます。

タイプ: 数値
デフォルト: 0
maxColorValue

列 3 の最大値です。この値より大きい値はすべて、この値にカットされます。null に設定すると、列の最大値に設定されます。

タイプ: 数値
デフォルト: null
midColor

maxColorValue と minColorValue の中間に列 3 の値がある長方形の色。HTML のカラー値を指定します。

型: string
デフォルト: #000000
midHighlightColor

列 3 の値が minColorValue と maxColorValue の中央値に近いノードに使用するハイライトの色。HTML のカラー値または null を指定します。null の場合は、midColor の値が 35% 明るくされた値になります。

型: string
デフォルト: null
minColor

列 3 の値が minColorValue の長方形の色。HTML のカラー値を指定します。

型: string
デフォルト: #dd0000
minHighlightColor

列 3 の値が minColorValue に最も近いノードに使用するハイライトの色。HTML のカラー値または null を指定します。null の場合は、minColor の値が 35% 明るくされた値になります。

型: string
デフォルト: null
minColorValue

列 3 に指定できる最小値です。これより小さい値はすべて、この値にカットされます。null に設定すると、列の最小値として計算されます。

タイプ: 数値
デフォルト: null
noColor

ノードが 3 列目に値がなく、そのノードがリーフである（またはリーフのみを含む）場合に、長方形に使用する色。HTML のカラー値を指定します。

型: string
デフォルト: #000000
noHighlightColor

ハイライト表示されたときに「なし」の色の長方形に使用する色。HTML のカラー値または null を指定します。null の場合は、noColor の値が 35% 軽量化されます。

型: string
デフォルト: null
showScale

グラフの上部に minColor～maxColor のカラー グラデーション スケールを表示するかどうかを指定します。スケールを表示するには、true を指定します。

型: boolean
デフォルト: false
showTooltips

ツールチップを表示するかどうかを指定します。

型: boolean
デフォルト: true
textStyle

ツリーマップなどのコンテンツ領域にテキストがある特定のグラフで、テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

グラフの上部に表示するテキストです。

型: string
デフォルト: タイトルなし
titleTextStyle

タイトルのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

集計に加重平均を使用するかどうか。

型: boolean
デフォルト: false

メソッド

メソッド
draw(data, options)

グラフを描画します。

戻り値の型: none
getEventsConfig() (for v50+)

現在のインタラクション構成を返します。これを使用して、構成オプション eventsConfig を確認できます。

戻り値の型: オブジェクト
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

標準の getSelection() 実装。選択した要素はノードです。一度に選択できるノードは 1 つのみです。

戻り値の型: 選択要素の配列
setSelection()

標準の setSelection() 実装。選択した要素はノードです。一度に選択できるノードは 1 つのみです。

戻り値の型: none
goUpAndDraw()

樹木を 1 レベル上に移動して再描画します。ノードがルートノードの場合、エラーはスローされません。これは、ユーザーがノードを右クリックすると自動的に呼び出されます。

戻り値の型: none
getMaxPossibleDepth()

現在のビューで取り得る最大深度を返します。

戻り値の型: number
clearChart()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none

イベント

構成可能なイベント トリガーについては、eventsConfig をご覧ください。
名前
onmouseover

ユーザーがノードにカーソルを合わせると呼び出されます。イベント ハンドラには、データテーブルの対応するエントリの行インデックスが渡されます。

Properties（プロパティ）: row
highlight (for v50+)

ユーザーがノードをハイライト表示したときに呼び出されます。デフォルトのトリガーはマウスオーバーです。v50 以降では eventsConfig を使用して構成できます。イベント ハンドラには、データテーブルの対応するエントリの行インデックスが渡されます。

Properties（プロパティ）: row
onmouseout

ユーザーがノードからマウスアウトしたときに発生します。イベント ハンドラには、データテーブルの対応するエントリの行インデックスが渡されます。

Properties（プロパティ）: row
unhighlight (for v50+)

ユーザーがノードのハイライト表示を解除したときに呼び出されます。デフォルトのトリガーはマウスアウトです。v50 以降では eventsConfig を使用して構成できます。イベント ハンドラには、データテーブルの対応するエントリの行インデックスが渡されます。

Properties（プロパティ）: row
ready

グラフが外部メソッド呼び出しの準備ができたときに呼び出されます。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。

プロパティ: なし
rollup

ユーザーがツリーをさかのぼって移動したときに呼び出されます。デフォルトのトリガーは右クリックです。v50 以降では eventsConfig を使用して構成できます。イベント ハンドラに渡される行プロパティは、ユーザーが移動先であるノードの行ではなく、移動元のノードの行です。

Properties（プロパティ）: row
select

ユーザーがノードをドリルダウンしたとき、またはノードをロールアップしたときに呼び出されます。setSelection() メソッドまたは goUpAndDraw() メソッドが呼び出されたときにも呼び出されます。 選択されたノードを確認するには、getSelection() を呼び出します。

Properties（プロパティ）: なし
drilldown (for v50+)

ユーザーがツリーの奥深くに移動すると呼び出されます。デフォルトのトリガーはクリックです。v50 以降では eventsConfig を使用して構成できます。クリックされたノードを確認するには、getSelection() を呼び出します。

Properties（プロパティ）: なし

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはサーバーに送信されません。