এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ট্রিম্যাপস

ওভারভিউ
উদাহরণ
হাইলাইট
টুলটিপস
লোড হচ্ছে
উপাত্ত বিন্যাস
কনফিগারেশন অপশন
পদ্ধতি
ঘটনা
ডেটা নীতি

ওভারভিউ

একটি ডেটা ট্রির একটি ভিজ্যুয়াল উপস্থাপনা, যেখানে প্রতিটি নোডে শূন্য বা তার বেশি সন্তান থাকতে পারে এবং একজন অভিভাবক (মূল বাদে, যার কোনো পিতামাতা নেই)। প্রতিটি নোড একটি আয়তক্ষেত্র হিসাবে প্রদর্শিত হয়, আপনার নির্ধারিত মান অনুযায়ী আকার এবং রঙিন। গ্রাফের অন্যান্য সমস্ত নোডের তুলনায় আকার এবং রঙগুলি মূল্যবান। আপনি একই সাথে কতগুলি স্তর প্রদর্শন করতে হবে তা নির্দিষ্ট করতে পারেন, এবং ঐচ্ছিকভাবে একটি ইঙ্গিতযুক্ত ফ্যাশনে গভীর স্তরগুলি প্রদর্শন করতে। যদি একটি নোড একটি পাতার নোড হয়, আপনি একটি আকার এবং রঙ নির্দিষ্ট করতে পারেন; যদি এটি একটি পাতা না হয়, এটি পাতার নোডের জন্য একটি আবদ্ধ বাক্স হিসাবে প্রদর্শিত হবে। ডিফল্ট আচরণ হল যখন একজন ব্যবহারকারী একটি নোড-এ বাম-ক্লিক করে তখন গাছের নিচে সরানো, এবং যখন ব্যবহারকারী গ্রাফে ডান-ক্লিক করে তখন গাছের উপরে সরানো।

গ্রাফের মোট আকার আপনি আপনার পৃষ্ঠায় সন্নিবেশ করা উপাদানের আকার দ্বারা নির্ধারিত হয়। আপনার যদি লিফ নোডের নামগুলি দেখাতে খুব বেশি লম্বা থাকে, তাহলে নামটি উপবৃত্তাকার (...) দিয়ে কাটা হবে।

উদাহরণ

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

হাইলাইট

উপাদানগুলি হাইলাইট করা উচিত কিনা তা আপনি নির্দিষ্ট করতে পারেন এবং যখন এটি ঘটে তখন নির্দিষ্ট উপাদানগুলির ব্যবহার করার জন্য নির্দিষ্ট রঙ সেট করুন। হাইলাইট চালু করতে, হাইলাইটঅনমাউসওভার সেট করুন highlightOnMouseOver:true (v49 বা তার আগে) অথবা enableHighlight: true (v50+ এর জন্য)। সেখান থেকে, আপনি বিভিন্ন HighlightColor কালার বিকল্পগুলি ব্যবহার করে উপাদানগুলি হাইলাইট করার জন্য ব্যবহার করার জন্য আপনার রঙগুলি সেট করতে পারেন।

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

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

টুলটিপস

ডিফল্টরূপে, ট্রিম্যাপ টুলটিপ মৌলিক, ট্রিম্যাপ ঘরের লেবেল দেখায়। লেবেলগুলি ধারণ করার জন্য কোষগুলি খুব ছোট হলে এটি দরকারী, তবে আপনি এই বিভাগে বর্ণিত হিসাবে সেগুলিকে আরও কাস্টমাইজ করতে পারেন৷

ট্রিম্যাপ টুলটিপগুলি অন্যান্য চার্টের থেকে আলাদাভাবে কাস্টমাইজ করা হয়েছে: আপনি একটি ফাংশন সংজ্ঞায়িত করুন এবং তারপর সেই ফাংশনে generateTooltip টুলটিপ বিকল্পটি সেট করুন। এখানে একটি সহজ উদাহরণ:

