树状图

  1. Overview
  2. 示例
  3. 重要信息
  4. 工具提示
  5. 正在加载
  6. 数据格式
  7. 配置选项
  8. 方法
  9. 事件
  10. 数据政策

概览

数据树的可视化表示，其中每个节点可以有零个或多个子节点和一个父项（根除外，它没有父项）。每个节点都显示为一个矩形，其大小和颜色取决于您指定的值。大小和颜色相对于图表中所有其他节点的值。您可以指定要同时显示的关卡数量，还可以选择以提示的方式显示更深的关卡。如果节点是叶节点，您可以指定大小和颜色；如果不是叶节点，则会显示为叶节点的边界框。默认行为是，当用户左键点击节点时，会沿着树向下移动；当用户右键点击图表时，则是在树上往上移动。

图表的总大小取决于您在页面中插入的包含元素的大小。如果叶节点的名称过长，无法显示，名称将会被省略号 (...) 截断。

示例

 
<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。通常情况下，您需要根据数据值变化的提示。以下示例展示了如何访问数据表中的每个字段。

如果将鼠标悬停在上方树状图中的单元格上，您会看到每个单元格的不同提示。树状图提示函数均采用三个值：row、size 和 value。

  • row：数据表中单元格的行
  • size：此单元格的值（第 3 列）及其所有子单元格的值总和
  • value：单元格的颜色，以 0 到 1 之间的数字表示

在 showFullTooltip 中，我们返回的字符串是一个包含五行内容的 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);

数据格式

数据表中的每一行都描述了一个节点（图中的矩形）。每个节点（根节点除外）都有一个父节点。每个节点的大小和颜色都根据其相对于当前显示的其他节点的值而变化。

数据表应包含以下格式的四列：

  • 列 0 - [字符串] 此节点的 ID。它可以是任何有效的 JavaScript 字符串（包括空格）以及字符串能够包含的任何长度。此值显示为节点标头。
  • 第 1 列 - [字符串] - 父节点的 ID。如果这是根节点，请将此字段留空。每个树状图只允许有一个根。
  • 第 2 列 - [number] - 节点的大小。允许输入任何正值。此值确定节点的大小，相对于当前显示的所有其他节点进行计算。对于非叶节点，此值会被忽略，并根据其所有子节点的大小计算。
  • 第 3 列 - [可选，数字] - 用于计算此节点颜色的可选值。允许任何值（正数或负数）。 首先按从 minColorValue 到 maxColorValue 的比例重新计算颜色值，然后为节点分配一个从 minColor 到 maxColor 之间的渐变颜色。

配置选项

名称
enableHighlight （适用于 v50 及更高版本）

确定元素是否应显示突出显示的效果。默认触发器是将鼠标悬停在其上时。您可以使用 eventsConfig 配置触发器。如果设置为 true，则可以使用各种 highlightColor 选项指定不同元素的突出显示。

类型：布尔值
默认值：false
eventsConfig（适用于 v50 及更高版本）

用于触发树图互动的事件配置。 用于配置互动的格式：

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
如果互动配置数组未定义或缺失，系统将使用 default。
如果配置是一个空数组，则互动将被停用。
对于有效配置，mouse_event 是必需的，并且必须是支持的鼠标事件。然后，您最多可以设置 4 个可选的辅助键。
支持的互动：
突出显示、取消突出显示、汇总、展开细目。
支持的鼠标事件：
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'。'contextmenu' 对应于右键点击。
支持的鼠标事件辅助键：
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'。
获取当前配置：
调用 getEventsConfig() 方法。
使用 Ctrl+Shift+Right_Click 向上浏览树的示例：
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
类型：object
默认值： 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

文本颜色。指定 HTML 颜色值。

类型：字符串
默认：#ffffff
fontFamily

要用于所有文本的字体系列。

类型：字符串
默认：auto
fontSize

所有文本的字体大小（以点为单位）。

类型：数字
默认值：12
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

类型：布尔值
默认值：false
headerColor

每个节点的标头部分的颜色。指定 HTML 颜色值。

类型：字符串
默认值：#988f86
headerHeight

每个节点的标头部分的高度，以像素为单位（可以为零）。

类型：数字
默认值：0
headerHighlightColor

悬停在其上的节点标头的颜色。指定 HTML 颜色值或 null；如果为 null，此值会headerColor减 35%。

类型：字符串
默认值：null
highlightOnMouseOver（v50 及更高版本已弃用）

对于 v50 及更高版本，已弃用。对于 v50 及更高版本，请使用 enableHighlight。确定元素是否应在鼠标悬停时显示突出显示的效果。如果设置为 true，则可以使用各种 highlightColor 选项指定不同元素的突出显示。

类型：布尔值
默认值：false
hintOpacity

当 maxPostDepth 大于 1 时，系统会显示低于当前深度的节点，hintOpacity 会指定透明度应如何。它应介于 0 和 1 之间；值越大，节点越暗。

类型：数字
默认值：0.0
maxColor

第 3 列值为 maxColorValue 的矩形的颜色。指定 HTML 颜色值。

类型：字符串
默认值：#00dd00
maxDepth

