Древовидные карты

  1. Обзор
  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 (для версии 49 или более ранней) или enableHighlight: true (для версии 50+). Отсюда вы можете установить цвета для выделения элементов, используя различные параметры 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 – [ строка ] Идентификатор этого узла. Это может быть любая допустимая строка JavaScript, включая пробелы, и любой длины, которую может содержать строка. Это значение отображается как заголовок узла.
  • Столбец 1 — [ строка ] — идентификатор родительского узла. Если это корневой узел, оставьте это поле пустым. Для каждой карты дерева разрешен только один корень.
  • Столбец 2 — [ число ] — Размер узла. Допускается любое положительное значение. Это значение определяет размер узла, вычисляемый относительно всех других узлов, отображаемых в данный момент. Для нелистовых узлов это значение игнорируется и рассчитывается на основе размера всех его дочерних узлов.
  • Столбец 3 — [ необязательно , число ] — необязательное значение, используемое для расчета цвета для этого узла. Допускается любое значение, положительное или отрицательное. Значение цвета сначала пересчитывается по шкале от minColorValue до maxColorValue , а затем узлу присваивается цвет из градиента между minColor и maxColor .

Параметры конфигурации

Имя
EnableHighlight (для v50+)

Определяет, должны ли элементы отображать выделенные эффекты. Триггер по умолчанию — при наведении курсора мыши. Триггер можно настроить с помощью eventsConfig . Если установлено значение true , подсветку различных элементов можно указать с помощью различных параметров highlightColor .

Тип: логический
По умолчанию: ложь
eventConfig (для v50+)

Конфигурация событий для запуска взаимодействия с древовидной картой. Формат для настройки взаимодействия:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
       
Если массив конфигурации не определен или отсутствует для взаимодействия, будет использоваться значение по умолчанию .
Если конфиг представляет собой пустой массив, взаимодействие будет отключено.
Для корректной конфигурации необходимо указать mouse_event , которое должно быть поддерживаемым событием мыши. Тогда вы можете иметь до четырех дополнительных ключевых модификаторов.
Поддерживаемые взаимодействия:
выделить, снять выделение, свернуть, детализировать .
Поддерживаемые события мыши:
«клик», «контекстное меню», «dblclick», «mouseout», «наведение курсора» . «Контекстное меню» соответствует щелчку правой кнопкой мыши.
Поддерживаемые клавиши-модификаторы событий мыши:
«altKey», «ctrlKey», «metaKey», «shiftKey» .
Получите текущую конфигурацию:
Вызовите метод getEventsConfig() .
Пример использования Control+Shift+Right_Click для перехода вверх по дереву:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Тип: объект
По умолчанию: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
Цвет шрифта

Цвет текста. Укажите значение цвета HTML.

Тип: строка
По умолчанию: #ffffff
семейство шрифтов

Семейство шрифтов, используемое для всего текста.

Тип: строка
По умолчанию: авто
размер шрифта

Размер шрифта всего текста в пунктах.

Тип: номер
По умолчанию: 12
сила IFrame

Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.)

Тип: логический
По умолчанию: ложь
заголовокЦвет

Цвет раздела заголовка для каждого узла. Укажите значение цвета HTML.

Тип: строка
По умолчанию: #988f86.
высота заголовка

Высота раздела заголовка для каждого узла в пикселях (может быть равна нулю).

Введите номер
По умолчанию: 0
заголовокHighlightColor

Цвет заголовка узла, над которым наведен курсор. Укажите значение цвета HTML или ноль; если значение равно нулю, это значение будет headerColor на 35%.

Тип: строка
По умолчанию: ноль
ВыделитеOnMouseOver (устарело для версии 50+)

Устарело для v50+. Для версии 50 и более поздних используйте enableHighlight . Определяет, должны ли элементы отображать выделенные эффекты при наведении курсора мыши. Если установлено значение true , подсветку различных элементов можно указать с помощью различных параметров highlightColor .

Тип: логический
По умолчанию: ложь
подсказкаНепрозрачность

Когда maxPostDepth больше 1, что приводит к отображению узлов ниже текущей глубины, hintOpacity указывает, насколько прозрачными они должны быть. Оно должно быть между 0 и 1; чем выше значение, тем тусклее узел.

Тип: номер
По умолчанию: 0,0
МаксКолор

Цвет прямоугольника со значением столбца 3 maxColorValue . Укажите значение цвета HTML.

Тип: строка
По умолчанию: #00dd00
Максимальная глубина

Максимальное количество уровней узлов, отображаемых в текущем представлении. Уровни будут сглажены в текущей плоскости. Если в вашем дереве больше уровней, вам придется подняться или опуститься, чтобы увидеть их. Вы также можете увидеть уровни maxPostDepth ниже этого уровня в виде заштрихованных прямоугольников внутри этих узлов.

Тип: номер
По умолчанию: 1
maxHighlightColor

