این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

نقشه های درختی

بررسی اجمالی
مثال
نکات برجسته
نکات ابزار
بارگذاری
فرمت داده
گزینه های پیکربندی
مواد و روش ها
مناسبت ها
سیاست داده

بررسی اجمالی

یک نمایش بصری از یک درخت داده، که در آن هر گره می تواند صفر یا چند فرزند، و یک والد (به جز ریشه، که پدر و مادر ندارد) داشته باشد. هر گره به صورت یک مستطیل نمایش داده می شود، اندازه و رنگ آن بر اساس مقادیری که شما اختصاص می دهید. اندازه ها و رنگ ها نسبت به تمام گره های دیگر در نمودار ارزش گذاری می شوند. شما می توانید تعیین کنید چند سطح به طور همزمان نمایش داده شود و به صورت اختیاری سطوح عمیق تر را به صورت اشاره ای نمایش دهید. اگر یک گره یک گره برگ است، می توانید اندازه و رنگ را مشخص کنید. اگر یک برگ نباشد، به عنوان یک کادر محدود کننده برای گره های برگ نمایش داده می شود. رفتار پیش‌فرض این است که وقتی کاربر روی گره‌ای چپ کلیک می‌کند، درخت را پایین می‌آورد و وقتی کاربر روی نمودار کلیک راست می‌کند، به سمت بالا حرکت می‌کند.

اندازه کل نمودار با اندازه عنصر حاوی که در صفحه خود وارد می کنید تعیین می شود. اگر گره های برگ با نام های خیلی طولانی برای نشان دادن دارید، نام با بیضی کوتاه می شود (...).

مثال

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>

نکات برجسته

می‌توانید مشخص کنید که آیا عناصر باید برجسته شوند یا خیر، و رنگ‌های خاصی را برای عناصر خاص تنظیم کنید تا در صورت وقوع این اتفاق استفاده شود. برای روشن کردن هایلایت، highlightOnMouseOver:true (برای نسخه 49 یا قبل) یا enableHighlight: true (برای نسخه 50+) را تنظیم کنید. از آنجا، می توانید رنگ های خود را برای برجسته کردن عناصر با استفاده از گزینه های مختلف HighlightColor تنظیم کنید.

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

نکات ابزار

به‌طور پیش‌فرض، راهنمایی‌های نقشه درختی پایه هستند و برچسب سلول نقشه درخت را نشان می‌دهند. این زمانی مفید است که سلول‌ها برای داشتن برچسب‌ها خیلی کوچک هستند، اما می‌توانید آن‌ها را همانطور که در این بخش توضیح داده شده است سفارشی کنید.

راهنمای ابزار Treemap متفاوت از نمودارهای دیگر سفارشی می شود: شما یک تابع را تعریف می کنید و سپس گزینه 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 می تواند هر جاوا اسکریپت مورد علاقه شما باشد. معمولاً شما به نکات ابزاری نیاز دارید که بر اساس مقادیر داده متفاوت باشد. مثال زیر نحوه دسترسی به هر فیلد در جدول داده را نشان می دهد.

اگر ماوس را روی سلول های نقشه درختی بالا نگه دارید، برای هر سلول یک راهنمای ابزار متفاوت خواهید دید. توابع راهنمایی نقشه درخت همگی سه مقدار دارند: row ، size و value .

row : ردیف سلول از جدول داده
size : مجموع مقدار (ستون 3) این سلول و همه فرزندان آن
value : رنگ سلول که به صورت عددی از 0 تا 1 بیان می شود

در showFullTooltip ، رشته‌ای که برمی‌گردانیم یک کادر HTML با پنج خط است:

خط 1 ردیف مناسب را از جدول داده نشان می دهد و از data.getValue آزادانه استفاده می کند.
خط 2 به شما می گوید که کدام ردیف است، که فقط پارامتر row است.
خط 3 اطلاعاتی را از ستون 3 جدول داده به شما می دهد: مجموع مقدار ستون 3 از این ردیف، به اضافه مقادیر از فرزندان.
خط 4 اطلاعاتی را از ستون 4 جدول داده به شما می دهد. این مقدار است، اما به عنوان یک عدد بین 0 و 1 مربوط به رنگ سلول بیان می شود.

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

بارگذاری

نام بسته google.charts.load "treemap" است.

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

نام کلاس تجسم google.visualization.TreeMap است.

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

فرمت داده

هر ردیف در جدول داده ها یک گره (یک مستطیل در نمودار) را توصیف می کند. هر گره (به جز گره ریشه) یک گره والد دارد. هر گره با توجه به مقادیر آن نسبت به گره های دیگر نشان داده شده اندازه و رنگ می شود.