উপরের চার্টে, আমরা showStaticTooltip নামক একটি ফাংশনকে সংজ্ঞায়িত করি যা ব্যবহারকারী যখনই একটি ট্রিম্যাপ সেলের উপর ঘোরাফেরা করে তখন দেখানোর জন্য HTML সহ একটি স্ট্রিং প্রদান করে। এটা চেষ্টা করুন! যে কোডটি তৈরি করতে হবে তা নিম্নরূপ:

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

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

generateTooltip ফাংশন আপনার পছন্দের যেকোনো জাভাস্ক্রিপ্ট হতে পারে। সাধারণত, আপনি টুলটিপ চাইবেন যা ডেটা মানের উপর ভিত্তি করে পরিবর্তিত হয়। নিম্নলিখিত উদাহরণ দেখায় কিভাবে ডেটা টেবিলের প্রতিটি ক্ষেত্র অ্যাক্সেস করতে হয়।

আপনি যদি উপরের ট্রিম্যাপের কক্ষগুলির উপর ঘোরান, আপনি প্রতিটি কক্ষের জন্য আলাদা টুলটিপ দেখতে পাবেন। ট্রিম্যাপ টুলটিপ ফাংশন তিনটি মান নেয়: 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 - [ ঐচ্ছিক , সংখ্যা ] - এই নোডের জন্য একটি রঙ গণনা করতে ব্যবহৃত একটি ঐচ্ছিক মান। যে কোনো মান, ইতিবাচক বা নেতিবাচক, অনুমোদিত. রঙের মানটি প্রথমে maxColorValue থেকে minColorValue পর্যন্ত একটি স্কেলে পুনরায় গণনা করা হয়, এবং তারপর minColor এবং maxColor এর মধ্যে গ্রেডিয়েন্ট থেকে একটি রঙ বরাদ্দ করা হয়।

কনফিগারেশন অপশন

