تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

عناصر التحكم ولوحات التحكم

في هذه الصفحة، ستتعرف على كيفية دمج مخططات متعددة في لوحات تحكم ومنح المستخدمين عناصر تحكم للتحكم في البيانات التي يعرضونها.

نظرة عامة

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

يتم تحديد لوحات البيانات باستخدام فئات google.visualization.Dashboard. تتلقّى المثيلات Dashboard DataTable الذي يتضمن البيانات لعرض البيانات بيانيًا والاهتمام بالرسم وتوزيع البيانات على جميع الرسوم البيانية التي تشكّل جزءًا من لوحة البيانات.

عناصر التحكُّم هي أدوات واجهة المستخدم (مثل منتقيات الفئات، وأشرطة تمرير النطاقات، والمُكمِّلات التلقائية...) التي تتفاعل معها من أجل جلب البيانات التي تديرها لوحة البيانات والرسوم البيانية التي تُعد جزءًا منها.

يتم تحديد عناصر التحكّم باستخدام فئات google.visualization.ControlWrapper. يمكنك إضافة مثيلات ControlWrapper إلى لوحة بيانات، حيث تعمل كأنابيب وصمامات في نظام السباكة. وتجمع هذه الأنظمة بيانات المستخدمين وتستخدم المعلومات لتحديد البيانات التي تديرها لوحة البيانات والتي يجب أن تكون متاحة في الرسوم البيانية التي تشكّل جزءًا منها.

ألقِ نظرة على المثال التالي حيث يتم استخدام منتقي الفئات وشريط تمرير النطاق لعرض البيانات المرئية في رسم بياني دائري.

ملاحظة: تكون لوحة البيانات تفاعلية. حاوِل تشغيل عناصر التحكّم وشاهد التغيير في الرسم البياني في الوقت الفعلي.

استخدام عناصر التحكّم ولوحات البيانات

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

أنشئ هيكلاً أساسيًا لشفرة HTML للوحة التحكم. يجب أن تحتوي صفحتك على العديد من عناصر HTML حسب الحاجة للاحتفاظ بكل عضو في لوحة التحكم. ويتضمن ذلك لوحة البيانات نفسها وجميع عناصر التحكم والرسوم البيانية التي تُعد جزءًا منها. ستستخدم عادةً عنصر <div> لكلٍّ منها.
تحميل مكتباتك. لا تتطلّب لوحة البيانات سوى مكتبتين فقط لتضمين الصفحة أو تحميلها على الصفحة: واجهة برمجة تطبيقات AJAX من Google وحزمة controls من Google التمثيل البصري.
إعداد بياناتك: وعليك إعداد البيانات لعرض البيانات بشكل مرئي، أي تحديد البيانات بنفسك في رمز أو إجراء طلب بحث عن موقع إلكتروني عن بُعد للحصول على بيانات.
إنشاء مثيل لوحة بيانات يمكنك إنشاء لوحة بيانات من خلال الاتصال بمنشئها وتمرير مرجع إلى عنصر <div> الذي يحملها.
يمكنك إنشاء العدد الذي تريده من عناصر التحكم والمخططات البيانية. يمكنك إنشاء مثيلَين google.visualization.ChartWrapper وgoogle.visualization.ControlWrapper لوصف كل رسم بياني والتحكّم الذي تديره لوحة البيانات.
إنشاء تبعيات استدعِ bind() على لوحة البيانات ومرِّر مثيلات التحكُّم والرسم البياني للسماح للوحة البيانات بمعرفة ما تريد إدارته. بعد ربط عنصر تحكُّم مع رسم بياني معًا، تُحدِّث لوحة البيانات الرسم البياني لمطابقة القيود التي يفرضها عنصر التحكُّم على البيانات.
ارسم لوحة البيانات. اتصل برقم draw() على لوحة البيانات ومرِّر بياناتك لرسم لوحة البيانات بالكامل على الصفحة.
التغييرات الآلية بعد السحب: ويمكنك بشكل اختياري، بعد الرسم الأولي، أن تتحكم برمجيًا في عناصر التحكم التي تشكّل جزءًا من لوحة البيانات وأن تطلب من لوحة البيانات تعديل الرسوم البيانية استجابةً لذلك.

في ما يلي مثال بسيط لإحدى الصفحات التي تنشئ لوحة بيانات بسيطة تحتوي على شريط تمرير للنطاق يؤدي إلى رسم بياني دائري. يتم عرض لوحة التحكم الناتجة أسفل المقتطف.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

إليك لوحة البيانات التي تنشئها هذه الشفرة.

1. إنشاء هيكل عظمي لـ HTML للوحة البيانات

يجب أن تحتوي صفحتك على أكبر عدد ممكن من عناصر HTML (عادةً <div>s) لتضمين لوحة البيانات نفسها وجميع عناصر التحكّم والرسوم البيانية فيها. عند إنشاء مثيلات للوحة التحكم والتحكم والرسم البياني، يجب تمرير مرجع إلى عنصرها، بحيث يتم تعيين معرّف لكل عنصر HTML.

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

ولك مطلق الحرية في وضع كل عنصر HTML في صفحتك كيفما تشاء.

2. تحميل مكتباتك

لا تتطلّب لوحة البيانات سوى مكتبتين ليتم تضمينهما أو تحميلهما على الصفحة: واجهة برمجة تطبيقات Google AJAX وحزمة controls للتمثيل البصري على Google. تحدّد واجهة برمجة التطبيقات (على وجه التحديد، google.visualization.ChartWrapper) الحزم الأخرى المطلوبة (على سبيل المثال، gauge إذا كنت تستخدم رسمًا بيانيًا للقياس) وحمّلها على الفور بدون أي تدخل منك.

يجب استخدام google.charts.load() لجلب مكتبة التحكم.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. إعداد بياناتك

عند تحميل واجهة برمجة التطبيقات الخاصة بالتمثيل البصري، سيستدعي google.charts.setOnLoadCallback() الدالة المعالج، حتى تعرف أن جميع الطرق المساعدة والفئات المطلوبة ستكون جاهزة للبدء في إعداد بياناتك.

تقبل لوحات البيانات البيانات في جدول البيانات، تمامًا مثل الرسوم البيانية.

4. إنشاء مثيل لوحة تحكم