جدول داده ها باید دارای چهار ستون با فرمت زیر باشد:

ستون 0 - [ رشته ] شناسه ای برای این گره. این می تواند هر رشته معتبر جاوا اسکریپت، از جمله فاصله ها، و هر طولی باشد که یک رشته می تواند نگه دارد. این مقدار به عنوان هدر گره نمایش داده می شود.
ستون 1 - [ رشته ] - شناسه گره والد. اگر این یک گره ریشه است، آن را خالی بگذارید. فقط یک ریشه در هر نقشه درختی مجاز است.
ستون 2 - [ تعداد ] - اندازه گره. هر مقدار مثبت مجاز است. این مقدار اندازه گره را که نسبت به سایر گره های نشان داده شده محاسبه می شود، تعیین می کند. برای گره های غیر برگ، این مقدار نادیده گرفته می شود و از اندازه همه فرزندان آن محاسبه می شود.
ستون 3 - [ اختیاری , شماره ] - یک مقدار اختیاری که برای محاسبه یک رنگ برای این گره استفاده می شود. هر مقدار، مثبت یا منفی، مجاز است. مقدار رنگ ابتدا مجدداً در مقیاسی از minColorValue تا maxColorValue محاسبه می شود و سپس به گره یک رنگ از گرادیان بین minColor و maxColor اختصاص می یابد.

گزینه های پیکربندی