Цвет выделения, который будет использоваться для узла с наибольшим значением в столбце 3. Укажите значение цвета HTML или нулевое значение; Если значение равно нулю, это значение будет значением maxColor , освещенным на 35 %.

Тип: строка
По умолчанию: ноль
МаксПостДепт

Сколько уровней узлов за пределами maxDepth нужно показывать в виде «намеков». Узлы с подсказками отображаются в виде заштрихованных прямоугольников внутри узла, находящегося в пределах предела maxDepth .

Тип: номер
По умолчанию: 0
Максколорвалуе

Максимальное значение, разрешенное в столбце 3. Все значения, превышающие это значение, будут обрезаны до этого значения. Если установлено значение null, ему будет присвоено максимальное значение в столбце.

Тип: номер
По умолчанию: ноль
мидколор

Цвет прямоугольника со значением столбца 3, находящимся посередине между maxColorValue и minColorValue . Укажите значение цвета HTML.

Тип: строка
По умолчанию: #000000
MidHighlightColor

Цвет выделения, который будет использоваться для узла со значением столбца 3 рядом с медианой minColorValue и maxColorValue . Укажите значение цвета HTML или ноль; если значение равно нулю, это значение будет значением midColor , освещенным на 35%.

Тип: строка
По умолчанию: ноль
минколор

Цвет прямоугольника со значением minColorValue в столбце 3. Укажите значение цвета HTML.

Тип: строка
По умолчанию: #dd0000
minHighlightColor

Цвет выделения, используемый для узла со значением столбца 3, ближайшим к minColorValue . Укажите значение цвета HTML или ноль; если значение равно нулю, это значение будет значением minColor , освещенным на 35 %.

Тип: строка
По умолчанию: ноль
минколорвалуе

Минимальное значение, разрешенное в столбце 3. Все значения меньше этого значения будут обрезаны до этого значения. Если установлено значение null, оно будет рассчитано как минимальное значение в столбце.

Тип: номер
По умолчанию: ноль
noColor

Цвет, используемый для прямоугольника, когда узел не имеет значения для столбца 3 и этот узел является листом (или содержит только листья). Укажите значение цвета HTML.

Тип: строка
По умолчанию: #000000
noHighlightColor

Цвет, используемый для прямоугольника цвета «нет», когда он выделен. Укажите значение цвета HTML или ноль; если значение равно нулю, это будет значение noColor , освещенное на 35%.

Тип: строка
По умолчанию: ноль
шоуМасштаб

Показывать ли шкалу цветового градиента от minColor до maxColor в верхней части диаграммы. Укажите true, чтобы отобразить масштаб.

Тип: логический
По умолчанию: ложь
Показать подсказки

Показывать ли всплывающие подсказки.

Тип: логический
По умолчанию: правда
текстовый стиль

Объект, определяющий стиль текста для определенных диаграмм, в области содержимого которых есть текст, например в древовидной карте. Объект имеет следующий формат:

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

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
заголовок

Текст для отображения над диаграммой.

Тип: строка
По умолчанию: без названия
заголовокTextStyle

Объект, определяющий стиль текста заголовка. Объект имеет следующий формат:

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

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

Использовать ли средневзвешенные значения для агрегирования.

Тип: логический
По умолчанию: ложь

Методы

Метод
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+)

Запускается, когда пользователь выделяет узел. Триггер по умолчанию — наведение курсора мыши. Его можно настроить с помощью eventsConfig для v50+. Обработчику событий передается индекс строки соответствующей записи в таблице данных.

Свойства: строка
onmouseout

Вызывается, когда пользователь уводит указатель мыши за пределы узла. Обработчику событий передается индекс строки соответствующей записи в таблице данных.

Свойства: строка
unhighlight (for v50+)

Вызывается, когда пользователь снимает выделение с узла. Триггер по умолчанию — mouseout. Его можно настроить с помощью eventsConfig для v50+. Обработчику событий передается индекс строки соответствующей записи в таблице данных.

Свойства: строка
ready

Вызывается, когда диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода draw и вызывать их только после того, как событие было запущено.

Свойства: Нет
rollup

Запускается, когда пользователь возвращается вверх по дереву. Триггер по умолчанию — щелчок правой кнопкой мыши. Его можно настроить с помощью eventsConfig для v50+. Свойство row, передаваемое в обработчик событий, — это строка узла, от которого пользователь переходит, а не строка, к которой пользователь переходит.

Свойства: строка
select

Запускается, когда пользователь детализирует или сворачивает узел. Также запускается при вызове метода setSelection() или goUpAndDraw() . Чтобы узнать, какой узел был выбран, вызовите getSelection() .

Свойства: нет
drilldown (for v50+)

Запускается, когда пользователь перемещается глубже в дерево. Триггер по умолчанию — щелчок. Его можно настроить с помощью eventsConfig для v50+. Чтобы узнать, какой узел был выбран, вызовите getSelection() .

Свойства: нет

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.