بعد الانتهاء من إنشاء بياناتك، يمكنك إنشاء مثيل لكائن لوحة التحكم. تستخدم أداة إنشاء لوحة البيانات معلَمة واحدة: مرجع إلى عنصر DOM الذي يمكن من خلاله رسم لوحة البيانات.

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

يتم عرض لوحات البيانات كصف JavaScript. بعد إنشاء لوحة بيانات، يمكنك تنفيذ بعض الخطوات الاختيارية مثل إضافة أدوات معالجة الأحداث (على سبيل المثال، ليتم إشعارك عندما تصبح لوحة البيانات "جاهزة"). تتعامل لوحات البيانات مع الأحداث بالطريقة نفسها التي تتّبعها الرسوم البيانية، لذا يُرجى الرجوع إلى التعامل مع الأحداث المتعلّقة بالتمثيل البصري أو عرض الأخطاء بشكل لطيف في قسم الرسم البياني للاطّلاع على مزيد من المعلومات.

5. إنشاء مثيلات التحكم والرسم البياني

يمكنك تحديد العدد المطلوب من النُسخ الافتراضية لكل عنصر تحكُّم ورسم بياني سيكونان جزءًا من لوحة البيانات. استخدِم google.visualization.ChartWrapper وgoogle.visualization.ControlWrapper لتحديد الرسوم البيانية وعناصر التحكّم على التوالي.

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

عند إنشاء مثيلَي ChartWrapper وControlWrapper، لا تحدّد المعلمة dataTable أو dataSourceUrl. وستتولّى لوحة البيانات تقديم كل خلاصة باستخدام البيانات المناسبة. تأكَّد من تحديد المعلّمتَين المطلوبتَين: chartType وcontainerId للرسوم البيانية، وcontrolType وcontainerId لعناصر التحكّم.

بعض النصائح حول تهيئة عناصر التحكم والمخططات:

يجب منح جميع عناصر التحكم filterColumnIndex (أو filterColumnLabel) لتحديد عمود google.visualization.DataTable الذي يعمل عنصر التحكم عليه (في المثال أعلاه، يعمل عنصر التحكم على العمود المسمى كعك محلى لتناول الطعام)،

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

  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'minValue': 1,
      'maxValue': 10
    },
    // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 3, 'highValue': 8}
  });

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

استخدِم الخيار view أثناء ضبط كل مثيل ChartWrapper للإشارة إلى الأعمدة ذات الصلة بالرسم البياني، كما في المثال التالي.

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8]
  ]);

  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'title': 'Donuts eaten per person'
    },
    // The pie chart will use the columns 'Name' and 'Donuts eaten'
    // out of all the available ones.
    'view': {'columns': [0, 3]}
  });

  // The rest of dashboard configuration follows
  // ...

6- إنشاء تبعيات

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

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

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

يمكنك ربط عناصر التحكّم والرسوم البيانية بالعديد من الإعدادات المختلفة: واحد لواحد، وواحد إلى عِدّة، ومتعدد إلى واحد، ومتعددة لمتعدّدة. وعند ربط عناصر تحكّم متعدّدة برسم بياني، تحدّث لوحة البيانات الرسم البياني لمطابقة القيود المجمّعة التي تفرضها جميع عناصر التحكّم المرتبطة. وفي الوقت نفسه، يمكن أن يؤدي عنصر تحكّم إلى إنشاء رسوم بيانية متعددة في الوقت نفسه. لتحديد روابط متعددة في الوقت نفسه، عليك تمرير المصفوفات إلى طريقة bind() بدلاً من المثيلات الفردية. يمكنك أيضًا ربط عدة مكالمات bind() معًا. وإليك بعض الأمثلة.

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

بالنسبة إلى الاستخدامات المتقدمة، يمكنك أيضًا ربط عناصر التحكّم بعناصر التحكّم الأخرى لإنشاء سلاسل التبعيات .

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7- رسم لوحة التحكم

يمكنك استدعاء طريقة draw() في مثيل لوحة التحكم لعرض لوحة البيانات بأكملها. تستخدِم الطريقة draw() معلَمة واحدة فقط: DataTable (أو DataView) التي تشغِّل لوحة البيانات.

عليك استدعاء draw() في كل مرة تغيّر فيها تركيبة لوحة البيانات (على سبيل المثال، من خلال إضافة عناصر تحكّم أو رسوم بيانية جديدة إليها) أو تغيير DataTable العام الذي يشغّلها.

يعمل مثيل لوحة التحكم على تنشيط حدث ready كلما تم إنهاء draw() من رسم جميع عناصر التحكم والمخططات التي تشكله. يتم تنشيط حدث error إذا تعذّر رسم أي عنصر من عناصر التحكم المُدارة أو الرسم البياني. لمعرفة المزيد من المعلومات حول التعامل مع الأحداث، يمكنك الاطّلاع على التعامل مع الأحداث.

ملاحظة: يجب أن تستمع إلى فعالية ready قبل محاولة تغيير تركيبة لوحة البيانات أو رسمها مرة أخرى.

8- التغييرات الآلية بعد السحب

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

إذا كنت بحاجة إلى تعديل حالة لوحة البيانات آليًا، يمكنك إجراء ذلك من خلال التشغيل مباشرةً على مثيلَي ControlWrapper وChartWrapper اللذين يشكّلان جزءًا منها. القاعدة العامة هي إجراء أي تغيير تحتاجه مباشرةً على مثال ControlWrapper (أو ChartWrapper) المحدّد: على سبيل المثال، يمكنك تغيير خيار أو حالة عنصر التحكّم من خلال setOption() وsetState() على التوالي، ثم استدعاء طريقة draw() بعد ذلك. وسيتم بعد ذلك تعديل لوحة البيانات لتطابق التغييرات المطلوبة.

ويوضح المثال التالي هذه الحالة.

