Обзор Визуальное представление дерева данных, в котором каждый узел может иметь ноль или более дочерних элементов и одного родителя (за исключением корня, у которого нет родителей). Каждый узел отображается в виде прямоугольника, размер и цвет которого соответствуют назначенным вами значениям. Размеры и цвета оцениваются относительно всех других узлов в графе. Вы можете указать, сколько уровней отображать одновременно, и, при желании, отображать более глубокие уровни в виде подсказок. Если узел является конечным узлом, вы можете указать размер и цвет; если это не лист, он будет отображаться как ограничивающая рамка для листовых узлов. Поведение по умолчанию — перемещение вниз по дереву, когда пользователь щелкает узел левой кнопкой мыши, и обратное движение вверх по дереву, когда пользователь щелкает график правой кнопкой мыши.
Общий размер графика определяется размером содержащего его элемента, который вы вставляете на свою страницу. Если у вас есть конечные узлы с слишком длинными именами для отображения, имя будет усечено многоточием (...).
Пример
<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
.
<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); } <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); } <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); } <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); }
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()
.
Свойства: нет
Политика данных Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.