تقرير Treemaps

  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 (لإصدار 49 أو الإصدارات الأقدم) أو enableHighlight: true (لإصدار 50+). من هناك، يمكنك ضبط الألوان لاستخدامها لتظليل العناصر باستخدام خيارات 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'],
        }
      };

نصائح الأداة

بشكل افتراضي، تعتبر التلميحات الأساسية لـ Treemap أساسية تعرض تصنيف خلية الخريطة المستهدفة. ويعد هذا مفيدًا عندما تكون الخلايا صغيرة جدًا لدرجة لا تسمح بتضمين التصنيفات، ولكن يمكنك تخصيصها بدرجة أكبر كما هو موضح في هذا القسم.

يتم تخصيص تلميحات أدوات Treemap بشكل مختلف عن الرسوم البيانية الأخرى: يمكنك تحديد دالة ثم ضبط الخيار generateTooltip على هذه الدالة. في ما يلي مثال بسيط:

في الرسم البياني أعلاه، نحدّد دالة تسمى showStaticTooltip تعرض سلسلة تتضمّن رمز HTML لعرضها عندما يمرّر المستخدم مؤشر الماوس فوق خلية على الهيكل التنظيمي للحساب. جرِّب هذه الميزة الآن. تكون الشفرة المُنشأة كالتالي:

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

  tree.draw(data, options);

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

يمكن أن تكون الدالة generateTooltip أي JavaScript تريد. عادة، ستحتاج إلى تلميحات الأدوات التي تختلف باختلاف قيم البيانات. يوضح المثال التالي كيفية الدخول إلى كل حقل في جدول البيانات.

إذا مرّرت الماوس فوق الخلايا في المخطط التدرّجي أعلاه، فستشاهد تلميحًا مختلفًا لكل خلية. تأخذ تلميحات أداة Treemap جميع القيم الثلاث: 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 - [string] رقم تعريف لهذه العقدة. ويمكن أن تكون أي سلسلة JavaScript صالحة، بما في ذلك المسافات، وأي طول يمكن أن تتقيد به السلسلة. يتم عرض هذه القيمة كعنوان العُقدة.
  • العمود 1 - [string] - رقم تعريف العقدة الرئيسية. إذا كانت هذه عقدة جذر، اتركها فارغة. يُسمح بجذر واحد فقط لكل خريطة شجرة.
  • العمود 2 - [العدد] - حجم العقدة. ويُسمح باستخدام أي قيمة موجبة. تحدّد هذه القيمة حجم العُقدة المحسوبة بالنسبة إلى جميع العُقد الأخرى المعروضة حاليًا. بالنسبة إلى العقد التي لا تتضمن أوراق، يتم تجاهل هذه القيمة وحسابها من حجم جميع عناصرها الثانوية.
  • العمود 3 - [اختياري، رقم] - قيمة اختيارية تُستخدَم لحساب لون لهذه العقدة. ويُسمح بأي قيمة، سواء كانت إيجابية أو سلبية. تتم أولاً إعادة حساب قيمة اللون على مقياس من minColorValue إلى maxColorValue، ثم يتم تخصيص لون للعقدة من التدرج بين minColor وmaxColor.

خيارات الضبط

الاسم
تفعيل التظليل (لإصدار 50+)

لتحديد ما إذا كان يجب أن تعرض العناصر تأثيرات مميزة أم لا. يتم تشغيل المُشغِّل التلقائي عند تمرير الماوس فوقه. يمكن إعداد العامل المشغِّل باستخدام eventsConfig. في حال الضبط على true، يمكن تحديد العناصر المختلفة بالاستناد إلى خيارات highlightColor المختلفة.

النوع: منطقي
تلقائي: خطأ
eventConfig (لإصدار 50+)

