Эта страница переведена с помощью Cloud Translation API.

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

Обзор
Пример
Особенности
Подсказки
Загрузка
Формат данных
Параметры конфигурации
Методы
События
Политика данных

Обзор

Визуальное представление дерева данных, в котором каждый узел может иметь ноль или более дочерних элементов и одного родителя (за исключением корня, у которого нет родителей). Каждый узел отображается в виде прямоугольника, размер и цвет которого соответствуют назначенным вами значениям. Размеры и цвета оцениваются относительно всех других узлов в графе. Вы можете указать, сколько уровней отображать одновременно, и, при желании, отображать более глубокие уровни в виде подсказок. Если узел является конечным узлом, вы можете указать размер и цвет; если это не лист, он будет отображаться как ограничивающая рамка для листовых узлов. Поведение по умолчанию — перемещение вниз по дереву, когда пользователь щелкает узел левой кнопкой мыши, и обратное движение вверх по дереву, когда пользователь щелкает график правой кнопкой мыши.

Общий размер графика определяется размером содержащего его элемента, который вы вставляете на свою страницу. Если у вас есть конечные узлы с слишком длинными именами для отображения, имя будет усечено многоточием (...).

Пример

<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 .

<span class="notranslate"><input type='submit' value="Кодируйте сами на JSFiddle" class='button'/><input type='hidden' name='title' value='Treemap Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['treemap']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'ID'); data.addColumn('string', 'Parent'); data.addColumn('number', 'Number Of Lines'); data.addRows([ ['Shakespeare', null, 0], ['Comedies', 'Shakespeare', null], ['Tragedies', 'Shakespeare', null], ['Histories', 'Shakespeare', null], ['As You Like It', 'Comedies', null], ['Adam', 'As You Like It', 10], ['Amiens', 'As You Like It', 10], ['Audrey', 'As You Like It', 12], ['Celia', 'As You Like It', 108], ['Charles', 'As You Like It', 8], ['Corin', 'As You Like It', 24], ['Dennis', 'As You Like It', 2], ['Duke', 'As You Like It', 32], ['Frederick', 'As You Like It', 20], ['Hymen', 'As You Like It', 1], ['Jaques (lord)', 'As You Like It', 57], ['Jaques (son)', 'As You Like It', 2], ['Le Beau', 'As You Like It', 14], ['Oliver', 'As You Like It', 37], ['Orlando', 'As You Like It', 120], ['Phebe', 'As You Like It', 23], ['Rosalind', 'As You Like It', 201], ['Silvius', 'As You Like It', 24], ['Sir Oliver Martext', 'As You Like It', 3], ['Touchstone', 'As You Like It', 74], ['William', 'As You Like It', 11], ['Comedy Of Errors', 'Comedies', null], ['Adriana', 'Comedy Of Errors', 79], ['Aegeon', 'Comedy Of Errors', 17], ['Aemilia', 'Comedy Of Errors', 16], ['Angelo', 'Comedy Of Errors', 31], ['Antipholus of Ephesus', 'Comedy Of Errors', 76], ['Antipholus of Syracuse', 'Comedy Of Errors', 103], ['Balthazar', 'Comedy Of Errors', 5], ['Courtezan', 'Comedy Of Errors', 11], ['Dromio of Ephesus', 'Comedy Of Errors', 63], ['Dromio of Syracuse', 'Comedy Of Errors', 99], ['Luce', 'Comedy Of Errors', 7], ['Luciana', 'Comedy Of Errors', 43], ['Pinch', 'Comedy Of Errors', 6], ['Solinus', 'Comedy Of Errors', 22], ['Merchant Of Venice', 'Comedies', null], ['Antonio', 'Merchant Of Venice', 47], ['Balthasar', 'Merchant Of Venice', 1], ['Bassanio', 'Merchant Of Venice', 73], ['Duke (of Venice)', 'Merchant Of Venice', 18], ['Gratiano', 'Merchant Of Venice', 48], ['Jessica', 'Merchant Of Venice', 26], ['Launcelot Gobbo', 'Merchant Of Venice', 44], ['Leonardo', 'Merchant Of Venice', 2], ['Lorenzo', 'Merchant Of Venice', 47], ['Nerissa', 'Merchant Of Venice', 36], ['Old Gobbo', 'Merchant Of Venice', 19], ['Portia', 'Merchant Of Venice', 117], ['Prince of Arragon', 'Merchant Of Venice', 4], ['Prince of Morocco', 'Merchant Of Venice', 7], ['Salanio', 'Merchant Of Venice', 18], ['Salarino', 'Merchant Of Venice', 27], ['Salerio', 'Merchant Of Venice', 6], ['Shylock', 'Merchant Of Venice', 79], ['Stephano', 'Merchant Of Venice', 3], ['Tubal', 'Merchant Of Venice', 8], ['Midsummer Night\'s Dream', 'Comedies', null], ['Bottom', 'Midsummer Night\'s Dream', 59], ['Cobweb', 'Midsummer Night\'s Dream', 4], ['Demetrius', 'Midsummer Night\'s Dream', 48], ['Egeus', 'Midsummer Night\'s Dream', 7], ['Fairy', 'Midsummer Night\'s Dream', 4], ['Flute', 'Midsummer Night\'s Dream', 18], ['Helena', 'Midsummer Night\'s Dream', 36], ['Hermia', 'Midsummer Night\'s Dream', 48], ['Hippolyta', 'Midsummer Night\'s Dream', 14], ['Lysander', 'Midsummer Night\'s Dream', 50], ['Moth', 'Midsummer Night\'s Dream', 2], ['Mustardseed', 'Midsummer Night\'s Dream', 5], ['Oberon', 'Midsummer Night\'s Dream', 29], ['Peaseblossom', 'Midsummer Night\'s Dream', 4], ['Philostrate', 'Midsummer Night\'s Dream', 6], ['Puck', 'Midsummer Night\'s Dream', 33], ['Quince', 'Midsummer Night\'s Dream', 40], ['Snout', 'Midsummer Night\'s Dream', 9], ['Snug', 'Midsummer Night\'s Dream', 4], ['Starveling', 'Midsummer Night\'s Dream', 7], ['Theseus', 'Midsummer Night\'s Dream', 48], ['Titania', 'Midsummer Night\'s Dream', 23], ['Taming Of The Shrew', 'Comedies', null], ['Baptista Minola', 'Taming Of The Shrew', 68], ['Bianca', 'Taming Of The Shrew', 29], ['Biondello', 'Taming Of The Shrew', 39], ['Christopher Sly', 'Taming Of The Shrew', 24], ['Curtis', 'Taming Of The Shrew', 20], ['Gremio', 'Taming Of The Shrew', 58], ['Grumio', 'Taming Of The Shrew', 63], ['Haberdasher', 'Taming Of The Shrew', 1], ['Hortensio', 'Taming Of The Shrew', 70], ['Joseph', 'Taming Of The Shrew', 1], ['Katherina', 'Taming Of The Shrew', 82], ['Lucentio', 'Taming Of The Shrew', 61], ['Nathaniel', 'Taming Of The Shrew', 4], ['Nicholas', 'Taming Of The Shrew', 1], ['Peter', 'Taming Of The Shrew', 2], ['Petruchio', 'Taming Of The Shrew', 158], ['Philip', 'Taming Of The Shrew', 1], ['Tranio', 'Taming Of The Shrew', 90], ['Vincentio', 'Taming Of The Shrew', 23], ['The Tempest', 'Comedies', null], ['Adrian', 'The Tempest', 9], ['Alonso', 'The Tempest', 40], ['Antonio, duke of Milan', 'The Tempest', 57], ['Ariel', 'The Tempest', 45], ['Caliban', 'The Tempest', 50], ['Ceres', 'The Tempest', 4], ['Ferdinand', 'The Tempest', 31], ['Francisco', 'The Tempest', 2], ['Gonzalo', 'The Tempest', 52], ['Iris', 'The Tempest', 4], ['Juno', 'The Tempest', 2], ['Master', 'The Tempest', 2], ['Miranda', 'The Tempest', 50], ['Nymphs', 'The Tempest', 0], ['Prospero', 'The Tempest', 114], ['Reapers', 'The Tempest', 0], ['Sebastian', 'The Tempest', 67], ['Stephano (Servant to Portia)', 'The Tempest', 60], ['Trinculo', 'The Tempest', 39], ['Henry VIII', 'Histories', null], ['Anne Bullen', 'Henry VIII', 18], ['Archbishop Cranmer', 'Henry VIII', 21], ['Bishop Lincoln', 'Henry VIII', 2], ['Brandon', 'Henry VIII', 6], ['Capucius', 'Henry VIII', 5], ['Cardinal Campeius', 'Henry VIII', 14], ['Cardinal Wolsey', 'Henry VIII', 79], ['Cromwell', 'Henry VIII', 21], ['Doctor Butts', 'Henry VIII', 4], ['Duke of Buckingham', 'Henry VIII', 26], ['Duke of Norfolk', 'Henry VIII', 48], ['Duke of Suffolk', 'Henry VIII', 30], ['Earl of Surrey', 'Henry VIII', 24], ['First Secretary to Wolsey', 'Henry VIII', 2], ['Gardiner', 'Henry VIII', 22], ['Garter', 'Henry VIII', 1], ['Griffith', 'Henry VIII', 13], ['King Henry VIII', 'Henry VIII', 81], ['Lord Abergavenny', 'Henry VIII', 5], ['Lord Chamberlain', 'Henry VIII', 38], ['Lord Chancellor', 'Henry VIII', 7], ['Lord Sands', 'Henry VIII', 17], ['Old Lady', 'Henry VIII', 14], ['Patience', 'Henry VIII', 3], ['Porter (door-keeper of the Council-chamber)', 'Henry VIII', 10], ['Queen Katharine', 'Henry VIII', 50], ['Sir Anthony Denny', 'Henry VIII', 3], ['Sir Henry Guildford', 'Henry VIII', 1], ['Sir Nicholas Vaux', 'Henry VIII', 1], ['Sir Thomas Lovell', 'Henry VIII', 21], ['Surveyor to the Duke of Buckingham', 'Henry VIII', 9], ['History Of King John', 'Histories', null], ['Arthur Duke of Bretagne', 'History Of King John', 23], ['Blanch', 'History Of King John', 9], ['Cardinal Pandulph', 'History Of King John', 23], ['Chatillon', 'History Of King John', 5], ['Constance', 'History Of King John', 36], ['Essex', 'History Of King John', 1], ['Faulconbridge', 'History Of King John', 4], ['Hubert de Burgh', 'History Of King John', 52], ['James Gurney', 'History Of King John', 1], ['King John', 'History Of King John', 95], ['King Phillip', 'History Of King John', 43], ['Lady Faulconbridge', 'History Of King John', 5], ['Lewis the Dauphin', 'History Of King John', 29], ['Lord Bigot', 'History Of King John', 6], ['Lymoges duke of Austria', 'History Of King John', 16], ['Melun', 'History Of King John', 3], ['Pembroke earl of Pembroke', 'History Of King John', 20], ['Peter of Pomfret', 'History Of King John', 1], ['Philip the Bastard', 'History Of King John', 89], ['Prince Henry', 'History Of King John', 8], ['Queen Elinor', 'History Of King John', 22], ['Salisbury earl of Salisbury', 'History Of King John', 36], ['Antony And Cleopatra', 'Tragedies', null], ['Agrippa', 'Antony And Cleopatra', 28], ['Alexas', 'Antony And Cleopatra', 15], ['Antony', 'Antony And Cleopatra', 202], ['Canidius', 'Antony And Cleopatra', 10], ['Captain', 'Antony And Cleopatra', 1], ['Charmian', 'Antony And Cleopatra', 63], ['Cleopatra', 'Antony And Cleopatra', 204], ['Demetrius (Friend to Antony)', 'Antony And Cleopatra', 2], ['Dercetas', 'Antony And Cleopatra', 5], ['Diomedes', 'Antony And Cleopatra', 7], ['Dolabella', 'Antony And Cleopatra', 23], ['Domitius Enobarus', 'Antony And Cleopatra', 113], ['Egyptian', 'Antony And Cleopatra', 2], ['Eros', 'Antony And Cleopatra', 27], ['Euphronius', 'Antony And Cleopatra', 5], ['Gallus', 'Antony And Cleopatra', 1], ['Iras', 'Antony And Cleopatra', 18], ['Lepidus', 'Antony And Cleopatra', 30], ['Mardian', 'Antony And Cleopatra', 7], ['Mecaenas', 'Antony And Cleopatra', 16], ['Menas', 'Antony And Cleopatra', 35], ['Menecrates', 'Antony And Cleopatra', 2], ['Octavia', 'Antony And Cleopatra', 13], ['Octavius', 'Antony And Cleopatra', 98], ['Philo', 'Antony And Cleopatra', 2], ['Pompey', 'Antony And Cleopatra', 41], ['Proculeius', 'Antony And Cleopatra', 10], ['Scarus', 'Antony And Cleopatra', 12], ['Seleucus', 'Antony And Cleopatra', 3], ['Silius', 'Antony And Cleopatra', 3], ['Taurus', 'Antony And Cleopatra', 1], ['Thyreus', 'Antony And Cleopatra', 12], ['Varrius', 'Antony And Cleopatra', 1], ['Ventidius', 'Antony And Cleopatra', 4], ['Coriolanus', 'Tragedies', null], ['Aedile', 'Coriolanus', 10], ['Cominius', 'Coriolanus', 67], ['Coriolanus (Caius Marcius Coriolanus)', 'Coriolanus', 189], ['Junius Brutus', 'Coriolanus', 91], ['Lieutenant', 'Coriolanus', 4], ['Menenius Agrippa', 'Coriolanus', 162], ['Patrician', 'Coriolanus', 3], ['Roman', 'Coriolanus', 10], ['Sicinius Velutus', 'Coriolanus', 117], ['Titus Lartius', 'Coriolanus', 23], ['Tullus Aufidius', 'Coriolanus', 45], ['Valeria', 'Coriolanus', 14], ['Virgilia', 'Coriolanus', 26], ['Volsce', 'Coriolanus', 9], ['Volumnia', 'Coriolanus', 57], ['Young Coriolanus', 'Coriolanus', 1], ['Cymbeline', 'Tragedies', null], ['Arviragus', 'Cymbeline', 46], ['Belarius', 'Cymbeline', 58], ['Caius Lucius', 'Cymbeline', 25], ['Cloten', 'Cymbeline', 77], ['Cornelius (physician)', 'Cymbeline', 13], ['Cymbeline, King of Britain', 'Cymbeline', 81], ['Guiderius', 'Cymbeline', 62], ['Helen', 'Cymbeline', 0], ['Iachimo', 'Cymbeline', 77], ['Imogen', 'Cymbeline', 118], ['Jupiter', 'Cymbeline', 1], ['Philario', 'Cymbeline', 14], ['Pisanio', 'Cymbeline', 58], ['Posthumus Leonatus', 'Cymbeline', 77], ['Queen', 'Cymbeline', 27], ['Roman Captain', 'Cymbeline', 4], ['Sicilius Leonatus', 'Cymbeline', 7], ['The Tragedy of Hamlet, Prince of Denmark', 'Tragedies', null], ['Bernardo', 'The Tragedy of Hamlet, Prince of Denmark', 19], ['Claudius, King of Denmark', 'The Tragedy of Hamlet, Prince of Denmark', 102], ['Cornelius', 'The Tragedy of Hamlet, Prince of Denmark', 1], ['Father\'s Ghost', 'The Tragedy of Hamlet, Prince of Denmark', 15], ['Fortinbras', 'The Tragedy of Hamlet, Prince of Denmark', 6], ['Francisco ', 'The Tragedy of Hamlet, Prince of Denmark', 8], ['Gertrude', 'The Tragedy of Hamlet, Prince of Denmark', 69], ['Guildenstern', 'The Tragedy of Hamlet, Prince of Denmark', 29], ['Hamlet', 'The Tragedy of Hamlet, Prince of Denmark', 358], ['Horatio', 'The Tragedy of Hamlet, Prince of Denmark', 109], ['Laertes', 'The Tragedy of Hamlet, Prince of Denmark', 62], ['Lucianus', 'The Tragedy of Hamlet, Prince of Denmark', 0], ['Marcellus', 'The Tragedy of Hamlet, Prince of Denmark', 37], ['Ophelia', 'The Tragedy of Hamlet, Prince of Denmark', 58], ['Osric', 'The Tragedy of Hamlet, Prince of Denmark', 25], ['Polonius', 'The Tragedy of Hamlet, Prince of Denmark', 86], ['Reynaldo', 'The Tragedy of Hamlet, Prince of Denmark', 13], ['Rosencrantz', 'The Tragedy of Hamlet, Prince of Denmark', 48], ['Voltemand', 'The Tragedy of Hamlet, Prince of Denmark', 1], ['Julius Caesar', 'Tragedies', null], ['Antony (Marcus Antonius)', 'Julius Caesar', 51], ['Artemidorus of Cnidos', 'Julius Caesar', 4], ['Brutus (Marcus Brutus)', 'Julius Caesar', 194], ['Caesar (Julius Caesar)', 'Julius Caesar', 42], ['Calpurnia', 'Julius Caesar', 6], ['Casca', 'Julius Caesar', 39], ['Cassius', 'Julius Caesar', 140], ['Cicero', 'Julius Caesar', 4], ['Cinna', 'Julius Caesar', 11], ['Cinna the Poet', 'Julius Caesar', 8], ['Claudius', 'Julius Caesar', 2], ['Clitus', 'Julius Caesar', 8], ['Dardanius', 'Julius Caesar', 3], ['Decius Brutus', 'Julius Caesar', 12], ['Flavius', 'Julius Caesar', 5], ['Lepidus (Marcus Antonius Lepidus)', 'Julius Caesar', 3], ['Ligarius', 'Julius Caesar', 5], ['Lucilius', 'Julius Caesar', 10], ['Lucius', 'Julius Caesar', 24], ['Marullus', 'Julius Caesar', 6], ['Messala', 'Julius Caesar', 20], ['Metellus Cimber', 'Julius Caesar', 5], ['Octavius (Octavius Caesar)', 'Julius Caesar', 19], ['Pindarus', 'Julius Caesar', 5], ['Popilius (Popilius Lena)', 'Julius Caesar', 2], ['Portia (wife of Brutus)', 'Julius Caesar', 16], ['Publius', 'Julius Caesar', 2], ['Strato', 'Julius Caesar', 4], ['Tintinius', 'Julius Caesar', 10], ['Trebonius', 'Julius Caesar', 4], ['Varro', 'Julius Caesar', 6], ['Volumnius', 'Julius Caesar', 3], ['Young Cato', 'Julius Caesar', 3], ['King Lear', 'Tragedies', null], ['Cordelia', 'King Lear', 31], ['Curan', 'King Lear', 4], ['Duke of Albany', 'King Lear', 58], ['Duke of Burgundy', 'King Lear', 5], ['Duke of Cornwall', 'King Lear', 53], ['Earl of Gloucester', 'King Lear', 118], ['Earl of Kent', 'King Lear', 127], ['Edgar', 'King Lear', 98], ['Edmund', 'King Lear', 79], ['Goneril', 'King Lear', 53], ['King of France', 'King Lear', 5], ['Lear', 'King Lear', 188], ['Oswald', 'King Lear', 38], ['Regan', 'King Lear', 73], ['The Tragedy Of Macbeth', 'Tragedies', null], ['Angus', 'The Tragedy Of Macbeth', 4], ['Banquo', 'The Tragedy Of Macbeth', 33], ['Caithness', 'The Tragedy Of Macbeth', 3], ['Donalbain', 'The Tragedy Of Macbeth', 3], ['Duncan', 'The Tragedy Of Macbeth', 18], ['Fleance', 'The Tragedy Of Macbeth', 2], ['Hecate', 'The Tragedy Of Macbeth', 2], ['Lady Macbeth', 'The Tragedy Of Macbeth', 59], ['Lady Macduff', 'The Tragedy Of Macbeth', 19], ['Lennox', 'The Tragedy Of Macbeth', 21], ['Macbeth', 'The Tragedy Of Macbeth', 146], ['Macduff', 'The Tragedy Of Macbeth', 59], ['Malcolm', 'The Tragedy Of Macbeth', 40], ['Menteith', 'The Tragedy Of Macbeth', 5], ['Porter', 'The Tragedy Of Macbeth', 4], ['Ross', 'The Tragedy Of Macbeth', 39], ['Seyton', 'The Tragedy Of Macbeth', 5], ['Siward', 'The Tragedy Of Macbeth', 11], ['Son (Macduff\'s son)', 'The Tragedy Of Macbeth', 14], ['Young Siward', 'The Tragedy Of Macbeth', 4], ['The Tragedy Of Othello', 'Tragedies', null], ['Bianca (Mistress to Cassio)', 'The Tragedy Of Othello', 15], ['Brabantio', 'The Tragedy Of Othello', 30], ['Cassio', 'The Tragedy Of Othello', 110], ['Desdemona', 'The Tragedy Of Othello', 165], ['Duke of Venice', 'The Tragedy Of Othello', 25], ['Emilia', 'The Tragedy Of Othello', 103], ['Gratiano (Brother to Brabantio)', 'The Tragedy Of Othello', 20], ['Iago', 'The Tragedy Of Othello', 272], ['Lodovico', 'The Tragedy Of Othello', 33], ['Montano', 'The Tragedy Of Othello', 24], ['Othello', 'The Tragedy Of Othello', 274], ['Roderigo', 'The Tragedy Of Othello', 59], ['Romeo And Juliet', 'Tragedies', null], ['Abraham', 'Romeo And Juliet', 5], ['Balthasar (Servant to Romeo)', 'Romeo And Juliet', 12], ['Benvolio', 'Romeo And Juliet', 64], ['Capulet', 'Romeo And Juliet', 51], ['Friar John', 'Romeo And Juliet', 4], ['Friar Laurence', 'Romeo And Juliet', 55], ['Gregory', 'Romeo And Juliet', 15], ['Juliet', 'Romeo And Juliet', 118], ['Lady Capulet', 'Romeo And Juliet', 45], ['Lady Montague', 'Romeo And Juliet', 2], ['Mercutio', 'Romeo And Juliet', 62], ['Montague', 'Romeo And Juliet', 10], ['Paris', 'Romeo And Juliet', 23], ['Peter (Servant to Juliet\'s Nurse)', 'Romeo And Juliet', 13], ['Prince Escalus', 'Romeo And Juliet', 16], ['Romeo', 'Romeo And Juliet', 163], ['Sampson', 'Romeo And Juliet', 20], ['Tybalt', 'Romeo And Juliet', 17] ]); var tree = new google.visualization.TreeMap(document.getElementById('chart_div')); 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'], } }; tree.draw(data, options); // Please uncomment the following line for v50+. // tree.draw(data, optionsV50); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Treemap.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

      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 : строка ячейки из datatable
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 — [ строка ] — идентификатор родительского узла. Если это корневой узел, оставьте это поле пустым. Для карты дерева допускается только один корень.
Столбец 2 — [ число ] — размер узла. Допускается любое положительное значение. Это значение определяет размер узла, вычисляемый относительно всех других узлов, отображаемых в данный момент. Для нелистовых узлов это значение игнорируется и рассчитывается на основе размера всех его дочерних узлов.
Столбец 3 — [ необязательный , число ] — необязательное значение, используемое для расчета цвета для этого узла. Допускается любое значение, положительное или отрицательное. Значение цвета сначала пересчитывается по шкале от minColorValue до maxColorValue , а затем узлу присваивается цвет из градиента между minColor и maxColor .

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