当前视图中显示的节点级别数量上限。楼层会被扁平化为当前平面。如果树中的层数超过此值，您必须向上或向下查看这些层。此外，在节点之下，maxPostDepth 层会以阴影矩形的形式显示。

类型：数字
默认值：1
maxHighlightColor

用于第 3 列中具有最大值的节点的突出显示颜色。指定 HTML 颜色值或 null；如果为 null，此值将为 maxColor 的值减 35%

类型：字符串
默认值：null
maxPostDepth

maxDepth 之外要以“微调”方式显示的节点层级数。提示节点显示为 maxDepth 限制范围内的节点内的彩色矩形。

类型：数字
默认值：0
maxColorValue

第 3 列中允许的最大值。所有大于此值的值都会被修剪到此值。如果设置为 null，则会设为列中的最大值。

类型：数字
默认值：null
midColor

列 3 值介于 maxColorValue 和 minColorValue 中间的矩形的颜色。指定 HTML 颜色值。

类型：字符串
默认值：#000000
midHighlightColor

用于列 3 值接近 minColorValue 和 maxColorValue 中位数的节点的突出显示颜色。指定 HTML 颜色值或 null；如果为 null，此值将是减亮 35% 的 midColor 值。

类型：字符串
默认值：null
minColor

第 3 列值为 minColorValue 的矩形的颜色。指定 HTML 颜色值。

类型：字符串
默认值：#dd0000
minHighlightColor

用于包含第 3 列值最接近 minColorValue 的节点的突出显示颜色。指定 HTML 颜色值或 null；如果为 null，此值将为减 35% 的 minColor 值

类型：字符串
默认值：null
minColorValue

第 3 列中允许的最小值。所有小于此值的值都将被修剪为此值。如果设置为 null，则系统会将其计算为列中的最小值。

类型：数字
默认值：null
noColor

当某个节点没有第 3 列的值且该节点为叶（或仅包含叶）时，用于矩形的颜色。指定 HTML 颜色值。

类型：字符串
默认值：#000000
noHighlightColor

“no”颜色矩形在突出显示时要使用的颜色。指定 HTML 颜色值或 null；如果为 null，此值将为减 35% 的 noColor 值。

类型：字符串
默认值：null
showScale

是否沿图表顶部显示从 minColor 到 maxColor 的颜色渐变缩放。指定 true 以显示比例。

类型：布尔值
默认值：false
showTooltips

是否显示提示。

类型：布尔值
默认值：true
textStyle

用于指定文本样式的对象，适用于在内容区域（例如树状图）中包含文本的特定图表。该对象的格式如下： 

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
标题

要在图表上方显示的文本。

类型：字符串
默认：无标题
titleTextStyle

一个对象，用于指定标题文本样式。该对象的格式如下：

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

是否使用加权平均值进行汇总。

类型：布尔值
默认值：false

方法

方法
draw(data, options)

绘制图表。

Return Type（返回类型）：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() 实现。所选元素是节点。一次只能选择一个节点。

返回类型：选择元素数组
setSelection()

标准 setSelection() 实现。所选元素是节点。一次只能选择一个节点。

Return Type（返回类型）：none
goUpAndDraw()

将树向上移动一层，然后重新绘制。如果该节点是根节点，则不会抛出错误。用户右键点击节点时会自动触发此事件。

Return Type（返回类型）：none
getMaxPossibleDepth()

返回当前视图可能的最大深度。

Return Type（返回类型）：number
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

如需了解可配置的事件触发器，请参阅 eventsConfig。
名称
onmouseover

用户将鼠标悬停在节点上时触发。系统会向事件处理脚本传递数据表中相应条目的行索引。

房源：行
highlight (for v50+)

在用户突出显示节点时触发。默认触发器是鼠标悬停。对于 v50 及更高版本，可以使用 eventsConfig 对其进行配置。系统会向事件处理脚本传递数据表中相应条目的行索引。

房源：行
onmouseout

用户将鼠标移出节点时触发。系统会向事件处理脚本传递数据表中相应条目的行索引。

房源：行
unhighlight (for v50+)

在用户取消突出显示节点时触发。默认触发器是 mouseout。 对于 v50 及更高版本，可以使用 eventsConfig 对其进行配置。系统会向事件处理脚本传递数据表中相应条目的行索引。

房源：行
ready

在图表已准备好进行外部方法调用时触发。如果您想与图表交互，并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
rollup

在用户返回到树状结构时触发。默认触发器是右键点击。 对于 v50 及更高版本，可以使用 eventsConfig 对其进行配置。传递到事件处理脚本的行属性是用户从该节点开始的行，而不是用户导航到的行。

房源：行
select

在用户展开细目或汇总节点时触发。调用 setSelection() 或 goUpAndDraw() 方法时也会触发。 如需了解选择了哪个节点，请调用 getSelection()。

属性：无
drilldown (for v50+)

在用户导航到树时触发。默认触发器是点击。 对于 v50 及更高版本，可以使用 eventsConfig 对其进行配置。如需了解用户点击的是哪个节点，请调用 getSelection()。

属性：无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。