google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {

var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

// We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

صفحة ويب كاملة

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

مرجع واجهة برمجة التطبيقات

يسرد هذا القسم الكائنات التي تعرضها واجهة برمجة التطبيقات لعناصر التحكم ولوحات البيانات، والطرق القياسية التي تعرضها جميع عناصر التحكم.

لوحة البيانات

تمثل مجموعة من عناصر التحكم والمخططات المتعاونة التي تشترك في البيانات الأساسية نفسها.

الشركة المصنِّعة

Dashboard(containerRef)

ContainerRef
: مرجع إلى عنصر حاوية صالح في الصفحة سيتضمّن محتوى لوحة البيانات

الطُرق

تعرض لوحة البيانات الطرق التالية:

الطريقة نوع القيمة التي يتم عرضها الوصف

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`bind(controls, charts)`	google.Visualization.لوحة التحكم الرئيسية	تربط عنصر تحكم واحدًا أو أكثر بواحد أو أكثر من المشاركين الآخرين في لوحة التحكم (إما الرسوم البيانية أو عناصر التحكم الأخرى)، بحيث تتم إعادة رسمها في كل مرة يجمع فيها أي من العناصر السابقة تفاعلاً برمجيًا أو تفاعل مستخدم يؤثر في البيانات التي تتم إدارتها من خلال لوحة التحكم. لعرض نسخة لوحة التحكم نفسها لسلسلة مكالمات `bind()` المتعددة معًا. controls - تمثّل عنصرًا واحدًا أو مصفوفة من `google.visualization.ControlWrapper` مثيلات تحدّد عناصر التحكم المراد ربطها. الرسوم البيانية - هي مثيل واحد أو مصفوفة من `google.visualization.ChartWrapper` مثيلات تحدّد الرسومات البيانية التي ستعتمد عليها عناصر التحكّم.
`draw(dataTable)`	لا ينطبق	لرسم لوحة البيانات. dataTable - أي مما يلي: كائن `DataTable` أو كائن `DataView` أو تمثيل JSON لجدول بيانات أو مصفوفة تتبع بنية google.visibleization.arrayToDataTable() .
`getSelection()`	مصفوفة من الكائنات	لعرض صفيف من الكيانات المرئية المحددة من المخططات في لوحة التحكم. تعرض طريقة `getSelection()`، عند استدعائها على لوحة البيانات، مجموعة من كل الاختيارات التي تم إجراؤها على كل الرسوم البيانية داخلها، مما يسمح باستخدام مرجع واحد عند العمل مع اختيارات الرسم البياني. ملاحظة: يجب إرفاق أدوات معالجة الأحداث للحدث المحدّد بكل رسم بياني تريد الاستماع إليه. الوصف الموسَّع

bind(controls, charts)

google.Visualization.لوحة التحكم الرئيسية

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

controls - تمثّل عنصرًا واحدًا أو مصفوفة من google.visualization.ControlWrapper مثيلات تحدّد عناصر التحكم المراد ربطها.
الرسوم البيانية - هي مثيل واحد أو مصفوفة من google.visualization.ChartWrapper مثيلات تحدّد الرسومات البيانية التي ستعتمد عليها عناصر التحكّم.

draw(dataTable)

لا ينطبق

لرسم لوحة البيانات.

dataTable - أي مما يلي: كائن DataTable أو كائن DataView أو تمثيل JSON لجدول بيانات أو مصفوفة تتبع بنية google.visibleization.arrayToDataTable() .

getSelection()

مصفوفة من الكائنات

لعرض صفيف من الكيانات المرئية المحددة من المخططات في لوحة التحكم. تعرض طريقة getSelection()، عند استدعائها على لوحة البيانات، مجموعة من كل الاختيارات التي تم إجراؤها على كل الرسوم البيانية داخلها، مما يسمح باستخدام مرجع واحد عند العمل مع اختيارات الرسم البياني.

ملاحظة: يجب إرفاق أدوات معالجة الأحداث للحدث المحدّد بكل رسم بياني تريد الاستماع إليه.

الوصف الموسَّع

الأحداث

يعرض كائن لوحة البيانات الأحداث التالية. ملاحظة: يجب الاتصال بـ Dashboard.draw() قبل طرح أي فعاليات.

الاسم الوصف أماكن إقامة

error يتم الإطلاق عند حدوث خطأ عند محاولة عرض لوحة البيانات. قد يتعذّر عرض عنصر أو أكثر من عناصر التحكم والمخططات التي تعد جزءًا من لوحة التحكم. id، رسالة

الاسم	الوصف	أماكن إقامة
`error`	يتم الإطلاق عند حدوث خطأ عند محاولة عرض لوحة البيانات. قد يتعذّر عرض عنصر أو أكثر من عناصر التحكم والمخططات التي تعد جزءًا من لوحة التحكم.	id، رسالة
`ready`	اكتملت لوحة البيانات بالرسم، وهي جاهزة لقبول التغييرات. جميع عناصر التحكّم والرسوم البيانية التي تشكّل جزءًا من لوحة البيانات جاهزة لاستدعاء الطريقة الخارجية وتفاعل المستخدم. إذا أردت تغيير لوحة البيانات (أو البيانات التي تعرضها) بعد رسمها، عليك إعداد أداة معالجة لهذا الحدث قبل طلب طريقة `draw`، ثم تطبيق التغييرات بعد إطلاق الحدث فقط. سيتم تنشيط الحدث `ready` أيضًا: بعد اكتمال إعادة تحميل لوحة البيانات التي تم تشغيلها من قِبل مستخدم أو تفاعل آلي مع أحد عناصر التحكّم، بعد استدعاء آلي إلى طريقة `draw()` لأي جزء من الرسم البياني في لوحة البيانات.	لا ينطبق

ready

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

سيتم تنشيط الحدث ready أيضًا:

بعد اكتمال إعادة تحميل لوحة البيانات التي تم تشغيلها من قِبل مستخدم أو تفاعل آلي مع أحد عناصر التحكّم،
بعد استدعاء آلي إلى طريقة draw() لأي جزء من الرسم البياني في لوحة البيانات.

لا ينطبق

ملفّات التحكّم

كائن ControlWrapper هو برنامج تضمين حول تمثيل JSON لمثيل تحكم مضبوط. يعرض الصف طرقًا سهلة لتحديد عنصر تحكُّم في لوحة البيانات ورسمه وتغيير حالته برمجيًا.

الشركة المصنِّعة

ControlWrapper(opt_spec)

opt_spec: [اختيارية] - إما كائن JSON يحدد عنصر التحكم أو إصدار سلسلة متسلسل لهذا الكائن. تظهر الخصائص المتاحة لكائن JSON في الجدول التالي. في حال عدم تحديد هذه الخاصية، يجب ضبط جميع الخصائص المناسبة باستخدام طرق set... التي كشفها ControlWrapper.

الخاصية	النوع	مطلوب	تلقائي	الوصف
controlType	سلسلة	مطلوب	لا ينطبق	اسم فئة عنصر التحكم. يمكن حذف اسم الحزمة `google.visualization` لعناصر التحكّم في Google. أمثلة: `CategoryFilter`، `NumberRangeFilter`.
رقم تعريف الحاوية	سلسلة	مطلوب	لا ينطبق	رقم تعريف عنصر DOM على صفحتك التي ستستضيف عنصر التحكم.
الخيارات	اعتراض	اختياري	لا ينطبق	تمثل هذه الخاصية كائنًا يصف خيارات عنصر التحكم. ويمكنك استخدام إما الترميز الحرفي لجافا سكريبت أو تقديم مؤشر للعنصر. مثال: `"options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}`
ولاية	اعتراض	اختياري	لا ينطبق	تمثل هذه الخاصية كائنًا يصف حالة وحدة التحكم. تجمع الحالة كل المتغيرات التي يمكن أن يؤثر فيها المستخدم الذي يُدير عنصر التحكّم. على سبيل المثال، يمكن وصف حالة شريط تمرير النطاق من حيث المواضع التي يشغلها أعلى وأدنى ارتفاع في شريط التمرير. ويمكنك استخدام الترميز الحرفي لجافا سكريبت أو توفير مؤشر للعنصر.مثال: `"state": {"lowValue": 20, "highValue": 50}`

الطُرق

يعرض ControlControlapper الطرق الإضافية التالية:

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`draw()`	لا ينطبق	لرسم عنصر التحكم. وعادةً ما تعتني لوحة البيانات التي تحتفظ بوحدة التحكم برسمها. عليك استدعاء `draw()` لفرض عمليات إعادة رسم آلي لعنصر التحكم بعد تغيير أي من إعداداته الأخرى، مثل الخيارات أو الحالة.
`toJSON()`	سلسلة	لعرض إصدار سلسلة من تمثيل JSON لعنصر التحكم.
`clone()`	التفاف عنصر التحكم	لعرض نسخة عميقة من برنامج التحكم.
`getControlType()`	سلسلة	اسم فئة عنصر التحكم. إذا كانت عناصر التحكم في Google هذه ضمن الأسماء، لن يكون الاسم مؤهلاً باستخدام `google.visualization`. على سبيل المثال، إذا كان عنصر التحكّم هذا ضمن فئة CategoryFilter، سيعرض "CategoryFilter" بدلاً من "google.visibleization.CategoryFilter".
`getControlName()`	سلسلة	لعرض اسم التحكم الذي تم تعيينه بواسطة `setControlName()`.
`getControl()`	مرجع عنصر التحكم	لعرض مرجع إلى عنصر التحكم الذي تم إنشاؤه بواسطة عنصر تحكم الالتفاف هذا. وسيؤدي ذلك إلى عرض قيمة خالية إلى أن يتم استدعاء `draw()` على عنصر ControlWrapper (أو على لوحة البيانات التي تحمله)، ثم ينشئ حدثًا جاهزًا. يعرض الكائن المعروض طريقة واحدة فقط: `resetControl()`، الذي يُعيد تعيين حالة التحكم إلى الحالة التي تم ضبطها فيها (مثل إعادة ضبط عنصر نموذج HTML).
`getContainerId()`	سلسلة	رقم تعريف عنصر حاوية DOM لعنصر التحكم.
`getOption(key, opt_default_val)`	أي نوع	لعرض قيمة خيار التحكم المحددة key - اسم خيار الاسترداد. قد يكون اسمًا مؤهلاً، مثل `'vAxis.title'`. opt_default_value [اختيارية] - إذا كانت القيمة المحدّدة غير محدّدة أو فارغة، سيتم عرض هذه القيمة.
`getOptions()`	اعتراض	لعرض كائن الخيارات لعنصر التحكم هذا.
`getState()`	اعتراض	لعرض حالة التحكم.
`setControlType(type)`	لا ينطبق	لتعيين نوع عنصر التحكم. أدخل اسم فئة عنصر التحكم لإنشاء مثيل. إذا كان هذا أحد عناصر التحكم في Google، لا تجعله مؤهلاً باستخدام `google.visualization`. على سبيل المثال، بالنسبة إلى شريط تمرير النطاق فوق عمود رقمي، يجب إدخال "NumberRangeFilter".
`setControlName(name)`	لا ينطبق	تعيين اسم عشوائي لعنصر التحكم. لا يظهر هذا الخيار في أي مكان في عنصر التحكّم، ولكنه كمرجع لك فقط.
`setContainerId(id)`	لا ينطبق	يضبط معرّف عنصر DOM الذي يحتوي على عنصر التحكم.
`setOption(key, value)`	لا ينطبق	يتم تعيين قيمة خيار عنصر تحكم واحد، حيث يكون key هو اسم الخيار وvalue هي القيمة. لإلغاء ضبط خيار، مرِّر القيمة الفارغة إلى القيمة. يُرجى العِلم بأن key قد يكون اسمًا مؤهلاً، مثل `'vAxis.title'`.
`setOptions(options_obj)`	لا ينطبق	تعيين كائن خيارات كامل لعنصر تحكم.
`setState(state_obj)`	لا ينطبق	لتعيين حالة التحكم. تجمع الحالة كل المتغيرات التي يمكن أن يشغّلها المستخدم الذي يتحكم في العنصر. على سبيل المثال، يمكن وصف حالة شريط تمرير النطاق من حيث المواضع التي يشغلها الإبهام المنخفض والعالي في شريط التمرير.

الأحداث

يقدم عنصر ControlWrapper الأحداث التالية. لاحظ أنه يجب استدعاء ControlWrapper.draw() (أو رسم لوحة التحكم التي تحتوي على عنصر التحكم) قبل طرح أي أحداث.

الاسم	الوصف	أماكن إقامة
`error`	يتم الإطلاق عند حدوث خطأ عند محاولة عرض عنصر التحكم.	id، رسالة
`ready`	عنصر التحكم جاهز لقبول تفاعل المستخدم ولاستدعاءات الطرق الخارجية. إذا أردت التفاعل مع عنصر التحكّم وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذه الفعالية قبل طلب طريقة `draw`، والاتصال بها فقط بعد تنشيط الفعالية. بدلاً من ذلك، يمكنك الاستماع إلى فعالية `ready` على لوحة البيانات التي تتضمّن طُرق التحكّم في المكالمات والتحكّم فيها فقط بعد إطلاق الفعالية.	لا ينطبق
`statechange`	يتم الإطلاق عندما يتفاعل المستخدم مع عنصر التحكم، مما يؤثر في حالته. على سبيل المثال، سيتم إطلاق حدث `statechange` عندما تحرك عنصر التحكم في شريط تمرير النطاق. لاسترداد حالة عنصر التحكم المُحدّثة بعد بدء الحدث، اتصل برقم `ControlWrapper.getState()`.	لا ينطبق

التفاف المُخطَّط البياني

راجِع مستندات google.visualization.ChartWrapper في قسم مرجع واجهة برمجة التطبيقات للمرئيات.

تنطبق الملاحظات التالية عند استخدام ChartWrapper كجزء من لوحة البيانات:

يجب عدم ضبط السمات dataTable وquery وdataSourceUrl وrefreshInterval بشكل صريح. وستتولّى لوحة البيانات التي تحتفظ بالرسم البياني تقديم البيانات التي تحتاج إليها.
اضبط السمة view على تحديد الأعمدة ذات الصلة بالرسم البياني، من بين جميع الأعمدة المتاحة في dataTable المقدّمة للوحة البيانات، كما هو موضّح في إنشاء مثيلات التحكّم ورسم بياني.

معرض عناصر التحكم

الفلاتر هي عناصر رسومية يمكن للمستخدمين استخدامها لاختيار البيانات التي يتم عرضها في الرسم البياني بشكل تفاعلي. يصف هذا القسم فلاتر "الرسم البياني من Google": CategoryFilter وChartRangeFilter وDateRangeFilter وNumberRangeFilter وStringFilter.

يمكنك استخدام أي منها كمعلمة إلى ControlWrapper.setControlType().

ملاحظة: عند وصف الخيارات، يتم استخدام تدوين النقاط لوصف سمات الكائنات المتداخلة. على سبيل المثال، يجب إعلان خيار باسم 'ui.label' في كائن خيارات على النحو var options = {"ui": {"label": "someLabelValue"} };.

منتقي لاختيار قيمة واحدة أو أكثر بين مجموعة من القيم المحدّدة.

الولاية

الاسم	النوع	القيمة التلقائية	الوصف
القيم المحدّدة	مصفوفة من الكائنات أو الأنواع الأولية	لا ينطبق	مجموعة القيم المحددة حاليًا. يجب أن تكون القيم المحدّدة عبارة عن مجموعة من القيم القابلة للاختيار بشكل عام والمحدّدة بواسطة الخيار `values` (سيتم تجاهل أي قيمة غير ضرورية). إذا لم تكن السمة `CategoryFilter` تسمح بالاختيار المتعدد، لن يتم الاحتفاظ إلا بالقيمة الأولى للمصفوفة.

الخيارات

الاسم	النوع	القيمة التلقائية	الوصف
فهرس عمود التصفية	number	لا ينطبق	عمود جدول البيانات الذي يجب أن يعمل الفلتر عليه. ويجب تقديم هذا الخيار أو `filterColumnLabel`. وإذا كان كلاهما متوفرًا، تكون الأولوية لهذا الخيار.
تصنيف عمود الفلتر	سلسلة	لا ينطبق	تصنيف العمود الذي يجب أن يعمل الفلتر عليه ويجب تقديم هذا الخيار أو `filterColumnIndex`. إذا كان كلاهما متاحًا، تكون الأولوية للسمة `filterColumnIndex`.
values	مصفوفة	تلقائي	قائمة من القيم للاختيار منها. إذا تم استخدام مصفوفة من العناصر، يجب أن تتضمّن تمثيل `toString()` مناسبًا للعرض للمستخدم. إذا كانت القيمة فارغة أو غير محددة، سيتم حساب قائمة القيم تلقائيًا من القيم المتوفّرة في عمود "جدول البيانات" الذي يعمل عليه عنصر التحكّم هذا.
استخدام	منطقي	خطأ	عند تعبئة قائمة القيم القابلة للاختيار تلقائيًا من عمود "جدول البيانات"، يعمل هذا الفلتر، سواء كان المطلوب استخدام قيم الخلايا الفعلية أو قيمها المنسّقة.
واجهة المستخدم	اعتراض	قيمة فارغة	كائن به أعضاء لتهيئة جوانب مختلفة لواجهة مستخدم عنصر التحكم. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {label: 'Metric', labelSeparator: ':'}
ui.caption	سلسلة	"اختيار قيمة..."	الشرح المطلوب عرضه داخل أداة منتقي القيمة عند عدم تحديد أي عنصر.
ui.sortValues	منطقي	صواب	لتحديد ما إذا كان يجب ترتيب القيم التي تريد الاختيار منها.
ui.selectedValuesLayout	سلسلة	"بجانب"	كيفية عرض القيم المحددة عند السماح بتحديد عناصر متعددة. القيم المحتملة هي: `'aside'`: سيتم عرض القيم المحدّدة في سطر نص واحد بجانب أداة منتقي القيم. `'below'`: سيتم عرض القيم المحددة في سطر نص واحد أسفل الأداة، `'belowWrapping'`: مثل `below`، ولكن الإدخالات التي لا تتناسب مع المنتقي سيتم التفافها إلى سطر جديد، `'belowStacked'`: سيتم عرض القيم المحددة في عمود أسفل الأداة.
ui.allowNone	منطقي	صواب	ما إذا كان يُسمح للمستخدم بعدم اختيار أي قيمة. إذا كان على `false` اختيار قيمة واحدة على الأقل من القيم المتاحة. أثناء إعداد التحكّم، إذا تم ضبط الخيار على `false` ولم يتم تحديد حالة `selectedValues`، يتم تحديد القيمة الأولى من القيم المتاحة تلقائيًا.
ui.allowMultiple	منطقي	صواب	ما إذا كان يمكن اختيار قيم متعددة، بدلاً من قيمة واحدة فقط.
ui.allowTyping	منطقي	صواب	ما إذا كان يُسمح للمستخدم بالكتابة في حقل نصي لتضييق نطاق قائمة الخيارات المحتملة (عبر الإكمال التلقائي) أم لا.
ui.label	سلسلة	تلقائي	التصنيف المراد عرضه بجوار منتقي الفئات. وفي حال عدم تحديد ذلك، سيتم استخدام تصنيف العمود الذي يعمل عليه عنصر التحكّم.
ui.labelSeparator	سلسلة	لا ينطبق	سلسلة فاصلة ملحقة بالعلامة، لفصل التصنيف من منتقي الفئات.
ui.labelStacking	سلسلة	'أفقي'	ما إذا كان يجب عرض التصنيف أعلى (التجميع الرأسي) أو بجانب (التكديس الأفقي) في منتقي الفئات. يمكنك استخدام `'vertical'` أو `'horizontal'`.
ui.cssClass	سلسلة	"google-Visualization-controls-categoryfilter"	فئة CSS المطلوب تعيينها إلى عنصر التحكم، للنمط المخصص.

ChartRangeFilter

شريط تمرير يتضمّن إصبعَي إبهام متراكبَين على رسم بياني لاختيار نطاق من القيم من المحور المستمر في الرسم البياني

الولاية

الاسم	النوع	القيمة التلقائية	الوصف
نطاق.start	رقم، تاريخ، تاريخ، وقت أو يوم	قيمة بداية النطاق	بداية النطاق المحدّد، بما في ذلك القيم الواقعة بينهما.
نطاق.end	رقم، تاريخ، تاريخ، وقت أو يوم	قيمة نهاية النطاق	نهاية النطاق المحدد، بما في ذلك القيم الواقعة بينهما.

الخيارات

الاسم	النوع	القيمة التلقائية	الوصف
فهرس عمود التصفية	number	لا ينطبق	فهرس العمود في جدول البيانات الذي يعمل الفلتر عليه. إلزامي هو تقديم إما هذا الخيار أو `filterColumnLabel`. إذا كان كلاهما متاحًا، تكون الأولوية لهذا الخيار. لاحظ أنه من المنطقي تحديد فهرس لعمود النطاق المضمّن في المحور المستمر للرسم البياني المرسوم داخل عنصر التحكم.
تصنيف عمود الفلتر	سلسلة	لا ينطبق	تصنيف عمود جدول البيانات الذي يعمل الفلتر عليه. ويجب تقديم هذا الخيار أو `filterColumnIndex`. إذا كان كلاهما متاحًا، تكون الأولوية للعلامة `filterColumnIndex`. تجدر الإشارة إلى أنه من المنطقي فقط تحديد تصنيف لعمود النطاق المضمّن في المحور المستمر للرسم البياني المرسوم داخل عنصر التحكم.
واجهة المستخدم	اعتراض	قيمة فارغة	كائن به أعضاء لتهيئة جوانب مختلفة لواجهة مستخدم عنصر التحكم. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType	سلسلة	"ComboChart"	نوع الرسم البياني المرسوم داخل عنصر التحكم. يمكن أن يكون أحد الخيارات التالية: "AreaChart" أو "LineChart" أو "ComboChart" أو "ScatterChart".
ui.chartOptions	اعتراض	{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } }	خيارات التهيئة للرسم البياني المرسومة داخل عنصر التحكم. تسمح بمستوى التهيئة نفسه كأي مخطط في لوحة البيانات، وتتوافق مع التنسيق نفسه الذي يقبله ChartWrapper.setOptions(). ويمكنك تحديد خيارات إضافية أو إلغاء الخيارات التلقائية (ملاحظة: على الرغم من ذلك، تم اختيار الإعدادات التلقائية بعناية للحصول على المظهر الأمثل).
ui.chartView	كائن أو سلسلة (كائن تسلسلي)	قيمة فارغة	مواصفات الملف الشخصي المراد تطبيقها على جدول البيانات المستخدم لرسم المخطط داخل عنصر التحكم. يتيح مستوى التهيئة نفسه كأي مخطط في لوحة البيانات، كما يتوافق مع التنسيق نفسه الذي يقبله ChartWrapper.setView(). إذا لم يتم تحديده، يتم استخدام جدول البيانات نفسه لرسم الرسم البياني. تجدر الإشارة إلى أنّ المحور الأفقي للرسم البياني المرسوم يجب أن يكون مستمرًا، لذا يجب الحرص على تحديد `ui.chartView` وفقًا لذلك.
ui.minRangeSize	number	يتم تفسير فرق قيمة البيانات على أنه 1 بكسل	الحد الأدنى لحجم النطاق القابل للاختيار (`range.end - range.start`)، المحدّد في وحدات قيم البيانات. بالنسبة إلى المحور الرقمي، فهو عدد (ليس بالضرورة عددًا صحيحًا). بالنسبة إلى التاريخ، أو التاريخ، أو محور الوقت، يكون عددًا صحيحًا يحدد الفرق بالمللي ثانية.
ui.snapToData	منطقي	خطأ	في حال التعيين على "true"، يتم محاذاة إبهام النطاق إلى أقرب نقاط بيانات. في هذه الحالة، يجب أن تكون نقاط نهاية النطاق الذي تعرضه `getState()` قيمًا في جدول البيانات.

