Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ağaç grafikler

Genel bakış
Örnek
Öne çıkanlar
İpuçları
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası

Genel bakış

Her düğümün sıfır veya daha fazla alt ve bir üst öğesi (üst öğesi olmayan kök hariç) olabileceği bir veri ağacının görsel temsili. Her düğüm, atadığınız değerlere göre boyutlandırılmış ve renklendirilmiş bir dikdörtgen olarak gösterilir. Boyutlar ve renkler, grafikteki diğer tüm düğümlere göre belirlenir. Aynı anda kaç seviyenin gösterileceğini belirtebilir ve isteğe bağlı olarak ipucu kullanarak daha derin seviyeler görüntüleyebilirsiniz. Düğüm yaprak düğümse boyut ve renk belirtebilirsiniz. Yaprak değilse yaprak düğümleri için sınırlayıcı kutu olarak gösterilir. Varsayılan davranış, kullanıcı bir düğümü sol tıkladığında ağaçta aşağı, grafiği sağ tıkladığında ağaçta tekrar yukarı gitmektir.

Grafiğin toplam boyutu, sayfanıza eklediğiniz kapsayıcı öğenin boyutuna göre belirlenir. Adları gösterilemeyecek kadar uzun olan yaprak düğümleriniz varsa ad üç nokta (...) ile kısaltılır.

Örnek

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

}

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

Öne Çıkanlar

Öğelerin vurgulanıp vurgulanmayacağını belirtebilir ve belirli öğeler için böyle bir durum söz konusu olduğunda kullanılacak belirli renkler ayarlayabilirsiniz. Vurgulamayı etkinleştirmek için highlightOnMouseOver:true (v49 veya önceki sürümler için) veya enableHighlight: true (v50 ve sonraki sürümler için) olarak ayarlayın. Ardından, çeşitli HighlightColor seçeneklerini kullanarak öğeleri vurgulamak için kullanılacak renklerinizi ayarlayabilirsiniz.

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'],
        }
      };

İpuçları

Varsayılan olarak, ağaç eşleme hücresinin etiketini gösteren ağaç ipuçları temel düzeydedir. Hücreler etiketleri içeremeyecek kadar küçük olduğunda bu yöntem faydalıdır, ancak bunları bu bölümde açıklandığı gibi daha ayrıntılı şekilde özelleştirebilirsiniz.

Ağaç grafik ipuçları, diğer grafiklerden farklı şekilde özelleştirilir: Bir işlev tanımlar ve daha sonra, generateTooltip seçeneğini o işleve ayarlarsınız. Aşağıda basit bir örnek verilmiştir:

Yukarıdaki grafikte, kullanıcı fareyle bir ağaç hücresinin üzerine geldiğinde gösterilecek HTML'yi içeren bir dize döndüren showStaticTooltip adında bir işlev tanımlıyoruz. Deneyin. Oluşturulacak kod aşağıdaki gibidir:

  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 işlevi, istediğiniz herhangi bir JavaScript olabilir. Genellikle, veri değerlerine göre değişiklik gösteren ipuçları istersiniz. Aşağıdaki örnekte, veri tablosundaki her alana nasıl erişileceği gösterilmektedir.

Fareyle yukarıdaki ağaç haritada bulunan hücrelerin üzerine gelirseniz her hücre için farklı bir ipucu görürsünüz. Treemap ipucu işlevlerinin tümü üç değer alır: row, size ve value.

row: hücrenin veri tablosundaki satırı
size: Bu hücrenin ve tüm alt öğelerinin değerinin (3. sütun) toplamı
value: hücrenin rengi; 0 ile 1 arasında bir sayı olarak ifade edilir

showFullTooltip'de döndürdüğümüz dize, beş satırlık bir HTML kutusudur:

1. satır, veri tablosundaki uygun satırı göstererek data.getValue kullanımının kolay olmasını sağlar.
2. satır, yalnızca row parametresi olan satırın hangisi olduğunu gösterir.
3. satır, veri tablosunun 3. sütunundaki bilgileri verir: Bu satırdaki 3. sütunun değerinin toplamı ve alt öğelerden gelen değerler.
4. satır, veri tablosunun 4. sütunundan bilgi verir. Bu değer, hücrenin rengine karşılık gelen 0 ile 1 arasında bir sayı olarak ifade edilir.

  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>';
  }

}

Yükleniyor

