树状图

概览

数据树的可视化表示,其中每个节点可以有零个或多个子项,还可以有一个父项(根除外,根没有父项)。每个节点都显示为一个矩形,其大小和颜色取决于您分配的值。尺寸和颜色是相对于图表中所有其他节点而言的,您可以指定要同时显示多少个级别,以及以提示方式显示较深的级别(可选)。如果节点是叶节点,您可以指定大小和颜色;如果节点不是叶节点,则将显示为叶节点的边界框。默认行为是:当用户左键点击节点时,将树下移;在用户右键点击图表时,将树上移。

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

示例

<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。通常情况下,您会希望因数据值而异的提示。以下示例展示了如何访问数据表中的每个字段。

如果您将鼠标悬停在上面的树形图中的单元格上,会看到每个单元格都显示不同的提示。树形图提示函数都接受三个值:rowsizevalue

  • 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);

数据格式

数据表中的每一行都描述了一个节点(图表中的矩形)。每个节点(根节点除外)都有一个父节点。每个节点的大小根据其相对于当前显示的其他节点的值调整大小。

数据表应有以下四列:

  • 列 0 - [string] 此节点的 ID。它可以是任何有效的 JavaScript 字符串(包括空格)和字符串可以包含的任何长度。该值显示为节点标头。
  • 列 1 - [string] - 父节点的 ID。如果这是一个根节点,请将此字段留空。每个树形图只能有一个根。
  • 第 2 列 - [number] - 节点的大小。任何正值都是允许的。此值确定节点的大小(相对于当前显示的所有其他节点计算得出)。对于非叶节点,此值会根据其所有子节点的大小进行计算。
  • 第 3 列 - [可选], number - 用于计算此节点颜色的可选值。任何值(正值或负值)都可以。 系统会先在 minColorValuemaxColorValue 之间重新计算颜色值,然后为节点分配介于 minColormaxColor 之间的渐变色。

配置选项

名称
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,且相应事件必须是受支持的鼠标事件。那么最多可以有四个可选的辅助键。
支持的互动:
突出显示、取消突出显示、总览、展开细目
支持的鼠标事件:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'。与 'contextmenu' 对应右键点击时。
支持的鼠标事件辅助键:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'
获取当前配置:
调用方法 getEventsConfig()
使用 Ctrl+Shift+Right_Click 向上爬树的示例:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Type:对象
默认
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

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

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

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

类型:字符串
默认:自动
字体大小

所有文字的字体大小(以点为单位)。

类型:数字
默认:12
forceIFrame

在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。

类型:布尔值
默认:false
标头颜色

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

类型:字符串
默认:#988f86
标头高度

每个节点的标头部分的高度,以像素为单位(可以为零)。

类型编号
默认:0
标题突出显示颜色

悬停在节点上的标头的颜色。指定 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
最大深度

当前视图可显示的最大节点级别数量。级别会展平到当前平面。如果树状结构的层级数量超过此值,您必须向上或向下查看。此外,您还可以在这些节点下方看到 maxPostDepth 级别作为彩色矩形。

类型:数字
默认:1
maxHighlightColor

要用于第 3 列中最大值的节点的突出显示颜色。指定 HTML 颜色值或 null;如果为 null,则此值将是 maxColor 的值(调亮 35%)

类型:字符串
默认:null
maxPostDepth(最高帖子深度)

maxDepth 之后以“提示”方式显示的节点数量。 提示节点以不超过 maxDepth 限制的节点中的阴影矩形表示。

类型:数字
默认:0
maxColorValue

第 3 列中所允许的最大值。大于此值的所有值都将被删减。如果设置为 null,则将设置为列中的最大值。

类型:数字
默认:null
midColor

列 3 值介于 maxColorValueminColorValue 之间的矩形的颜色。指定 HTML 颜色值。

类型:字符串
默认:#000000
midHighlightColor

用于节点的突出显示颜色,第 3 列的值靠近 minColorValuemaxColorValue 的中位数。指定 HTML 颜色值或 null;如果为 null,则此值将是浅色 midColor 的值,减去 35%。

类型:字符串
默认: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,这将是 noColor 的值减 35%。

类型:字符串
默认:null
显示比例

是否沿着图表顶部显示从 minColormaxColor 的颜色渐变比例。指定 true 可显示比例。

类型:布尔值
默认:false
showTooltips

是否显示提示。

类型:布尔值
默认:true
文本样式

一种对象,用于指定内容区域中包含文本的某些图表(例如树状图)的文本样式。此对象的格式如下:

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

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

Type:对象
默认 {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'。另请参阅 fontNamefontSize

Type:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

是否使用加权平均值进行聚合。

类型:布尔值
默认: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() 实现。所选元素是节点。一次只能选择一个节点。

返回值类型:一组选择元素
setSelection()

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

返回值类型:无
goUpAndDraw()

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

返回值类型:无
getMaxPossibleDepth()

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

返回值类型:数字
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()

属性:无

数据政策

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