الأحداث

الإضافات إلى أحداث ControlWrapper:

الاسم	الوصف	أماكن إقامة
`statechange`	مثلما هو موثّق لكل عنصر ControlWrapper، يحتوي فقط على خاصية منطقية، `inProgress`، تحدّد ما إذا كان يتم تغيير الحالة حاليًا (يتم سحب أحد الإبهام أو النطاق نفسه).	جارٍ

FilterRangeFilter

شريط تمرير ثنائي القيم لاختيار نطاقات التواريخ.

جرّب تحريك شريط التمرير لتغيير الصفوف التي يتم عرضها في الجدول أدناه.

الولاية

الاسم	النوع	القيمة التلقائية	الوصف
قيمة منخفضة	number	لا ينطبق	الحد الأدنى للنطاق المحدد، بما في ذلك القيم الواقعة بينهما.
قيمة عالية	number	لا ينطبق	النطاق الأعلى للنطاق المحدد، بما في ذلك القيم الواقعة بينهما.
قيمة منخفضة	منطقي	لا ينطبق	ما إذا كان الإبهام السفلي في شريط التمرير مقفلاً بالحد الأدنى المسموح به للنطاق. في حال الضبط، يتم إلغاء `lowValue`.
مرتفع الإبهام عند الحد الأقصى	منطقي	لا ينطبق	ما إذا كان الإبهام الأعلى من شريط التمرير مقفلاً بأقصى نطاق مسموح به. في حال الضبط، يتم إلغاء `highValue`.

