ट्रीमैप

  1. खास जानकारी
  2. उदाहरण
  3. हाइलाइट
  4. टूलटिप
  5. लोड हो रहा है
  6. डेटा फ़ॉर्मैट
  7. कॉन्फ़िगरेशन के विकल्प
  8. तरीके
  9. इवेंट
  10. डेटा नीति

खास जानकारी

किसी डेटा ट्री का विज़ुअल प्रज़ेंटेशन, जहां हर नोड में शून्य या उससे ज़्यादा बच्चे हो सकते हैं. साथ ही, एक पैरंट (रूट को छोड़कर, जिसका कोई पैरंट नहीं है) हो सकता है. हर नोड आपकी ओर से असाइन की गई वैल्यू के हिसाब से आयत के तौर पर दिखता है. साथ ही, यह आकार और रंग की तरह दिखता है. साइज़ और रंगों का आकलन, ग्राफ़ में मौजूद दूसरे सभी नोड के मुकाबले किया जाता है. आप यह तय कर सकते हैं कि कितने लेवल एक साथ दिखाए जाएं. हालांकि, विकल्प के तौर पर, संकेत किए गए तरीकों से ज़्यादा लेवल दिखाए जा सकते हैं. अगर कोई नोड, लीफ़ नोड है, तो साइज़ और रंग की जानकारी दी जा सकती है. अगर यह लीफ़ नहीं है, तो इसे लीफ़ नोड के लिए बाउंडिंग बॉक्स के तौर पर दिखाया जाएगा. डिफ़ॉल्ट तरीका यह है कि जब कोई उपयोगकर्ता किसी नोड पर क्लिक करे, तो ट्री को नीचे ले जाएं. साथ ही, जब उपयोगकर्ता ग्राफ़ पर दायां क्लिक करे, तो उपयोगकर्ता को ट्री बैक पर वापस ले जाना चाहिए.

ग्राफ़ का कुल साइज़, पेज में शामिल किए गए एलिमेंट के साइज़ से तय होता है. अगर आपके पत्तों के नोड बहुत लंबे हैं, तो इनके नाम को छोटा कर दिया जाएगा. इसके लिए, एलिप्सिस DKIM का इस्तेमाल किया जाएगा.

उदाहरण

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: #GoogleDoodle
फ़ॉन्ट फ़ैमिली

सभी टेक्स्ट में इस्तेमाल करने के लिए फ़ॉन्ट फ़ैमिली.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
फ़ॉन्ट का साइज़

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

टाइप: नंबर
डिफ़ॉल्ट: 12
फ़ोर्सआईफ़्रेम

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
हेडर का रंग

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: #988f86
हेडर की ऊंचाई

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

टाइप का नंबर
डिफ़ॉल्ट: 0
हेडर हाइलाइट रंग

उस नोड के हेडर का रंग, जिस पर कर्सर घुमाया जा रहा है. कोई HTML रंग मान या शून्य बताएं अगर शून्य हो, तो इस मान को headerColor 35% तक हल्का कर दिया जाएगा.

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

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
संकेत की समझ

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

टाइप: नंबर
डिफ़ॉल्ट: 0.0
ज़्यादा से ज़्यादा रंग

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: #00dd00
ज़्यादा से ज़्यादा गहराई

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
maxPostdepth

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

टाइप: नंबर
डिफ़ॉल्ट: 0
ज़्यादा से ज़्यादा रंग मान

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

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

आयत के लिए रंग maxColorValue और minColorValue के बीच के स्तंभ 3 मान के साथ. एचटीएमएल रंग की वैल्यू तय करें.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: #000000
मध्यहाइलाइट रंग

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
कम से कम रंग

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: #dd0000
minhighlightColor

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
कम से कम रंग का मान

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

टाइप: नंबर
डिफ़ॉल्ट: शून्य
कोई रंग नहीं

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
ShowScale

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
टूलटिप दिखाएं

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

टाइप: बूलियन
डिफ़ॉल्ट: true
टेक्स्ट स्टाइल

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

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

color कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: '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 कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: 'red' या '#00cc00'. fontName और fontSize भी देखें.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
वज़न का औसत Forएग्रीगेशन

एग्रीगेशन के लिए, वेटेड औसत का इस्तेमाल करें या नहीं.

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

तरीके

तरीका
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() को कॉल करें.

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

डेटा नीति

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