ट्रीमैप

  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 नाम का एक फ़ंक्शन तय किया है. यह उपयोगकर्ता के किसी ट्रीमैप सेल पर कर्सर घुमाने पर, सिर्फ़ एचटीएमएल वाली स्ट्रिंग दिखाता है. इसे आज़माएं! जनरेट करने के लिए कोड इस प्रकार है:

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

  tree.draw(data, options);

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

generateTooltip फ़ंक्शन आपकी पसंद की कोई भी JavaScript हो सकती है. आम तौर पर, आपको डेटा की वैल्यू के आधार पर अलग-अलग टूलटिप चाहिए. नीचे दिए गए उदाहरण में, डेटा वाली टेबल में मौजूद हर फ़ील्ड को ऐक्सेस करने का तरीका बताया गया है.

ऊपर दिए गए ट्रीमैप में मौजूद सेल पर कर्सर घुमाने पर, आपको हर सेल के लिए अलग टूलटिप दिखेगा. ट्रीमैप टूलटिप के लिए, तीन वैल्यू इस्तेमाल की जाती हैं: row, size, और value.

  • row: डेटा टेबल से सेल की पंक्ति
  • size: इस सेल और इसके सभी बच्चों के मान (कॉलम 3) का योग
  • value: सेल का रंग, जिसे 0 से 1 तक की संख्या के तौर पर दिखाया जाता है

showFullTooltip में, हम जो स्ट्रिंग दिखाते हैं वह एक एचटीएमएल बॉक्स है, जिसमें पांच लाइनें होती हैं:

  • लाइन 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 - [string] इस नोड का आईडी. यह कोई भी मान्य JavaScript स्ट्रिंग हो सकती है. इसमें स्पेस और स्ट्रिंग हो सकती है. यह वैल्यू नोड हेडर के तौर पर दिखती है.
  • कॉलम 1 - [string] - पैरंट नोड का आईडी. अगर यह रूट नोड है, तो इसे खाली छोड़ दें. हर ट्रीमैप के लिए सिर्फ़ एक रूट की अनुमति है.
  • कॉलम 2 - [number] - नोड का साइज़. कोई भी पॉज़िटिव वैल्यू डाली जा सकती है. इस वैल्यू से नोड का साइज़ तय होता है, जिसका आकलन फ़िलहाल दिखाए जा रहे अन्य सभी नोड के हिसाब से किया जाता है. नॉन-लीफ़ नोड के लिए, इस वैल्यू को अनदेखा किया जाता है और इसकी वैल्यू इसके सभी चाइल्ड नोड के हिसाब से कैलकुलेट की जाती है.
  • कॉलम 3 - [ज़रूरी नहीं, number] - इस नोड के लिए रंग को कैलकुलेट करने के लिए इस्तेमाल की जाने वाली वैकल्पिक वैल्यू. कोई भी वैल्यू, पॉज़िटिव या नेगेटिव हो सकती है. कलर वैल्यू को पहले minColorValue से maxColorValue के स्केल पर फिर से कैलकुलेट किया जाता है. इसके बाद, नोड को minColor और maxColor के बीच के ग्रेडिएंट से कोई रंग असाइन किया जाता है.

कॉन्फ़िगरेशन के विकल्प