الخيارات

الاسم	النوع	القيمة التلقائية	الوصف
فهرس عمود التصفية	number	لا ينطبق	عمود جدول البيانات الذي يجب أن يعمل الفلتر عليه. ويجب تقديم هذا الخيار أو `filterColumnLabel`. وإذا كان كلاهما متوفرًا، تكون الأولوية لهذا الخيار. يجب الإشارة إلى عمود من النوع `number`.
تصنيف عمود الفلتر	سلسلة	لا ينطبق	تصنيف العمود الذي يجب أن يعمل الفلتر عليه ويجب تقديم هذا الخيار أو `filterColumnIndex`. إذا كان كلاهما متاحًا، تكون الأولوية للسمة `filterColumnIndex`. يجب الإشارة إلى عمود من النوع `number`.
القيمة الدنيا	التاريخ	تلقائي	الحد الأدنى للقيمة المسموح بها للنطاق أقل. وفي حال عدم تحديد القيمة، سيتم استنتاج القيمة من محتويات جدول البيانات التي يديرها عنصر التحكّم.
الحد الأقصى للقيمة	التاريخ	تلقائي	الحد الأقصى للقيمة المسموح بها للنطاق أعلى. وفي حال عدم تحديد القيمة، سيتم استنتاج القيمة من محتويات جدول البيانات التي يديرها عنصر التحكّم.
واجهة المستخدم	اعتراض	قيمة فارغة	كائن به أعضاء لتهيئة جوانب مختلفة لواجهة مستخدم عنصر التحكم. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {label: 'Age', labelSeparator: ':'}
تنسيق ui.format	اعتراض	لا ينطبق	كيفية تمثيل التاريخ كسلسلة. يقبل أي تنسيق تاريخ صالح.
ui.step	سلسلة	يوم	الحد الأدنى من التغيير المحتمل عند سحب علامة تبويب "شريط تمرير": يمكن أن يكون أي وحدة زمنية حتى "اليوم". ("الشهر" و"السنة" غير متاحَين بعد).
ui.ticks	number	تلقائي	عدد المؤشرات (مواضع ثابتة في شريط النطاق) التي يمكن أن تشغلها أشرطة التمرير.
ui.unitIncrement	سلسلة	"1"	مقدار الزيادة في زيادات الوحدة لنطاقات النطاق. تعادل زيادة الوحدة استخدام مفاتيح الأسهم لتحريك إصبع شريط التمرير.
ui.blockIncrement	number	10	مقدار الزيادة في زيادات المنع لنطاقات النطاق. تعادل زيادة الكتلة استخدام مفتاحَي ggUp وpgDown لنقل شريطَي تمرير شريط التمرير.
ui.showRangeValues	منطقي	صواب	لتحديد ما إذا كانت هناك تصنيفات بجوار شريط التمرير تعرض امتدادات النطاق المحدد.
ui.orientation	سلسلة	'أفقي'	اتجاه شريط التمرير. إما `'horizontal'` أو `'vertical'`.
ui.label	سلسلة	تلقائي	التصنيف المراد عرضه بجوار شريط التمرير. وفي حال عدم تحديد ذلك، سيتم استخدام تصنيف العمود الذي يعمل عليه عنصر التحكّم.
ui.labelSeparator	سلسلة	لا ينطبق	سلسلة فاصلة ملحقة بالعلامة، لفصل التصنيف مرئيًا من شريط التمرير.
ui.labelStacking	سلسلة	'أفقي'	ما إذا كان يجب عرض التصنيف فوق (التجميع الرأسي) أو بجانب (التكديس الأفقي) شريط التمرير. يمكنك استخدام `'vertical'` أو `'horizontal'`.
ui.cssClass	سلسلة	"google-Visualization-controls-rangefilter"	فئة CSS المطلوب تعيينها إلى عنصر التحكم، للنمط المخصص.