تهيئة الحدث لتشغيل تفاعلات الخريطة المتفرعة. التنسيق لتهيئة التفاعلات:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
إذا كان مصفوفة الضبط غير محدّد أو غير متوفّر في أحد التفاعلات، سيتم استخدام الإعداد التلقائي.
وإذا كان الإعداد مصفوفة فارغة، سيتم إيقاف التفاعل.
لإجراء تهيئة صحيحة، يلزم وجود mouse_event ويجب أن يكون حدث ماوس متوافقًا. وبعد ذلك، يمكنك استخدام ما يصل إلى أربعة مُعدلات مفاتيح اختيارية.
التفاعلات المعتمدة:
التظليل، وإلغاء التمييز، والعرض الإجمالي، والتنقّل
أحداث الماوس المسموح بها:
"click" و"contextmenu" و"dblclick" و"mouseout" و"mouseover". باستخدام 'contextmenu' يتوافق مع النقر بزر الماوس الأيمن.
مفاتيح تعديل مُعدِّل الماوس المتوافقة:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
الحصول على التهيئة الحالية:
طريقة الاتصال getEventsConfig().
مثال لاستخدام Control+Shift+Right_Click للانتقال إلى العرض التدرّجي للحساب:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
النوع: الكائن
تلقائي: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
لون الخط

لون النص. حدد قيمة لون HTML.

النوع: سلسلة
تلقائي: #ffffff
عائلة الخطوط

عائلة الخطوط المراد استخدامها لكل النصوص.

النوع: سلسلة
تلقائي: تلقائي
حجم الخط

حجم الخط لكل النص، بالنقاط.

النوع: الرقم
تلقائي: 12
فرض إطار

لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.)

النوع: منطقي
تلقائي: خطأ
لون العنوان

لون قسم رأس كل عقدة. حدد قيمة لون HTML.

النوع: سلسلة
القيمة التلقائية: #988f86
ارتفاع العنوان

ارتفاع قسم الرأس لكل عقدة، بالبكسل (قد يكون صفرًا).

النوع
القيمة التلقائية: 0
لون تمييز الرأس

لون رأس العقدة التي يتم تمريرها فوقها. حدِّد قيمة لون HTML أو قيمة فارغة، وإذا كانت القيمة فارغة، سيتم إضاءة headerColor بنسبة 35%.

النوع: سلسلة
تلقائي: null
highlightOnMouseOver (مهمل لإصدار 50+)

تم إيقاف العمل بالإصدار 50 والإصدارات الأحدث. بالنسبة إلى الإصدار 50 والإصدارات الأحدث، يُرجى استخدام enableHighlight. لتحديد ما إذا كان يجب أن تعرض العناصر تأثيرات مميزة عند تمرير الماوس فوقها. في حال الضبط على true، يمكن تحديد العناصر المختلفة بالاستناد إلى خيارات highlightColor المختلفة.

النوع: منطقي
تلقائي: خطأ
تلميحالسعة

عندما تكون قيمة maxPostDepth أكبر من 1، ويؤدي ذلك إلى عرض عُقد أسفل العمق الحالي، يحدد hintOpacity مدى شفافية الشفافية. ويجب أن تتراوح القيمة بين 0 و1، وكلما ارتفعت القيمة، ارتفعت عُقدة العقدة.

النوع: الرقم
التلقائي: 0.0
maxColor

لون المستطيل بقيمة العمود 3 هي maxColorValue. حدِّد قيمة لون HTML.

النوع: سلسلة
الافتراضي: #00dd00
الحد الأقصى للعمق

الحد الأقصى لعدد مستويات العقدة المراد عرضها في العرض الحالي. سيتم ضبط المستويات في المستوى الحالي. إذا كانت شجرتك تحتوي على مستويات أكثر من هذا، عليك الصعود إلى أعلى أو أسفل لرؤيتها. يمكنك أيضًا رؤية maxPostDepth مستوى أسفل هذا المستطيل المظلّل داخل هذه العقد.

النوع: الرقم
تلقائي: 1
الحد الأقصى للتظليل

لون التمييز المطلوب استخدامه للعقدة ذات القيمة الأكبر في العمود 3. حدِّد قيمة لون HTML أو قيمة خالية. إذا كانت القيمة فارغة، فستكون هذه القيمة هي القيمة maxColor المضاءة بنسبة 35%

