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

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

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

نظرة عامة

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

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

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

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

يمكنك الاطّلاع على المثال التالي الذي يتم فيه استخدام منتقي الفئات وشريط تمرير النطاق لعرض البيانات المعروضة في رسم بياني دائري.

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

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

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

إنشاء بنية HTML للوحة البيانات: يجب أن تحتوي صفحتك على العدد المطلوب من عناصر HTML للاحتفاظ بكل عضو في لوحة البيانات. ويتضمن ذلك لوحة المعلومات نفسها وجميع عناصر التحكم والمخططات التي تشكل جزءًا منها. ستستخدم عادةً <div> لكل منها.
تحميل مكتباتك: تتطلّب لوحة البيانات تضمين مكتبتَين فقط أو تحميلهما في الصفحة، وهما: Google AJAX API وحزمة Google Visualization controls.
إعداد بياناتك: عليك تحضير البيانات لعرضها، أي من خلال تحديد البيانات بنفسك في الرمز أو طلب البيانات من موقع إلكتروني بعيد.
إنشاء مثيل للوحة البيانات: يمكنك إنشاء مثيل للوحة البيانات من خلال استدعاء الدالة الإنشائية وتمرير مرجع إلى العنصر <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 API وحزمة Google Visualization controls. وتحدّد واجهة برمجة التطبيقات (خاصةً 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. تجهيز بياناتك

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

تقبل لوحات البيانات البيانات في DataTable، تمامًا مثل المخططات.

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 الذي يعمل عنصر التحكّم عليه (في المثال أعلاه، يعمل عنصر التحكّم على العمود الذي يحمل اسم Donuts eat).

ويمكنك استخدام خيار الإعداد 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.Dashboard	تربط عنصر تحكّم واحدًا أو أكثر بمشارك واحد أو أكثر في لوحة البيانات (سواء رسومات بيانية أو عناصر تحكّم أخرى)، بحيث تتم إعادة رسم عناصر التحكّم الأخرى عندما يجمع أي عنصر منها تفاعلاً آلياً أو تفاعلاً من المستخدم يؤثر في البيانات التي تتم إدارتها من خلال لوحة البيانات. تعرض مثيل لوحة البيانات نفسه لسلسلة مكالمات `bind()` متعددة معًا. controls - إما نسخة واحدة أو مصفوفة من مثيلات `google.visualization.ControlWrapper` تحدد عناصر التحكم المطلوب ربطها. الرسوم البيانية - إما نسخة واحدة أو مصفوفة من مثيلات `google.visualization.ChartWrapper` تحدّد الرسوم البيانية التي سيتم تشغيل عناصر التحكّم فيها.
`draw(dataTable)`	لا ينطبق	لرسم لوحة المعلومات. dataTable - أي مما يلي: كائن `DataTable` أو كائن `DataView` أو تمثيل JSON لـ DataTable أو مصفوفة تتبع بنية google.visualization.arrayToDataTable() .
`getSelection()`	مصفوفة الكائنات	تعرض مصفوفة من الكيانات المرئية المحدّدة من الرسوم البيانية في لوحة البيانات. عند طلب الطريقة `getSelection()` على لوحة البيانات، تعرض مجموعة من كل الاختيارات التي تم تحديدها في كل الرسومات البيانية المضمّنة، ما يسمح باستخدام مرجع واحد عند التعامل مع اختيارات الرسومات البيانية. ملاحظة: يجب ربط مستمعي الفعاليات خلال الحدث المحدّد بكل رسم بياني تريد الاستماع إليه. الوصف الموسّع

bind(controls, charts)

google.visualization.Dashboard

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

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

draw(dataTable)

لا ينطبق

لرسم لوحة المعلومات.

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

getSelection()

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

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

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

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

فعاليات

يعرض كائن لوحة البيانات الأحداث التالية. تجدر الإشارة إلى أنّه يجب الاتصال بـ Dashboard.draw() قبل عقد أي أحداث.

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

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

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

ready

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

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

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

لا ينطبق

ControlWrapper

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

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

ControlWrapper(opt_spec)

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

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

الطُرق

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

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`draw()`	لا ينطبق	لرسم عنصر التحكم. عادةً ما تتولى لوحة المعلومات التي تحمل عنصر التحكم رسمه. عليك طلب `draw()` لفرض إعادة الرسم الآلي لعنصر التحكّم بعد تغيير أي من إعداداته الأخرى، مثل الخيارات أو الحالة.
`toJSON()`	سلسلة	تعرض نسخة سلسلة من تمثيل JSON لعنصر التحكّم.
`clone()`	ControlWrapper	لعرض نسخة عميقة من برنامج تضمين عنصر التحكم.
`getControlType()`	سلسلة	اسم فئة عنصر التحكّم. إذا كان هذا عنصر تحكّم في Google، لن يكون الاسم مؤهّلاً باستخدام `google.visualization`. لذلك، على سبيل المثال، إذا كان هذا العنصر عنصر تحكُّم categoryFilter، سيتم عرض "CategoryFilter" بدلاً من "google.visualization.CategoryFilter".
`getControlName()`	سلسلة	تعرض اسم عنصر التحكّم الذي تمّ تعيينه من قِبل `setControlName()`.
`getControl()`	مرجع عنصر التحكّم	لعرض مرجع لعنصر التحكم الذي تم إنشاؤه بواسطة ControlWrapper هذا. سيؤدي هذا الإجراء إلى عرض قيمة فارغة إلى أن يتم استدعاء `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 هي القيمة. لإلغاء ضبط خيار، مرّ على القيمة "فارغ" (فارغ) للقيمة. يُرجى العِلم أنّ المفتاح قد يكون اسمًا مؤهّلاً، مثل `'vAxis.title'`.
`setOptions(options_obj)`	لا ينطبق	تضبط كائن خيارات كاملاً لعنصر تحكّم.
`setState(state_obj)`	لا ينطبق	لضبط حالة التحكّم. تجمع الحالة جميع المتغيرات التي يمكن أن يؤثر فيها المستخدم الذي يشغّل عنصر التحكّم. على سبيل المثال، يمكن وصف حالة شريط تمرير النطاق استنادًا إلى المواضع التي يشغلها الإبهام المنخفض والمرتفع لشريط التمرير.

فعاليات

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

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

ChartWrapper

راجِع المستندات 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"} };.

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

الحالة

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

الخيارات

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

ChartRangeFilter

شريط تمرير يحتوي على إصبعَين صغيرَين على رسم بياني لاختيار نطاق قيم من المحور المستمر للرسم البياني

الحالة

الاسم	النوع	القيمة التلقائية	الوصف
range.start	رقم أو تاريخ أو تاريخ أو وقت أو يوم	قيمة بداية النطاق	بداية النطاق المحدد (شامل).
range.end	رقم أو تاريخ أو تاريخ أو وقت أو يوم	القيمة النهائية للنطاق	نهاية النطاق المحدد، شامل.

الخيارات

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

فعاليات

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

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

DateRangeFilter

شريط تمرير ذو قيمة مزدوجة لاختيار نطاقات التواريخ

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

الحالة

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

الخيارات

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

NumberRangeFilter

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

الحالة

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

الخيارات

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

StringFilter

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

الحالة

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

الخيارات

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