ツリーマップ

概要

データツリーを視覚的に表現したもの。各ノードに 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 オプションを設定します。たとえば、次のような例が考えられます。

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

  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 を指定できます。通常は、データの値に応じてツールチップが異なるようにします。次の例は、datatable のすべてのフィールドにアクセスする方法を示しています。

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

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

showFullTooltip で返される文字列は、5 行の HTML ボックスです。

  • 1 行目は、データテーブルの適切な行を示しています。これは、data.getValue の利点を活用していることを示しています。
  • 2 行目は、どの行なのかを示しています。これは row パラメータだけです。
  • 3 行目は、このテーブルの列 3 の値と、子孫の値の合計である、datatable の列 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 つのツリーマップに含めることができるルートは 1 つのみです。
  • 列 2 - [number] - ノードのサイズ。正の値を指定できます。この値は、現在表示されている他のすべてのノードを基準として計算されたノードのサイズを決定します。リーフ以外のノードの場合、この値は無視され、そのすべての子のサイズから計算されます。
  • 列 3 - [省略可、数値] - このノードの色を計算するために使用されるオプションの値。正または負の値を指定できます。 最初に minColorValue から maxColorValue までのスケールで色の値が再計算され、その後、ノードに minColormaxColor の間のグラデーションから色が割り当てられます。

構成オプション

名前
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 が使用されます。
構成が空の配列である場合、インタラクションは無効になります。
有効な構成には mouse_event が必須で、サポートされているマウスイベントである必要があります。その後、最大 4 つのキー修飾子をオプションで使用できるようになります。
サポートされるインタラクション:
ハイライト表示、ハイライト解除、ロールアップ、ドリルダウン。
サポートされているマウスイベント:
'click'、'contextmenu'、'dblclick'、'mouseout'、'mouseover'コンテキスト メニューは右クリックに対応します。
サポートされているマウスイベント修飾キー:
'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
デフォルト: 自動
fontSize

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

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

インライン フレーム内にグラフを描画します。(IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます)。

型: boolean
デフォルト: false
headerColor

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

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

各ノードのヘッダー セクションの高さ(ピクセル単位)(ゼロにすることも可能)。

Type 番号
デフォルト: 0
headerHighlightColor

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

型: string
デフォルト: null
highlightOnMouseOver(v50 以降でサポート終了)

v50 以降に非推奨になりました。v50 以降の場合は enableHighlight を使用してください。カーソルを合わせたときに要素がハイライトされた効果を表示するかどうかを指定します。true に設定すると、さまざまな highlightColor オプションを使用して異なる要素のハイライトを指定できます。

型: boolean
デフォルト: false
ヒントの透明度

maxPostDepth が 1 より大きい場合、現在の深度より下のノードは表示されますが、hintOpacity では透明度を指定します。0 ~ 1 にする必要があります。この値が大きいほど、ノードが暗くなります。

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

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

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

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

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

3 列目で最大の値を持つノードに使用するハイライト カラー。HTML の色の値または null を指定します。null の場合、この値は 35% maxColor の値になります。

型: string
デフォルト: null
maxPostDepth

maxDepth を超えて「ヒント付き」で表示するノードの数。ヒントを含むノードは、maxDepth の制限内にあるノード内で、長方形の長方形で表示されます。

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

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

タイプ: 数値
デフォルト: null
ミッドカラー

列 3 の値が maxColorValueminColorValue の中間にある長方形の色。HTML の色の値を指定します。

型: string
デフォルト: #000000
ミッドハイライト カラー

minColorValuemaxColorValue の中央値付近に列 3 の値があるノードに使用するハイライト カラー。HTML の色の値または null を指定します。null の場合、この値は 35% で midColor が抑えられた値になります。

型: string
デフォルト: null
minColor

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

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

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

型: string
デフォルト: null
minColorValue

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

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

ノードに列 3 の値がなく、ノードがリーフ(またはリーフのみ)である場合に、長方形に使用する色。HTML の色の値を指定します。

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

ハイライト表示されたときに「いいえ」の色の長方形に使用する色。HTML の色の値または null を指定します。null の場合は、noColor の値に 35% を明るくした値になります。

型: string
デフォルト: null
番組スケール

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

型: boolean
デフォルト: false
ツールチップを表示

ツールチップを表示するかどうか。

型: boolean
デフォルト: true
テキスト スタイル

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

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

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

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

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

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

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

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

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

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

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

型: boolean
デフォルト: false

メソッド

メソッド
draw(data, options)

グラフを描画します。

戻り値の型: なし
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 つのみです。

戻り値の型: なし
goUpAndDraw()

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

戻り値の型: なし
getMaxPossibleDepth()

現在のビューで可能な最大深度を返します。

戻り値の型: number
clearChart()

グラフをクリアし、割り当てられているすべてのリソースを解放します。

戻り値の型: なし

イベント

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

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

プロパティ:
highlight (for v50+)

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

プロパティ:
onmouseout

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

プロパティ:
unhighlight (for v50+)

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

プロパティ:
ready

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

プロパティ: なし
rollup

ユーザーがツリーの上に戻ると呼び出されます。デフォルトのトリガーは右クリックです。v50 以降の場合は eventsConfig で構成できます。イベント ハンドラに渡される行プロパティは、ユーザーが向いている行ではなく、移動しているノードの行です。

プロパティ:
select

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

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

ユーザーがツリーのより深い部分に移動したときに呼び出されます。デフォルトのトリガーはクリックです。v50 以降の場合は eventsConfig で構成できます。どのノードがクリックされたかを確認するには、getSelection() を呼び出します。

プロパティ: なし

データポリシー

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