النوع: سلسلة
تلقائي: null
maxPostDepth

عدد مستويات العُقد التي تتجاوز maxDepth والتي يتم عرضها بنمط "تم الحل". يتم عرض العُقد المكعبة كمستطيلات مظللة داخل عقدة تقع ضمن الحد maxDepth.

النوع: الرقم
القيمة التلقائية: 0
maxColorValue

الحد الأقصى للقيمة المسموح بها في العمود 3. سيتم اقتطاع جميع القيم التي تزيد عن هذه القيمة إلى هذه القيمة. وفي حال ضبطها على "قيمة فارغة"، سيتم ضبطها على القيمة القصوى في العمود.

النوع: الرقم
تلقائي: null
اللون المتوسط

لون مستطيل يحتوي على قيمة العمود 3 في المنتصف بين maxColorValue وminColorValue. حدد قيمة لون HTML.

النوع: سلسلة
القيمة التلقائية: #000000
لون التمييز الأوسط

لون التمييز المطلوب استخدامه للعقدة مع قيمة العمود 3 بالقرب من متوسط minColorValue وmaxColorValue. حدِّد قيمة لون HTML أو قيمة فارغة، وإذا كانت القيمة فارغة، ستكون القيمة midColor مضاءة بنسبة 35%.

النوع: سلسلة
تلقائي: null
الحد الأدنى للألوان

لون المستطيل الذي يتضمّن قيمة العمود 3 هي minColorValue. حدِّد قيمة لون HTML.

النوع: سلسلة
تلقائي: #dd0000
لون التمييز بالدقائق

لون التمييز المطلوب استخدامه للعقدة مع قيمة العمود 3 الأقرب إلى minColorValue. حدِّد قيمة لون HTML أو قيمة خالية. إذا كانت القيمة فارغة، فستكون هذه القيمة هي القيمة minColor المضاءة بنسبة 35%

النوع: سلسلة
تلقائي: null
minColorValue

الحد الأدنى للقيمة المسموح بها في العمود 3. سيتم اقتطاع كل القيم الأقل من هذه القيمة إلى هذه القيمة. وفي حال ضبطها على قيمة فارغة، سيتم احتسابها كأدنى قيمة في العمود.

النوع: الرقم
تلقائي: null
بدون ألوان

اللون المراد استخدامه في مستطيل عندما لا تكون للعقدة أي قيمة للعمود 3، وتكون تلك العقدة ورقة شجر (أو تحتوي على أوراق فقط). حدد قيمة لون HTML.

النوع: سلسلة
القيمة التلقائية: #000000
عدم تحديد اللون

اللون المستخدم في مستطيل بلون "لا" عند تمييزه. حدِّد قيمة لون HTML أو قيمة خالية، وإذا كانت القيمة خالية، فستكون القيمة noColor مضاءة بنسبة 35%.

النوع: سلسلة
تلقائي: null
مقياس العرض

يمكنك عرض مقياس تدرّج ألوان من minColor إلى maxColor في أعلى الرسم البياني أو عدم عرضه. حدد true لعرض المقياس.

النوع: منطقي
تلقائي: خطأ
عرض الأداة

ما إذا كان سيتم إظهار تلميحات الأدوات.

النوع: منطقي
افتراضي: صحيح
نمط النص

كائن يحدّد نمط النص لبعض الرسوم البيانية التي تحتوي على نص في منطقة المحتوى، مثل الشجرة الهيكلية ويكون الكائن بهذا التنسيق: 

{ 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>}
العنوان

النص المطلوب عرضه أعلى المخطط.

النوع: سلسلة
تلقائي: بدون عنوان
العنوانTextStyle

كائن يحدد نمط نص العنوان. ويكون الكائن بهذا التنسيق:

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
استخدام متوسط الوزن المجمّع

لتحديد ما إذا كان سيتم استخدام المتوسطات المقدّرة للتجميع.

النوع: منطقي
تلقائي: خطأ

الطرق

الطريقة
draw(data, options)

لرسم المخطط.