فلتر نطاق البيانات

شريط تمرير ثنائي القيم لاختيار نطاقات القيم الرقمية.

الولاية

الاسم	النوع	القيمة التلقائية	الوصف
قيمة منخفضة	number	لا ينطبق	الحد الأدنى للنطاق المحدد، بما في ذلك القيم الواقعة بينهما.
قيمة عالية	number	لا ينطبق	النطاق الأعلى للنطاق المحدد، بما في ذلك القيم الواقعة بينهما.
قيمة منخفضة	منطقي	لا ينطبق	ما إذا كان الإبهام السفلي في شريط التمرير مقفلاً بالحد الأدنى المسموح به للنطاق. في حال الضبط، يتم إلغاء `lowValue`.
مرتفع الإبهام عند الحد الأقصى	منطقي	لا ينطبق	ما إذا كان الإبهام الأعلى من شريط التمرير مقفلاً بأقصى نطاق مسموح به. في حال الضبط، يتم إلغاء `highValue`.

الخيارات

الاسم	النوع	القيمة التلقائية	الوصف
فهرس عمود التصفية	number	لا ينطبق	عمود جدول البيانات الذي يجب أن يعمل الفلتر عليه. ويجب تقديم هذا الخيار أو `filterColumnLabel`. وإذا كان كلاهما متوفرًا، تكون الأولوية لهذا الخيار. يجب الإشارة إلى عمود من النوع `number`.
تصنيف عمود الفلتر	سلسلة	لا ينطبق	تصنيف العمود الذي يجب أن يعمل الفلتر عليه ويجب تقديم هذا الخيار أو `filterColumnIndex`. إذا كان كلاهما متاحًا، تكون الأولوية للسمة `filterColumnIndex`. يجب الإشارة إلى عمود من النوع `number`.
القيمة الدنيا	number	تلقائي	الحد الأدنى للقيمة المسموح بها للنطاق أقل. وفي حال عدم تحديد القيمة، سيتم استنتاج القيمة من محتويات جدول البيانات التي يديرها عنصر التحكّم.
الحد الأقصى للقيمة	number	تلقائي	الحد الأقصى للقيمة المسموح بها للنطاق أعلى. وفي حال عدم تحديد القيمة، سيتم استنتاج القيمة من محتويات جدول البيانات التي يديرها عنصر التحكّم.
واجهة المستخدم	اعتراض	قيمة فارغة	كائن به أعضاء لتهيئة جوانب مختلفة لواجهة مستخدم عنصر التحكم. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {label: 'Age', labelSeparator: ':'}
تنسيق ui.format	اعتراض	لا ينطبق	كيفية تمثيل الرقم كسلسلة. يقبل أي تنسيق أرقام صالح.
ui.step	number	1، أو حساب من `ticks` إذا تم تحديده	الحد الأدنى للتغيير المحتمل عند سحب شريط تمرير شريط التمرير.
ui.ticks	number	تلقائي	عدد المؤشرات (مواضع ثابتة في شريط النطاق) التي يمكن أن تشغلها أشرطة التمرير.
ui.unitIncrement	number	1	مقدار الزيادة في زيادات الوحدة لنطاقات النطاق. تعادل زيادة الوحدة استخدام مفاتيح الأسهم لتحريك إصبع شريط التمرير.
ui.blockIncrement	number	10	مقدار الزيادة في زيادات المنع لنطاقات النطاق. تعادل زيادة الكتلة استخدام مفتاحَي ggUp وpgDown لنقل شريطَي تمرير شريط التمرير.
ui.showRangeValues	منطقي	صواب	لتحديد ما إذا كانت هناك تصنيفات بجوار شريط التمرير تعرض امتدادات النطاق المحدد.
ui.orientation	سلسلة	'أفقي'	اتجاه شريط التمرير. إما `'horizontal'` أو `'vertical'`.
ui.label	سلسلة	تلقائي	التصنيف المراد عرضه بجوار شريط التمرير. وفي حال عدم تحديد ذلك، سيتم استخدام تصنيف العمود الذي يعمل عليه عنصر التحكّم.
ui.labelSeparator	سلسلة	لا ينطبق	سلسلة فاصلة ملحقة بالعلامة، لفصل التصنيف مرئيًا من شريط التمرير.
ui.labelStacking	سلسلة	'أفقي'	ما إذا كان يجب عرض التصنيف فوق (التجميع الرأسي) أو بجانب (التكديس الأفقي) شريط التمرير. يمكنك استخدام `'vertical'` أو `'horizontal'`.
ui.cssClass	سلسلة	"google-Visualization-controls-rangefilter"	فئة CSS المطلوب تعيينها إلى عنصر التحكم، للنمط المخصص.

