تقرير Treemaps

  1. Overview
  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'],
        }
      };

تلميحات الأدوات

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

يتم تخصيص تلميحات الخريطة المصغّرة بشكل مختلف عن الرسوم البيانية الأخرى، عليك تحديد دالة ثم ضبط الخيار 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 تريدها. ستحتاج عادةً إلى تلميحات تختلف بناءً على قيم البيانات. يوضح المثال التالي كيفية الوصول إلى كل حقل في جدول البيانات.

عند تمرير مؤشر الماوس فوق الخلايا في التقرير التدرّجي للحساب أعلاه، سترى تلميحًا مختلفًا لكل خلية. تستخدم دوال التلميح الهيكلي ثلاث قيم: 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 - [number] - حجم العقدة. ويُسمح باستخدام أي قيمة موجبة. تحدّد هذه القيمة حجم العُقدة، محسوبة مقارنةً بجميع العُقد الأخرى المعروضة حاليًا. بالنسبة إلى العُقد التي ليست لها أوراق، يتم تجاهل هذه القيمة وحسابها من حجم كل عناصرها الثانوية.
  • العمود 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 ويجب أن يكون حدث ماوس متوافقًا. بعد ذلك، يمكنك الحصول على ما يصل إلى أربعة مفاتيح تعديل اختيارية.
التفاعلات المتاحة:
ميزة "التمييز" و"إلغاء التمييز" و"دمج النتائج" و"التوغّل"
أحداث الماوس المتوافقة:
"النقر"، 'context menu'، 'dblclick'، 'mouseout'، 'الماوس'. ويتجاوب 'contextplaylist' مع النقر بزر الماوس الأيمن.
المفاتيح المتوافقة لتعديل أحداث الماوس:
"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

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

النوع: سلسلة
الافتراضي: #ffffff
fontFamily

مجموعة الخطوط التي يمكن استخدامها لكل النص

النوع: سلسلة
الإعداد التلقائي: تلقائي
fontSize

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

النوع: رقم
تلقائي: 12
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

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

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

النوع: سلسلة
تلقائي: #988f86
headerHeight

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

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

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

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
إبرازOnMouseOver (تم إيقافه نهائيًا للإصدار 50 أو الإصدارات الأحدث)

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

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

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

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

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

النوع: سلسلة
القيمة التلقائية: #00dd00
maxDepth

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

النوع: رقم
تلقائي: 1
maxHighlightColor

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

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
maxPostDepth

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

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

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

النوع: رقم
الإعداد التلقائي: قيمة خالية
midColor

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

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

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

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
minColor

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

النوع: سلسلة
القيمة التلقائية: #dd0000
minHighlightColor

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

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
minColorValue

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

النوع: رقم
الإعداد التلقائي: قيمة خالية
noColor

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

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

اللون المطلوب استخدامه لمستطيل بلون "no" عند تحديده. يُرجى تحديد قيمة لون HTML أو القيمة "فارغ"، وإذا كانت القيمة "فارغة"، ستكون هذه القيمة هي قيمة noColor التي يتم تفتيحها بنسبة 35%.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
showScale

تحديد ما إذا كان سيتم عرض مقياس تدرج الألوان من minColor إلى maxColor في أعلى الرسم البياني أم لا حدِّد القيمة "صحيح" لعرض المقياس.

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

تحديد ما إذا كان سيتم عرض تلميحات الأدوات

النوع: قيمة منطقية
القيمة التلقائية:صحيح
textStyle

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

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

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

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

النص المطلوب عرضه أعلى الرسم البياني

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

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

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

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: '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+)

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

الخصائص: صف
onmouseout

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

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

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

الخصائص: صف
ready

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

المواقع: ما مِن مواقع إلكترونية
rollup

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

الخصائص: صف
select

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

الخصائص: غير محدّدة
drilldown (for v50+)

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

الخصائص: غير محدّدة

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

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