google.charts.load paketinin adı: "treemap".

  google.charts.load("current", {packages: ["treemap"]});

Görselleştirmenin sınıf adı: google.visualization.TreeMap.

  var visualization = new google.visualization.TreeMap(container);

Veri Biçimi

Veri tablosundaki her satır bir düğümü (grafikteki bir dikdörtgen) açıklar. Her bir düğümün (kök düğüm hariç) bir üst düğümü vardır. Her düğüm, şu anda gösterilen diğer düğümlere göre değerlerine göre boyutlandırılır ve renklendirilir.

Veri tablosunda aşağıdaki biçimde dört sütun bulunmalıdır:

Sütun 0 - [dize] Bu düğümün kimliği. Boşluklar dahil olmak üzere geçerli bir JavaScript dizesi ve bir dizenin barındırabileceği herhangi bir uzunluk olabilir. Bu değer, düğüm başlığı olarak gösterilir.
Sütun 1 - [dize] - Üst düğümün kimliği. Bu bir kök düğümse bu alanı boş bırakın. Treemap başına yalnızca bir köke izin verilir.
2. Sütun - [sayı] - Düğümün boyutu. Tüm pozitif değerlere izin verilir. Bu değer, şu anda gösterilen diğer tüm düğümlere göre hesaplanan, düğümün boyutunu belirler. Yaprak olmayan düğümler için bu değer yok sayılır ve tüm alt öğelerinin boyutundan hesaplanır.
3. Sütun - [isteğe bağlı, sayı] - Bu düğümün rengini hesaplamak için kullanılan isteğe bağlı bir değer. Pozitif veya negatif tüm değerlere izin verilir. Renk değeri ilk olarak minColorValue ile maxColorValue arasındaki bir ölçekte yeniden hesaplanır. Daha sonra düğüme minColor ile maxColor arasındaki gradyan üzerinden bir renk atanır.

Yapılandırma Seçenekleri