নাম
হাইলাইট সক্ষম করুন (v50+ এর জন্য)	উপাদানগুলি হাইলাইট করা প্রভাবগুলি দেখাবে কিনা তা নির্ধারণ করে৷ ডিফল্ট ট্রিগার যখন মাউস ওভার হয়. `eventsConfig` দিয়ে কনফিগার করা যেতে পারে। `true` তে সেট করা হলে, বিভিন্ন `highlightColor` বিকল্প ব্যবহার করে বিভিন্ন উপাদানের জন্য হাইলাইটিং নির্দিষ্ট করা যেতে পারে। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা
eventConfig (v50+ এর জন্য)	ট্রি ম্যাপ ইন্টারঅ্যাকশন ট্রিগার করতে ইভেন্ট কনফিগারেশন। মিথস্ক্রিয়া কনফিগার করার বিন্যাস: eventsConfig: { interaction1: undefined, // or missing interaction2: [], // disable interaction3: [ 'mouse_event', 'optional_key1', 'optional_key2', 'optional_key3', 'optional_key4' ], ..., } যদি কনফিগার অ্যারে অনির্ধারিত হয় বা একটি মিথস্ক্রিয়া জন্য অনুপস্থিত, ডিফল্ট ব্যবহার করা হবে. কনফিগার একটি খালি অ্যারে হলে, মিথস্ক্রিয়া নিষ্ক্রিয় করা হবে। একটি বৈধ কনফিগারেশনের জন্য, `mouse_event` প্রয়োজন এবং একটি সমর্থিত মাউস ইভেন্ট হতে হবে। তারপর আপনার কাছে চারটি ঐচ্ছিক কী মডিফায়ার থাকতে পারে। সমর্থিত মিথস্ক্রিয়া: হাইলাইট, আনহাইলাইট, রোলআপ, ড্রিলডাউন । সমর্থিত মাউস ইভেন্ট: 'ক্লিক', 'প্রসঙ্গমেনু', 'dblclick', 'মাউসআউট', 'মাউসওভার' । সাথে 'প্রসঙ্গমেনু' ডান-ক্লিকের সাথে মিলে যায়। সমর্থিত মাউস ইভেন্ট মডিফায়ার কী: '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 চার্ট আই-ফ্রেমে আঁকা হয়েছে।) প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা
হেডার কালার	প্রতিটি নোডের জন্য হেডার বিভাগের রঙ। একটি HTML রঙের মান উল্লেখ করুন। প্রকার: স্ট্রিং ডিফল্ট: #988f86
হেডার উচ্চতা	প্রতিটি নোডের জন্য হেডার বিভাগের উচ্চতা, পিক্সেলে (শূন্য হতে পারে)। নম্বর টাইপ করুন ডিফল্ট: 0
হেডার হাইলাইট কালার	একটি নোডের শিরোলেখের রঙটি উপরে ঝুলছে। একটি HTML রঙের মান বা নাল উল্লেখ করুন; শূন্য হলে এই মানটি `headerColor` 35% দ্বারা হালকা করা হবে। প্রকার: স্ট্রিং ডিফল্ট: নাল
হাইলাইটঅনমাউসওভার (v50+ এর জন্য বঞ্চিত)	v50+ এর জন্য অপ্রচলিত। v50 এবং পরবর্তীতে, অনুগ্রহ করে `enableHighlight` ব্যবহার করুন। মাউস ওভার করার সময় উপাদানগুলি হাইলাইট করা প্রভাব দেখাবে কিনা তা নির্ধারণ করে। `true` তে সেট করা হলে, বিভিন্ন `highlightColor` বিকল্প ব্যবহার করে বিভিন্ন উপাদানের জন্য হাইলাইটিং নির্দিষ্ট করা যেতে পারে। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা
ইঙ্গিত অস্বচ্ছতা	যখন `maxPostDepth` 1 এর বেশি হয়, যার ফলে বর্তমান গভীরতার নীচে নোডগুলি দেখানো হয়, `hintOpacity` এটি কতটা স্বচ্ছ হওয়া উচিত তা নির্দিষ্ট করে। এটি 0 এবং 1 এর মধ্যে হওয়া উচিত; মান যত বেশি, নোড তত দুর্বল। প্রকার: সংখ্যা ডিফল্ট: 0.0
সর্বোচ্চ রঙ	`maxColorValue` এর একটি কলাম 3 মান সহ একটি আয়তক্ষেত্রের রঙ। একটি HTML রঙের মান উল্লেখ করুন। প্রকার: স্ট্রিং ডিফল্ট: #00dd00
সর্বোচ্চ গভীরতা	বর্তমান দৃশ্যে দেখানোর জন্য সর্বাধিক সংখ্যক নোড স্তর৷ বর্তমান সমতলে স্তর সমতল করা হবে। যদি আপনার গাছে এর চেয়ে বেশি মাত্রা থাকে, তবে সেগুলি দেখতে আপনাকে উপরে বা নীচে যেতে হবে। আপনি অতিরিক্তভাবে এই নোডগুলির মধ্যে ছায়াযুক্ত আয়তক্ষেত্র হিসাবে এর নীচে `maxPostDepth` স্তরগুলি দেখতে পারেন। প্রকার: সংখ্যা ডিফল্ট: 1
সর্বোচ্চ হাইলাইট রঙ	কলাম 3-এ সবচেয়ে বড় মান সহ নোডের জন্য ব্যবহার করার জন্য হাইলাইট রঙ। একটি HTML রঙের মান বা নাল উল্লেখ করুন; শূন্য হলে, এই মানটি 35% দ্বারা হালকা করা `maxColor` এর মান হবে প্রকার: স্ট্রিং ডিফল্ট: নাল
maxPostDepth	"ইঙ্গিত" ফ্যাশনে দেখানোর জন্য `maxDepth` ছাড়িয়ে নোডের কত স্তর। ইঙ্গিত করা নোডগুলিকে একটি নোডের মধ্যে ছায়াযুক্ত আয়তক্ষেত্র হিসাবে দেখানো হয় যা `maxDepth` সীমার মধ্যে থাকে। প্রকার: সংখ্যা ডিফল্ট: 0
maxColorValue	কলাম 3-এ অনুমোদিত সর্বাধিক মান। এর চেয়ে বড় সমস্ত মান এই মানটিতে ছাঁটাই করা হবে। যদি নাল সেট করা হয়, এটি কলামের সর্বোচ্চ মান সেট করা হবে। প্রকার: সংখ্যা ডিফল্ট: নাল
মধ্য রঙ	`maxColorValue` এবং `minColorValue` এর মাঝপথে একটি কলাম 3 মান সহ একটি আয়তক্ষেত্রের রঙ। একটি HTML রঙের মান উল্লেখ করুন। প্রকার: স্ট্রিং ডিফল্ট: #000000
মিডহাইলাইট কালার	`minColorValue` এবং `maxColorValue` এর মধ্যকার কাছাকাছি একটি কলাম 3 মান সহ নোডের জন্য ব্যবহার করার জন্য হাইলাইট রঙ। একটি HTML রঙের মান বা নাল উল্লেখ করুন; যদি শূন্য হয়, এই মানটি 35% দ্বারা হালকা করা `midColor` মান হবে। প্রকার: স্ট্রিং ডিফল্ট: নাল
ছোট রঙ	`minColorValue` এর কলাম 3 মান সহ একটি আয়তক্ষেত্রের রঙ। একটি HTML রঙের মান উল্লেখ করুন। প্রকার: স্ট্রিং ডিফল্ট: #dd0000
minHighlight Color	`minColorValue` কাছাকাছি একটি কলাম 3 মান সহ নোডের জন্য ব্যবহার করার জন্য হাইলাইট রঙ। একটি HTML রঙের মান বা নাল উল্লেখ করুন; যদি শূন্য হয়, তাহলে এই মানটি হবে `minColor` এর মান 35% দ্বারা হালকা প্রকার: স্ট্রিং ডিফল্ট: নাল
minColorValue	কলাম 3-এ অনুমোদিত ন্যূনতম মান। এর চেয়ে কম সমস্ত মান এই মানটিতে ছাঁটাই করা হবে। নাল সেট করা হলে, এটি কলামের সর্বনিম্ন মান হিসাবে গণনা করা হবে। প্রকার: সংখ্যা ডিফল্ট: নাল
কোন রঙ	একটি আয়তক্ষেত্রের জন্য যে রঙটি ব্যবহার করা হবে যখন একটি নোডের কলাম 3 এর জন্য কোন মান থাকে না এবং সেই নোডটি একটি পাতা (বা শুধুমাত্র পাতা থাকে)। একটি HTML রঙের মান উল্লেখ করুন। প্রকার: স্ট্রিং ডিফল্ট: #000000
কোন হাইলাইট রঙ	হাইলাইট করার সময় "না" রঙের একটি আয়তক্ষেত্রের জন্য ব্যবহার করা রঙ। একটি HTML রঙের মান বা নাল উল্লেখ করুন; যদি শূন্য হয়, তাহলে এটি `noColor` এর মান 35% দ্বারা হালকা হবে। প্রকার: স্ট্রিং ডিফল্ট: নাল
শোস্কেল	চার্টের শীর্ষে `maxColor` থেকে `minColor` পর্যন্ত একটি কালার গ্রেডিয়েন্ট স্কেল দেখাবেন কি না। স্কেল দেখানোর জন্য সত্য উল্লেখ করুন। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা
শো টুলটিপস	টুলটিপ দেখাবে কিনা। প্রকার: বুলিয়ান ডিফল্ট: সত্য
পাঠ্যশৈলী	একটি অবজেক্ট যা পাঠ্য শৈলী নির্দিষ্ট করে, নির্দিষ্ট চার্টের জন্য যেগুলির বিষয়বস্তু অঞ্চলে পাঠ্য রয়েছে যেমন ট্রিম্যাপ। বস্তুর এই বিন্যাস আছে: { 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>}`
শিরোনাম	চার্টের উপরে দেখানোর জন্য পাঠ্য। প্রকার: স্ট্রিং ডিফল্ট: কোন শিরোনাম নেই
শিরোনাম টেক্সটস্টাইল	একটি বস্তু যা শিরোনাম পাঠ্য শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে: { 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>}`
ওজনযুক্তAverageForAggregation ব্যবহার করুন	সমষ্টির জন্য ওজনযুক্ত গড় ব্যবহার করতে হবে কিনা। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা

পদ্ধতি

পদ্ধতি
`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+)`	যখন ব্যবহারকারী একটি নোড হাইলাইট করে তখন বহিস্কার করা হয়। ডিফল্ট ট্রিগার হল মাউসওভার। এটি v50+ এর জন্য `eventsConfig` এর সাথে কনফিগার করা যেতে পারে। ইভেন্ট হ্যান্ডলারকে ডেটা টেবিলে সংশ্লিষ্ট এন্ট্রির সারি সূচক পাস করা হয়। বৈশিষ্ট্য: সারি
`onmouseout`	একটি নোড থেকে ব্যবহারকারী মাউস আউট যখন বহিস্কার. ইভেন্ট হ্যান্ডলারকে ডেটা টেবিলে সংশ্লিষ্ট এন্ট্রির সারি সূচক পাস করা হয়। বৈশিষ্ট্য: সারি
`unhighlight (for v50+)`	ব্যবহারকারী যখন একটি নোড আনহাইলাইট করে তখন বহিস্কার করা হয়। ডিফল্ট ট্রিগার হল মাউসআউট। এটি v50+ এর জন্য `eventsConfig` এর সাথে কনফিগার করা যেতে পারে। ইভেন্ট হ্যান্ডলারকে ডেটা টেবিলে সংশ্লিষ্ট এন্ট্রির সারি সূচক পাস করা হয়। বৈশিষ্ট্য: সারি
`ready`	বহিরাগত পদ্ধতি কলের জন্য চার্ট প্রস্তুত হলে বহিস্কার করা হয়। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে `draw` পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে। বৈশিষ্ট্য: কোনটিই নয়
`rollup`	ব্যবহারকারী যখন গাছের ব্যাক আপ নেভিগেট করেন তখন বহিস্কার করা হয়। ডিফল্ট ট্রিগার ডান ক্লিক করা হয়. এটি v50+ এর জন্য `eventsConfig` এর সাথে কনফিগার করা যেতে পারে। ইভেন্ট হ্যান্ডলারে পাস করা সারি বৈশিষ্ট্য হল নোডের সারি যা ব্যবহারকারী নেভিগেট করছে, ব্যবহারকারী যে সারিটিতে নেভিগেট করছে সেটি নয়। বৈশিষ্ট্য: সারি
`select`	ব্যবহারকারী যখন ড্রিল ডাউন করে, বা একটি নোড রোল আপ করে তখন বহিস্কার হয়। যখন মেথড `setSelection()` বা `goUpAndDraw()` বলা হয় তখনও গুলি করা হয়। কোন নোড নির্বাচন করা হয়েছে তা জানতে, `getSelection()` কল করুন। বৈশিষ্ট্য: কোনোটিই নয়
`drilldown (for v50+)`	যখন ব্যবহারকারী গাছের গভীরে নেভিগেট করে তখন বহিস্কার করা হয়। ডিফল্ট ট্রিগার ক্লিক করা হয়. এটি v50+ এর জন্য `eventsConfig` এর সাথে কনফিগার করা যেতে পারে। কোন নোডে ক্লিক করা হয়েছে তা জানতে, `getSelection()` কল করুন। বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।