سلسلة الفلاتر

حقل إدخال نص بسيط يسمح لك بتصفية البيانات من خلال مطابقة السلاسل. ويتم تحديث القائمة بعد كل ضغطة مفتاح: جرّب كتابة j لقصر الجدول أدناه على جون وجيسيكا.

الولاية

الاسم	النوع	القيمة التلقائية	الوصف
value	سلسلة أو كائن	لا ينطبق	النص الذي تم إدخاله حاليًا في حقل إدخال عنصر التحكم.

الخيارات

الاسم	النوع	القيمة التلقائية	الوصف
فهرس عمود التصفية	number	لا ينطبق	عمود جدول البيانات الذي يجب أن يعمل الفلتر عليه. ويجب تقديم هذا الخيار أو `filterColumnLabel`. وإذا كان كلاهما متوفرًا، تكون الأولوية لهذا الخيار.
تصنيف عمود الفلتر	سلسلة	لا ينطبق	تصنيف العمود الذي يجب أن يعمل الفلتر عليه ويجب تقديم هذا الخيار أو `filterColumnIndex`. إذا كان كلاهما متاحًا، تكون الأولوية للسمة `filterColumnIndex`.
نوع المطابقة	سلسلة	"بادئة"	لتحديد ما إذا كان عنصر التحكم يجب أن يتطابق مع القيم الدقيقة فقط (`'exact'`) أو البادئات التي تبدأ من بداية القيمة (`'prefix'`) أو أي سلسلة فرعية (`'any'`).
حساس لحالة الأحرف	منطقي	خطأ	ما إذا كانت المطابقة يجب أن تكون حساسة لحالة الأحرف أم لا.
استخدام	منطقي	خطأ	لتحديد ما إذا كان يجب أن يتطابق عنصر التحكم مع القيم المنسقة للخلية أو القيم الفعلية الأحدث.
واجهة المستخدم	اعتراض	قيمة فارغة	كائن به أعضاء لتهيئة جوانب مختلفة لواجهة مستخدم عنصر التحكم. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	منطقي	صواب	يمكنك اختيار ما إذا كان يجب أن يتطابق عنصر التحكّم في أي وقت يتم فيه الضغط على مفتاح أو يتم ذلك فقط عند "تغيير" حقل الإدخال (فقدان التركيز أو الضغط على مفتاح Enter).
ui.label	سلسلة	تلقائي	التصنيف المراد عرضه بجانب حقل الإدخال. وفي حال عدم تحديد ذلك، سيتم استخدام تصنيف العمود الذي يعمل عليه عنصر التحكّم.
ui.labelSeparator	سلسلة	لا ينطبق	سلسلة فاصلة ملحقة بالتصنيف، لفصل التصنيف مرئيًا من حقل الإدخال.
ui.labelStacking	سلسلة	'أفقي'	ما إذا كان يجب عرض التصنيف فوق (التجميع الرأسي) أو بجانب (التكديس الأفقي) حقل الإدخال. يمكنك استخدام `'vertical'` أو `'horizontal'`.
ui.cssClass	سلسلة	"google-Visualization-controls-stringfilter"	فئة CSS المطلوب تعيينها إلى عنصر التحكم، للنمط المخصص.

عناصر التحكم ولوحات التحكم

نظرة عامة

استخدام عناصر التحكّم ولوحات البيانات

1. إنشاء هيكل عظمي لـ HTML للوحة البيانات

2. تحميل مكتباتك

3. إعداد بياناتك

4. إنشاء مثيل لوحة تحكم

5. إنشاء مثيلات التحكم والرسم البياني

6- إنشاء تبعيات

7- رسم لوحة التحكم

8- التغييرات الآلية بعد السحب

مرجع واجهة برمجة التطبيقات

لوحة البيانات

الشركة المصنِّعة

الطُرق

الأحداث

ملفّات التحكّم

الشركة المصنِّعة

الطُرق

الأحداث

التفاف المُخطَّط البياني

معرض عناصر التحكم

تصفية الفئات

الولاية

الخيارات

ChartRangeFilter

الولاية

الخيارات

الأحداث

FilterRangeFilter

الولاية

الخيارات

فلتر نطاق البيانات

الولاية

الخيارات

سلسلة الفلاتر

الولاية

الخيارات