Ad
etkinleştirVurgula (v50 ve sonraki sürümler için)	Öğelerin vurgulanan efektleri gösterip göstermeyeceğini belirler. Varsayılan tetikleyici fare imleci üzerine getirildiğindedir. Tetikleyici, `eventsConfig` ile yapılandırılabilir. `true` olarak ayarlanırsa farklı öğeler için vurgulama, çeşitli `highlightColor` seçenekleriyle belirtilebilir. Tür: boole Varsayılan: false
eventsConfig (v50 ve sonraki sürümler için)	Ağaç harita etkileşimlerini tetikleyecek etkinlik yapılandırması. Etkileşimleri yapılandırmak için biçimlendirin: eventsConfig: { interaction1: undefined, // or missing interaction2: [], // disable interaction3: [ 'mouse_event', 'optional_key1', 'optional_key2', 'optional_key3', 'optional_key4' ], ..., } Yapılandırma dizisi tanımlanmamışsa veya bir etkileşim için eksikse varsayılan kullanılır. Yapılandırma boş bir diziyse etkileşim devre dışı bırakılır. Geçerli bir yapılandırma için `mouse_event` gereklidir ve desteklenen bir fare etkinliği olmalıdır. Ardından, isteğe bağlı en fazla dört tuş değiştirici kullanabilirsiniz. Desteklenen etkileşimler: vurgulama, vurgulamayı kaldırma, birleştirme, ayrıntılı inceleme. Desteklenen fare etkinlikleri: "click", "contextmenu", "dblclick", "mouseout", "mouseover". 'contextmenu' ile sağ tıklamaya karşılık gelir. Desteklenen etkinlik değiştirici tuşları: 'altKey', 'ctrlKey', 'metaKey', 'shiftKey'. Geçerli yapılandırmayı alın: Çağrı yöntemi `getEventsConfig()`. Ağaçta yukarı çıkmak için Control+Üst Karakter+Right_Click kullanımına örnek: { rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] } Tür: nesne Varsayılan: { highlight: ['mouseover'], unhighlight: ['mouseout'], rollup: ['contextmenu'], // right-click drilldown: ['click'] }
fontColor	Metin rengi. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #DCB
fontFamily	Tüm metin için kullanılacak yazı tipi ailesi. Tür: dize Varsayılan: auto
fontSize	Tüm metin için punto cinsinden yazı tipi boyutu. Tür: numara Varsayılan: 12
forceIFrame	Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.) Tür: boole Varsayılan: false
headerColor	Her bir düğümün başlık bölümünün rengi. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #988f86
headerHeight	Her bir düğümün başlık bölümünün piksel cinsinden yüksekliği (sıfır olabilir). Numarayı tür Varsayılan: 0
headerHighlightColor	Üzerine gelinen düğümün başlığının rengi. Bir HTML renk değeri veya null belirtin. Boş bırakılırsa bu değer, `headerColor` %35 aydınlatılır. Tür: dize Varsayılan: null
vurgulamaOnMouseOver (v50 ve sonraki sürümler için kullanımdan kaldırıldı)	v50 ve sonraki sürümler için desteği sonlandırıldı. v50 ve sonrası için lütfen `enableHighlight` kullanın. Fareyle üzerine gelindiğinde öğelerin vurgulanan efektleri gösterip göstermeyeceğini belirler. `true` olarak ayarlanırsa farklı öğeler için vurgulama, çeşitli `highlightColor` seçenekleriyle belirtilebilir. Tür: boole Varsayılan: false
hintOpacity	`maxPostDepth`, 1'den büyük olduğunda ve mevcut derinliğin altındaki düğümlerin gösterilmesine neden olduğunda `hintOpacity`, ne kadar şeffaf olması gerektiğini belirtir. 0 ile 1 arasında olmalıdır. Değer ne kadar yüksekse düğüm o kadar soluklaşır. Tür: numara Varsayılan: 0,0
maxColor	Sütun 3'ün değeri `maxColorValue` olan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #00dd00
maxDepth	Geçerli görünümde gösterilecek maksimum düğüm düzeyi sayısı. Seviyeler mevcut düzlemde hizalanır. Ağacınızda bundan daha fazla seviye varsa bunları görmek için yukarı veya aşağı gitmeniz gerekir. Ayrıca, bu düğümlerin içinde gölgeli dikdörtgenler olarak bunun altındaki `maxPostDepth` düzeylerini görebilirsiniz. Tür: numara Varsayılan: 1
maxHighlightColor	3. sütundaki en büyük değere sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin. Boş ise bu değer, %35 aydınlatılmış `maxColor` değeri olacaktır Tür: dize Varsayılan: null
maxPostDepth	`maxDepth` dışında "ipuçlu" şekilde gösterilecek düğüm düzeyi sayısı. İpucu olan düğümler, `maxDepth` sınırı dahilinde olan bir düğüm içinde gölgeli dikdörtgenler olarak gösterilir. Tür: numara Varsayılan: 0
maxColorValue	3. sütunda izin verilen maksimum değer. Bundan büyük olan tüm değerler bu değere kırpılır. Null değerine ayarlanırsa sütundaki maksimum değere ayarlanır. Tür: numara Varsayılan: null
midColor	`maxColorValue` ile `minColorValue` arasında, 3. sütun değeri ortasında olan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #000000
midHighlightColor	`minColorValue` ve `maxColorValue` ortanca değerine yakın bir sütun 3 değerine sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin. Boşsa bu değer, %35 aydınlatılmış `midColor` değeri olacaktır. Tür: dize Varsayılan: null
minColor	Sütun 3'ün değeri `minColorValue` olan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #dd0000
minHighlightColor	`minColorValue` değerine en yakın olan 3. sütun değerine sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin; boşsa bu değer, %35 aydınlatılmış `minColor` değeri olacaktır Tür: dize Varsayılan: null
minColorValue	3. sütunda izin verilen minimum değerdir. Bundan küçük tüm değerler, bu değere göre kırpılır. Null değerine ayarlanırsa sütundaki minimum değer olarak hesaplanır. Tür: numara Varsayılan: null
noColor	3. sütunda değer yoksa ve bu düğüm yapraksa (veya yalnızca yapraklar içeriyorsa) dikdörtgen için kullanılacak renk. Bir HTML renk değeri belirtin. Tür: dize Varsayılan: #000000
noHighlightColor	Vurgulandığında "hayır" renkli bir dikdörtgen için kullanılacak renk. Bir HTML renk değeri veya boş değer belirtin. Boşsa bu değer, %35 aydınlatılmış `noColor` değeri olacaktır. Tür: dize Varsayılan: null
showScale	Grafiğin üst kısmında `minColor` ile `maxColor` arasındaki bir renk gradyanı ölçeğinin gösterilip gösterilmeyeceğini belirler. Ölçeği göstermek için true değerini belirtin. Tür: boole Varsayılan: false
showTooltips	İpuçlarının gösterilip gösterilmeyeceğini belirler. Tür: boole Varsayılan: true
textStyle	Ağaç harita gibi içerik alanında metin içeren belirli grafikler için metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color`, herhangi bir HTML renk dizesi olabilir. Örneğin: `'red'` veya `'#00cc00'`. Ayrıca bkz. `fontName` ve `fontSize`. Tür: nesne Varsayılan: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
title	Grafiğin üzerinde gösterilecek metin. Tür: dize Varsayılan: başlık yok
titleTextStyle	Başlık metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color`, herhangi bir HTML renk dizesi olabilir. Örneğin: `'red'` veya `'#00cc00'`. Ayrıca bkz. `fontName` ve `fontSize`. Tür: nesne Varsayılan: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
useWeightedAverageForAggregation	Toplama için ağırlıklı ortalamaların kullanılıp kullanılmayacağını belirler. Tür: boole Varsayılan: false