نوع الإرجاع: لا شيء
getEventsConfig() (for v50+)

لعرض تهيئة التفاعل الحالية. يمكن استخدام هذا للتحقق من خيار التهيئة eventsConfig

نوع العرض: كائن
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

تنفيذ getSelection() العادي. العناصر المحددة هي عُقد. يمكن اختيار عقدة واحدة فقط في كل مرة.

نوع العرض: مصفوفة من عناصر التحديد
setSelection()

تنفيذ setSelection() العادي. العناصر المحددة هي عُقد. يمكن اختيار عقدة واحدة فقط في كل مرة.

نوع الإرجاع: لا شيء
goUpAndDraw()

انتقل إلى أعلى الشجرة بمستوى واحد ثم أعد رسمها. لا تعرض رسالة خطأ إذا كانت العقدة هي العقدة الجذر. يتم تنشيط ذلك تلقائيًا عندما ينقر المستخدم بزر الماوس الأيمن على عقدة.

نوع الإرجاع: لا شيء
getMaxPossibleDepth()

لعرض أقصى عمق ممكن للعرض الحالي.

نوع الإرجاع: رقم
clearChart()

محو الرسم البياني وإصدار جميع الموارد المخصّصة له

نوع الإرجاع: لا شيء

الأحداث

يُرجى الرجوع إلى eventsConfig للاطّلاع على مشغّلات الأحداث القابلة للضبط.
الاسم
onmouseover

يتم الإطلاق عندما يمرر المستخدم الماوس فوق عقدة. يمرر معالج الحدث فهرس صف الإدخال المقابل في جدول البيانات.

الخصائص: الصف
highlight (for v50+)

يتم الإطلاق عندما يميز المستخدم عقدة. يتم تشغيل مؤشر الماوس بشكل افتراضي. يمكن ضبطه باستخدام eventsConfig للإصدار 50 والإصدارات الأحدث. يمرِّر معالج الحدث فهرس الصف للإدخال المقابل في جدول البيانات.

الخصائص: الصف
onmouseout

يتم الإطلاق عندما يمرر المستخدم الماوس خارج عقدة. يمرر معالج الحدث فهرس صف الإدخال المقابل في جدول البيانات.

الخصائص: الصف
unhighlight (for v50+)

يتم الإطلاق عندما يُلغي المستخدم تمييز عقدة. المشغّل التلقائي هو تمرير الماوس إلى الخارج. يمكن ضبطه باستخدام eventsConfig للإصدار 50 والإصدارات الأحدث. يمرِّر معالج الحدث فهرس الصف للإدخال المقابل في جدول البيانات.

الخصائص: الصف
ready

يتم الإطلاق عندما يكون الرسم البياني جاهزًا لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة draw والاتصال بها فقط بعد تنشيط الحدث.

الخصائص: بدون
rollup

يتم الإطلاق عندما ينتقل المستخدم إلى أعلى الشجرة. يتم تشغيل المشغّل التلقائي بالنقر بزر الماوس الأيمن. يمكن ضبطه باستخدام eventsConfig للإصدار 50 والإصدارات الأحدث. إنّ صف الصف الذي يتم تمريره إلى معالج الأحداث هو صف العقدة التي ينتقل إليها المستخدم من، وليس الصف الذي ينتقل إليه المستخدم إلى.

الخصائص: الصف
select

يتم الإطلاق عندما يتوغّل المستخدم أو يمرّر عقدة. يتم تنشيطها أيضًا عند استدعاء الطريقة setSelection() أو goUpAndDraw(). لمعرفة العقدة التي تم اختيارها، يمكنك الاتصال getSelection().

الخصائص: بلا
drilldown (for v50+)

يتم الإطلاق عندما ينتقل المستخدم إلى عمق الشجرة. المشغّل التلقائي هو النقر. يمكن ضبطها باستخدام eventsConfig للإصدار 50 والإصدارات الأحدث. لمعرفة العُقدة التي تم النقر عليها، يمكنك الاتصال بـ getSelection().

الخصائص: بلا

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.