नाम
enabledहाइलाइट (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 ज़रूरी है. साथ ही, यह एक साथ काम करने वाला माउस इवेंट होना चाहिए. इसके बाद, ज़्यादा से ज़्यादा चार वैकल्पिक बटन मॉडिफ़ायर का इस्तेमाल किया जा सकता है.
साथ काम करने वाले इंटरैक्शन:
हाइलाइट, अनहाइलाइट, रोलअप, ड्रिल-डाउन.
साथ काम करने वाले माउस इवेंट:
'क्लिक करें', 'contextमेन्यू', 'dblclick', 'mouseout', 'mouseover'. 'contextमेन्यू' राइट-क्लिक से मेल खाता है.
इस्तेमाल की जा सकने वाली माउस इवेंट कार्रवाई बदलने वाली कुंजियां:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
मौजूदा कॉन्फ़िगरेशन पाएं:
कॉल करने का तरीका getEventsConfig().
ट्री पर ऊपर जाने के लिए Control+Shift+Right_Click इस्तेमाल करने का उदाहरण:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Type: ऑब्जेक्ट
डिफ़ॉल्ट: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

टेक्स्ट का रंग. एचटीएमएल कलर की वैल्यू डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #स्ट्रिंग
fontFamily

पूरे टेक्स्ट के लिए इस्तेमाल की जाने वाली फ़ॉन्ट फ़ैमिली.

Type: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
fontSize

सभी टेक्स्ट के लिए फ़ॉन्ट का साइज़, पॉइंट में.

टाइप: नंबर
डिफ़ॉल्ट: 12
forceIFrame

चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
headerColor

हर नोड के लिए हेडर सेक्शन का रंग. एचटीएमएल कलर की वैल्यू डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #988f86
headerHeight

पिक्सल में, हर नोड के लिए हेडर सेक्शन की ऊंचाई (शून्य हो सकती है).

टाइप नंबर
डिफ़ॉल्ट: 0
headerHighlightColor

नोड के हेडर का रंग जिस पर कर्सर घुमाया जा रहा है. एचटीएमएल रंग की वैल्यू या शून्य बताएं; खाली होने पर, यह मान headerColor 35% हल्का हो जाएगा.

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
हाइलाइटOnMouseOver (v50+ के लिए बंद किया गया)

v50+ के लिए अब काम नहीं करता. v50 और इसके बाद के वर्शन के लिए, कृपया enableHighlight का इस्तेमाल करें. यह तय करती है कि कर्सर घुमाने पर एलिमेंट पर हाइलाइट किए गए इफ़ेक्ट दिखेंगे या नहीं. अगर true पर सेट है, तो अलग-अलग एलिमेंट को हाइलाइट करने के लिए, कई highlightColor विकल्पों का इस्तेमाल किया जा सकता है.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
hintOpacity

अगर maxPostDepth की वैल्यू एक से ज़्यादा होती है, जिसकी वजह से मौजूदा डेप्थ के नीचे वाले नोड दिखते हैं, तो hintOpacity बताता है कि यह कितना पारदर्शी होना चाहिए. यह 0 से 1 के बीच होना चाहिए. वैल्यू जितनी ज़्यादा होगी, नोड उतना ही हल्का होगा.

टाइप: नंबर
डिफ़ॉल्ट: 0.0
maxColor

maxColorValue के कॉलम 3 की वैल्यू वाले रेक्टैंगल का रंग. एचटीएमएल रंग की कोई वैल्यू तय करें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #00dd00
maxDepth

मौजूदा व्यू में दिखाए जाने वाले नोड लेवल की ज़्यादा से ज़्यादा संख्या. मौजूदा प्लेन के लेवल, वैसे ही कर दिए जाएंगे. अगर आपके ट्री में इससे ज़्यादा लेवल हैं, तो आपको उन्हें देखने के लिए ऊपर या नीचे जाना होगा. साथ ही, आप इन नोड में शेड किए गए रेक्टैंगल के तौर पर, इसके नीचे maxPostDepth लेवल भी देख सकते हैं.

टाइप: नंबर
डिफ़ॉल्ट: 1
maxHighlightColor

कॉलम 3 में सबसे बड़े मान वाले नोड के लिए इस्तेमाल करने के लिए हाइलाइट रंग. एचटीएमएल कलर की वैल्यू या शून्य बताएं; अगर यह वैल्यू खाली है, तो इस वैल्यू के लिए maxColor की वैल्यू को 35% से हल्का कर दिया जाएगा

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
maxPostDepth

"संकेत" वाले तरीके से दिखाने के लिए, maxDepth के बाद नोड के कितने लेवल हैं. संकेत वाले नोड किसी नोड में शेड किए गए रेक्टैंगल के तौर पर दिखते हैं. यह रेक्टैंगल, maxDepth की सीमा के अंदर होता है.

टाइप: नंबर
डिफ़ॉल्ट: 0
maxColorValue

कॉलम 3 में मंज़ूर किया गया सबसे बड़ा मान. इससे बड़ी सभी वैल्यू को काट-छांट करके, इस वैल्यू पर सेट कर दिया जाएगा. अगर वैल्यू शून्य पर सेट है, तो इसे कॉलम में सबसे बड़ी वैल्यू पर सेट कर दिया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: शून्य
midColor

उस रेक्टैंगल का रंग जिसमें कॉलम 3 की वैल्यू, maxColorValue और minColorValue के बीच में है. एचटीएमएल कलर की वैल्यू डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #000000
midHighlightColor

नोड के लिए इस्तेमाल किया जाने वाला हाइलाइट रंग. इसमें कॉलम 3 की वैल्यू, minColorValue और maxColorValue के मीडियन के पास है. एचटीएमएल रंग की वैल्यू या कोई वैल्यू शून्य बताएं. वैल्यू शून्य होने पर, यह midColor की वैल्यू के तौर पर, 35% हल्का हो जाएगा.

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
minColor

minColorValue के कॉलम 3 की वैल्यू वाले रेक्टैंगल का रंग. एचटीएमएल रंग की कोई वैल्यू तय करें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #dd0000
minHighlightColor

नोड के लिए इस्तेमाल किया जाने वाला हाइलाइट रंग, जिसमें कॉलम 3 की वैल्यू minColorValue के सबसे करीब है. एचटीएमएल कलर की वैल्यू या शून्य बताएं. अगर यह वैल्यू खाली है, तो यह वैल्यू minColor की वैल्यू होगी, जो 35% हल्का हो जाएगा

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
minColorValue

कॉलम 3 में दिया गया कम से कम मान. इससे छोटी सभी वैल्यू, इस वैल्यू से काट दी जाएंगी. अगर वैल्यू शून्य पर सेट है, तो कॉलम में इसकी गिनती, सबसे कम वैल्यू के तौर पर की जाएगी.

टाइप: नंबर
डिफ़ॉल्ट: शून्य
noColor

रेक्टैंगल के लिए इस्तेमाल किया जाने वाला रंग, जब किसी नोड में कॉलम 3 के लिए कोई वैल्यू नहीं होती और वह नोड एक लीफ़ है (या उसमें सिर्फ़ पत्तियां हैं). एचटीएमएल कलर की वैल्यू डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: #000000
noHighlightColor

हाइलाइट किए जाने पर "नहीं" रंग के रेक्टैंगल के लिए, इस्तेमाल किया जाने वाला रंग. एचटीएमएल रंग की वैल्यू या शून्य बताएं. अगर यह खाली है, तो noColor की वैल्यू, 35% से हल्का होगी.

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
showScale

चार्ट में सबसे ऊपर, minColor से maxColor तक कलर ग्रेडिएंट स्केल दिखाना है या नहीं. स्केल दिखाने के लिए, सही के बारे में बताएं.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
showTooltips

टूलटिप को दिखाना है या नहीं.

टाइप: बूलियन
डिफ़ॉल्ट: सही
textStyle

एक ऐसा ऑब्जेक्ट जो कॉन्टेंट एरिया में टेक्स्ट वाले कुछ चार्ट के लिए, टेक्स्ट की स्टाइल बताता है, जैसे कि ट्रीमैप. ऑब्जेक्ट का प्रारूप ऐसा है: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color, एचटीएमएल की कोई भी कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. fontName और fontSize भी देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.

Type: स्ट्रिंग
डिफ़ॉल्ट: कोई टाइटल नहीं
titleTextStyle

यह ऐसा ऑब्जेक्ट है जो टाइटल के टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color, एचटीएमएल की कोई भी कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. fontName और fontSize भी देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: {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+)

तब ट्रिगर होता है, जब उपयोगकर्ता किसी नोड को हाइलाइट करता है. डिफ़ॉल्ट ट्रिगर माउसओवर है. इसे v50+ के लिए eventsConfig के साथ कॉन्फ़िगर किया जा सकता है. इवेंट हैंडलर को डेटा टेबल में इससे जुड़ी एंट्री के लिए लाइन इंडेक्स पास किया जाता है.

प्रॉपर्टी: लाइन
onmouseout

तब ट्रिगर होता है, जब उपयोगकर्ता किसी नोड से बाहर निकल जाता है. इवेंट हैंडलर को डेटा टेबल में इससे जुड़ी एंट्री का लाइन इंडेक्स पास किया जाता है.

प्रॉपर्टी: लाइन
unhighlight (for v50+)

यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी नोड को हाइलाइट करता है. डिफ़ॉल्ट ट्रिगर माउसआउट है. इसे v50+ के लिए eventsConfig के साथ कॉन्फ़िगर किया जा सकता है. इवेंट हैंडलर को डेटा टेबल में इससे जुड़ी एंट्री के लिए लाइन इंडेक्स पास किया जाता है.

प्रॉपर्टी: लाइन
ready

बाहरी तरीके से किए गए कॉल के लिए चार्ट तैयार होने पर सक्रिय होता है. अगर आपको ड्रॉ करने के बाद, चार्ट और कॉल के तरीकों के साथ इंटरैक्ट करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट ट्रिगर होने के बाद ही उन्हें कॉल करना चाहिए.

प्रॉपर्टी: कोई नहीं
rollup

यह तब ट्रिगर होता है, जब उपयोगकर्ता ट्री पर वापस जाता है. डिफ़ॉल्ट ट्रिगर, राइट क्लिक है. इसे v50+ के लिए eventsConfig के साथ कॉन्फ़िगर किया जा सकता है. इवेंट हैंडलर में पास की गई पंक्ति प्रॉपर्टी, उस नोड की लाइन है जिसे उपयोगकर्ता से नेविगेट कर रहा है, न कि उस लाइन के लिए जिस पर नेविगेट कर रहा है.

प्रॉपर्टी: लाइन
select

तब ट्रिगर होता है, जब उपयोगकर्ता ड्रिल-डाउन करता है या नोड को रोल अप करता है. विधि setSelection() या goUpAndDraw() को कॉल करने पर भी सक्रिय होती है. चुना गया नोड जानने के लिए, getSelection() को कॉल करें.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं
drilldown (for v50+)

यह तब ट्रिगर होता है, जब उपयोगकर्ता ट्री में काफ़ी अंदर जाता है. डिफ़ॉल्ट ट्रिगर क्लिक करना है. v50+ के लिए इसे eventsConfig के साथ कॉन्फ़िगर किया जा सकता है. यह जानने के लिए कि किस नोड पर क्लिक किया गया है, getSelection() पर कॉल करें.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.