Yöntemler

Yöntem
`draw(data, options)`	Grafiği çizer. Return Type (Dönüş Türü): yok
`getEventsConfig() (for v50+)`	Mevcut etkileşim yapılandırmasını döndürür. Bu, `eventsConfig` yapılandırma seçeneğini doğrulamak için kullanılabilir Return Type (Dönüş Türü): Nesne { // An empty array (i.e. []) means the interaction is disabled. highlight: string[], unhighlight: string[], rollup: string[], drilldown: string[] }
`getSelection()`	Standart `getSelection()` uygulaması. Seçilen öğeler düğüm. Tek seferde yalnızca bir düğüm seçilebilir. Dönüş Türü: Seçim öğeleri dizisi
`setSelection()`	Standart `setSelection()` uygulaması. Seçilen öğeler düğüm. Tek seferde yalnızca bir düğüm seçilebilir. Return Type (Dönüş Türü): yok
`goUpAndDraw()`	Ağacı bir seviye yukarı taşıyıp yeniden çizin. Düğüm kök düğümse hata bildirmez. Kullanıcı bir düğümü sağ tıkladığında bu komut otomatik olarak tetiklenir. Return Type (Dönüş Türü): yok
`getMaxPossibleDepth()`	Geçerli görünüm için mümkün olan maksimum derinliği döndürür. İade Türü: numara
`clearChart()`	Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (Dönüş Türü): yok

Etkinlikler

Yapılandırılabilir etkinlik tetikleyicileri için lütfen eventsConfig sayfasına bakın.

Ad
`onmouseover`	Kullanıcı faresini bir düğümün üzerine getirdiğinde tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır. Özellikler: satır
`highlight (for v50+)`	Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici fareyle üzerine gelme şeklindedir. v50 ve sonraki sürümler için `eventsConfig` ile yapılandırılabilir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır. Özellikler: satır
`onmouseout`	Kullanıcı faresini bir düğümden çektiğinde tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır. Özellikler: satır
`unhighlight (for v50+)`	Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici farenin çekilmesidir. v50 ve sonraki sürümler için `eventsConfig` ile yapılandırılabilir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır. Özellikler: satır
`ready`	Grafik, harici yöntem çağrıları için hazır olduğunda tetiklenir. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz `draw` yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir. Özellikler: Yok
`rollup`	Kullanıcı, ağaçta tekrar yukarı gittiğinde tetiklenir. Varsayılan tetikleyici sağ tıklamadır. v50+ için `eventsConfig` ile yapılandırılabilir. Etkinlik işleyiciye iletilen satır özelliği, kullanıcının gittiği kaynak değil, kullanıcının gittiği düğümün satırıdır. Özellikler: satır
`select`	Kullanıcı bir düğümü ayrıntılı olarak incelediğinde veya yukarı çektiğinde tetiklenir. `setSelection()` veya `goUpAndDraw()` yöntemi çağrıldığında da tetiklenir. Hangi düğümün seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın. Özellikler: yok
`drilldown (for v50+)`	Kullanıcı ağacın daha derinlerine gittiğinde tetiklenir. Varsayılan tetikleyici tıklamadır. v50 ve sonraki sürümler için `eventsConfig` ile yapılandırılabilir. Hangi düğümün tıklandığını öğrenmek için `getSelection()` numaralı telefonu arayın. Özellikler: yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.

Ağaç grafikler Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.