Имя
enableHighlight (для v50+)	Определяет, должны ли элементы отображать выделенные эффекты. Триггер по умолчанию срабатывает при наведении курсора мыши. Триггер можно настроить с помощью `eventsConfig` . Если установлено значение `true` , выделение для разных элементов можно задать с помощью различных параметров `highlightColor` . Тип: логический По умолчанию: ложь
EventsConfig (для v50+)	Конфигурация события для запуска взаимодействия с картой дерева. Формат для настройки взаимодействий: eventsConfig: { interaction1: undefined, // or missing interaction2: [], // disable interaction3: [ 'mouse_event', 'optional_key1', 'optional_key2', 'optional_key3', 'optional_key4' ], ..., } Если массив конфигурации не определен или отсутствует для взаимодействия, будет использоваться значение по умолчанию . Если конфиг представляет собой пустой массив, взаимодействие будет отключено. Для допустимой конфигурации требуется `mouse_event` , которое должно быть поддерживаемым событием мыши. Тогда у вас может быть до четырех необязательных модификаторов клавиш. Поддерживаемые взаимодействия: выделение, снятие выделения, свертка, развертка . Поддерживаемые события мыши: 'щелчок', 'контекстное меню', 'dblclick', 'mouseout', 'mouseover' . С 'contextmenu' соответствует щелчок правой кнопкой мыши. Поддерживаемые клавиши модификатора событий мыши: '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
ForceIFrame	Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 отображаются в i-фреймах.) Тип: логический По умолчанию: ложь
заголовокЦвет	Цвет раздела заголовка для каждого узла. Укажите значение цвета HTML. Тип: строка По умолчанию: #988f86
заголовокВысота	Высота раздела заголовка для каждого узла в пикселях (может быть нулевой). Введите номер По умолчанию: 0
заголовокHighlightColor	Цвет заголовка узла, на который наведен курсор. Укажите значение цвета HTML или null; если null, это значение будет `headerColor` , осветленным на 35%. Тип: строка По умолчанию: ноль
highlightOnMouseOver (устарело для v50+)	Устарело для v50+. Для v50 и более поздних версий используйте `enableHighlight` . Определяет, должны ли элементы отображать выделенные эффекты при наведении курсора мыши. Если установлено значение `true` , выделение для разных элементов можно задать с помощью различных параметров `highlightColor` . Тип: логический По умолчанию: ложь
подсказкаНепрозрачность	Когда `maxPostDepth` больше 1, что приводит к отображению узлов ниже текущей глубины, `hintOpacity` указывает, насколько они должны быть прозрачными. Он должен быть между 0 и 1; чем выше значение, тем слабее узел. Тип: номер По умолчанию: 0,0
максколор	Цвет прямоугольника со значением столбца 3 `maxColorValue` . Укажите значение цвета HTML. Тип: строка По умолчанию: #00dd00
Максимальная глубина	Максимальное количество уровней узлов, отображаемых в текущем представлении. Уровни будут сглажены в текущей плоскости. Если в вашем дереве больше уровней, вам придется подняться или опуститься, чтобы увидеть их. Вы можете дополнительно видеть уровни `maxPostDepth` ниже этого в виде заштрихованных прямоугольников внутри этих узлов. Тип: номер По умолчанию: 1
максхайлайтколор	Цвет выделения, используемый для узла с наибольшим значением в столбце 3. Укажите значение цвета HTML или null; Если null, это значение будет значением `maxColor` , осветленным на 35%. Тип: строка По умолчанию: ноль
макспостглубина	Сколько уровней узлов за пределами `maxDepth` показывать в «подсказке». Узлы с подсказками отображаются в виде заштрихованных прямоугольников внутри узла, который находится в пределах ограничения `maxDepth` . Тип: номер По умолчанию: 0
максколорвалуе	Максимальное значение, разрешенное в столбце 3. Все значения, превышающие это, будут обрезаны до этого значения. Если установлено значение null, будет установлено максимальное значение в столбце. Тип: номер По умолчанию: ноль
средний цвет	Цвет прямоугольника со значением столбца 3 посередине между `maxColorValue` и `minColorValue` . Укажите значение цвета HTML. Тип: строка По умолчанию: #000000
midHighlightColor	Цвет выделения, используемый для узла со значением столбца 3 рядом с медианой `minColorValue` и `maxColorValue` . Укажите значение цвета HTML или null; если null, это значение будет значением `midColor` , осветленным на 35%. Тип: строка По умолчанию: ноль
минцвет	Цвет прямоугольника со значением `minColorValue` в столбце 3. Укажите значение цвета HTML. Тип: строка По умолчанию: #dd0000
minHighlightColor	Цвет выделения, используемый для узла со значением столбца 3, ближайшим к `minColorValue` . Укажите значение цвета HTML или null; если null, это значение будет значением `minColor` , осветленным на 35% Тип: строка По умолчанию: ноль
минцветвалуе	Минимальное значение, разрешенное в столбце 3. Все значения меньше этого будут обрезаны до этого значения. Если установлено значение null, оно будет рассчитываться как минимальное значение в столбце. Тип: номер По умолчанию: ноль
нетцвет	Цвет, используемый для прямоугольника, когда узел не имеет значения для столбца 3 и этот узел является листом (или содержит только листья). Укажите значение цвета HTML. Тип: строка По умолчанию: #000000
нетHighlightColor	Цвет, используемый для прямоугольника «нет» цвета при выделении. Укажите значение цвета HTML или null; если null, это будет значение `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>}`
заглавие	Текст для отображения над диаграммой. Тип: строка По умолчанию: без заголовка
titleTextStyle	Объект, определяющий стиль текста заголовка. Объект имеет следующий формат: { 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()` . Свойства: нет

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

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