ট্রিম্যাপস

  1. ওভারভিউ
  2. উদাহরণ
  3. হাইলাইট
  4. টুলটিপস
  5. লোড হচ্ছে
  6. উপাত্ত বিন্যাস
  7. কনফিগারেশন অপশন
  8. পদ্ধতি
  9. ঘটনা
  10. ডেটা নীতি

ওভারভিউ

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

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

উদাহরণ 

<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 বিকল্পগুলি ব্যবহার করে উপাদানগুলি হাইলাইট করার জন্য ব্যবহার করার জন্য আপনার রঙগুলি সেট করতে পারেন। 

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

প্রকার: স্ট্রিং
ডিফল্ট: নাল
শোস্কেল

চার্টের শীর্ষে minColor থেকে maxColor পর্যন্ত একটি কালার গ্রেডিয়েন্ট স্কেল দেখাবেন কি না। স্কেল দেখানোর জন্য সত্য উল্লেখ করুন।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
শো টুলটিপস

টুলটিপ দেখাবে কিনা।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
পাঠ্যশৈলী

একটি অবজেক্ট যা পাঠ্য শৈলী নির্দিষ্ট করে, নির্দিষ্ট চার্টের জন্য যেগুলির বিষয়বস্তু অঞ্চলে পাঠ্য রয়েছে যেমন ট্রিম্যাপ। বস্তুর এই বিন্যাস আছে:

{ 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() কল করুন।

বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

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