نام
enableHighlight (برای نسخه 50+)	تعیین می کند که آیا عناصر باید جلوه های برجسته را نشان دهند. ماشه پیش فرض زمانی است که ماوس را روی آن قرار می دهیم. ماشه را می توان با `eventsConfig` پیکربندی کرد. اگر روی `true` تنظیم شود، می توان با استفاده از گزینه های مختلف `highlightColor` ، برجسته کردن عناصر مختلف را مشخص کرد. نوع: بولی پیش فرض: نادرست
eventsConfig (برای نسخه 50+)	پیکربندی رویداد برای ایجاد تعاملات نقشه درختی. قالب برای پیکربندی تعاملات: eventsConfig: { interaction1: undefined, // or missing interaction2: [], // disable interaction3: [ 'mouse_event', 'optional_key1', 'optional_key2', 'optional_key3', 'optional_key4' ], ..., } اگر آرایه پیکربندی برای یک تعامل تعریف نشده باشد یا وجود نداشته باشد، پیش فرض استفاده خواهد شد. اگر پیکربندی یک آرایه خالی باشد، تعامل غیرفعال خواهد شد. برای یک پیکربندی معتبر، `mouse_event` مورد نیاز است و باید یک رویداد ماوس پشتیبانی شده باشد. سپس می توانید حداکثر چهار تغییر دهنده کلید اختیاری داشته باشید. تعاملات پشتیبانی شده: برجسته کردن، برجسته کردن، جمع کردن، حفاری کردن . رویدادهای پشتیبانی شده ماوس: 'click'، 'contextmenu'، '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
fontFamily	خانواده فونت برای استفاده برای تمام متن. نوع: رشته پیش فرض: خودکار
اندازه فونت	اندازه فونت برای تمام متن ها، در نقاط. نوع: شماره پیش فرض: 12
forceIFrame	نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست
headerColor	رنگ بخش هدر برای هر گره. مقدار رنگ HTML را مشخص کنید. نوع: رشته پیش‌فرض: #988f86
ارتفاع سرصفحه	ارتفاع بخش هدر برای هر گره، بر حسب پیکسل (می تواند صفر باشد). شماره را تایپ کنید پیش فرض: 0
headerHighlightColor	رنگ هدر گره ای که روی آن قرار گرفته است. مقدار رنگ HTML یا null را مشخص کنید. اگر تهی باشد، این مقدار 35% `headerColor` می شود. نوع: رشته پیش فرض: null
highlightOnMouseOver (منسوخ شده برای نسخه 50+)	برای نسخه 50+ منسوخ شده است. برای نسخه 50 و جدیدتر، لطفاً از `enableHighlight` استفاده کنید. تعیین می‌کند که آیا عناصر باید جلوه‌های برجسته‌شده را هنگام نمایش ماوس نشان دهند. اگر روی `true` تنظیم شود، می توان با استفاده از گزینه های مختلف `highlightColor` ، برجسته کردن عناصر مختلف را مشخص کرد. نوع: بولی پیش فرض: نادرست
hintOpacity	هنگامی که `maxPostDepth` بزرگتر از 1 است و باعث می شود گره های زیر عمق فعلی نشان داده شوند، `hintOpacity` مشخص می کند که چقدر باید شفاف باشد. باید بین 0 و 1 باشد. هر چه مقدار بالاتر باشد، گره کم نورتر می شود. نوع: شماره پیش فرض: 0.0
maxColor	رنگ یک مستطیل با مقدار ستون 3 `maxColorValue` . مقدار رنگ HTML را مشخص کنید. نوع: رشته پیش‌فرض: #00dd00
بیشترین عمق	حداکثر تعداد سطوح گره برای نمایش در نمای فعلی. سطوح در صفحه فعلی صاف خواهند شد. اگر سطح درخت شما بیشتر از این باشد، برای دیدن آنها باید بالا یا پایین بروید. همچنین می توانید سطوح `maxPostDepth` را در زیر این به عنوان مستطیل های سایه دار در این گره ها مشاهده کنید. نوع: شماره پیش فرض: 1
maxHighlightColor	رنگ برجسته برای استفاده برای گره با بیشترین مقدار در ستون 3. یک مقدار رنگ HTML یا null را مشخص کنید. اگر تهی باشد، این مقدار مقدار `maxColor` خواهد بود که 35٪ روشن شده است. نوع: رشته پیش فرض: null
maxPostDepth	چند سطح از گره های فراتر از `maxDepth` برای نشان دادن به مد "اشاره شده". گره های اشاره شده به صورت مستطیل های سایه دار در گره ای که در محدوده `maxDepth` است نشان داده می شوند. نوع: شماره پیش فرض: 0
maxColorValue	حداکثر مقدار مجاز در ستون 3. همه مقادیر بیشتر از این به این مقدار کاهش می یابد. اگر روی null تنظیم شود، مقدار حداکثر در ستون تنظیم می شود. نوع: شماره پیش فرض: null
midColor	رنگ یک مستطیل با مقدار ستون 3 در وسط بین `maxColorValue` و `minColorValue` . مقدار رنگ HTML را مشخص کنید. نوع: رشته پیش‌فرض: #000000
midHighlightColor	رنگ برجسته برای استفاده برای گره با مقدار ستون 3 نزدیک به میانه `minColorValue` و `maxColorValue` . مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار مقدار `midColor` خواهد بود که 35% روشن شده است. نوع: رشته پیش فرض: null
minColor	رنگ یک مستطیل با مقدار ستون 3 `minColorValue` . مقدار رنگ HTML را مشخص کنید. نوع: رشته پیش‌فرض: #dd0000
minHighlightColor	رنگ برجسته برای استفاده برای گره با مقدار ستون 3 نزدیکترین به `minColorValue` . مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار مقدار `minColor` خواهد بود که 35٪ روشن شده است. نوع: رشته پیش فرض: null
minColorValue	حداقل مقدار مجاز در ستون 3. همه مقادیر کمتر از این به این مقدار بریده می شوند. اگر روی null تنظیم شود، به عنوان حداقل مقدار در ستون محاسبه می شود. نوع: شماره پیش فرض: null
بدون رنگ	رنگی که برای یک مستطیل استفاده می شود، زمانی که یک گره برای ستون 3 ارزشی ندارد، و آن گره یک برگ است (یا فقط دارای برگ است). مقدار رنگ HTML را مشخص کنید. نوع: رشته پیش‌فرض: #000000
noHighlightColor	رنگی که برای یک مستطیل با رنگ "بدون" در هنگام هایلایت استفاده می شود. مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار `noColor` است که 35% روشن شده است. نوع: رشته پیش فرض: null
نمایش مقیاس	اینکه آیا یک مقیاس گرادیان رنگ از `minColor` تا `maxColor` در بالای نمودار نشان داده شود یا خیر. برای نشان دادن مقیاس، true را مشخص کنید. نوع: بولی پیش فرض: نادرست
showTooltips	آیا برای نمایش نکات ابزار. نوع: بولی پیش فرض: درست است
textStyle	یک شی که سبک متن را برای نمودارهای خاصی که دارای متن در ناحیه محتوا هستند، مانند نقشه درختی، مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` می تواند هر رشته رنگی HTML باشد، به عنوان مثال: `'red'` یا `'#00cc00'` . همچنین `fontName` و `fontSize` را ببینید. نوع: شی پیش‌فرض: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
عنوان	متن برای نمایش در بالای نمودار. نوع: رشته پیش فرض: بدون عنوان
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()` را فراخوانی کنید. خواص: هیچ

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.