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

شريط الأدوات

Overview
مثال
الاستخدام
1. أنواع الإخراج
2. البنية
سياسة البيانات

نظرة عامة

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

بواسطة: Google

مثال

حدِّد أحد الخيارات في شريط الأدوات.

<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']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

الاستخدام

أضِف شريط أدوات إلى صفحتك من خلال استدعاء الطريقة google.visualization.drawToolbar()، وملؤه بأنواع التصدير المسموح بها والبيانات المطلوبة لكل منها.

لاستخدام شريط أدوات، يجب أن يحصل العرض المرئي على بياناته من عنوان URL، ولا يمكنك تمرير كائنات DataTable أو DataView معبأة يدويًا. ستنقل عنوان URL الخاص بالبيانات المستخدمة في تعبئة العرض المرئي في طريقة drawToolbar().

إذا كنت ترغب في توفير مكوّن iGoogle أو إطار iframe قابل للتضمين يحمل الأداة، يجب أن يكون لديك عنوان URL لإصدار مصغّر من العرض المرئي.

أنواع الإخراج

يمكن أن يوفّر شريط الأدوات للمستخدم خيارًا واحدًا أو أكثر من أنواع النتائج التالية، وذلك استنادًا إلى طريقة ضبط شريط الأدوات بطريقة drawToolbar():

نسخة بسيطة من ملف CSV من البيانات (سيعرضها المتصفّح أو يعرض إمكانية تنزيلها وحفظها استنادًا إلى إعدادات المتصفّح و/أو
جدول HTML يحتوي على البيانات، وفتحه في نافذة متصفح جديدة، و/أو
رمز HTML <iframe> لتضمين هذا التصور في صفحة ويب، و/أو
رابط إلى صفحة تتيح للمستخدم تضمين هذه الأداة في صفحة iGoogle.

البنية

google.visualization.drawToolbar(container, components)

المعلمات

حاوية

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

المكوّنات

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

type: 'csv' - يصدِّر هذا الخيار البيانات إلى ملف قيم مفصولة بفواصل. سيتم فتح مربع حوار "حفظ باسم" في المتصفح.
- datasource: 'string' - عنوان URL لمصدر البيانات.
type: html' - يصدِّر هذا الخيار البيانات إلى جدول HTML. سيتم فتح الصفحة التي تحتوي على جدول البيانات في نافذة جديدة في المتصفّح.
- datasource: سلسلة عنوان URL لمصدر البيانات.
type: igoogle: يتيح هذا الخيار للمستخدم إضافة رسومات بيانية إلى صفحة iGoogle. سيتم فتح صفحة "إضافة إلى iGoogle" في المتصفح. ولا تستخدِم هذه السمة إلا إذا كان العرض المرئي متاحًا في نسخة مزوّدة بأداة.
- datasource: سلسلة عنوان URL لمصدر البيانات.
- gadget: سلسلة عنوان URL لملف XML الخاص بالنسخة الأداة. يُرجى العِلم أنّ التمثيل البصري الذي يرتبط به شريط الأدوات لا يجب أن يكون نسخة التطبيق المصغر.
- userprefs: كائن اختياري للخيارات المفضّلة مناسب لهذا التمثيل المرئي ويحدّد الإعدادات المفضّلة للتمثيل البصري
type: htmlcode - ينشئ هذا الخيار مجموعة من رمز HTML يمكن للمستخدم تضمينها في صفحة ويب لعرض التمثيل البصري داخل إطار iframe. سيتم فتح نافذة منبثقة في المتصفح تحتوي على عنصر html المحدد للأداة.لا تستخدم هذا الخيار إلا إذا كان العرض المرئي متاحًا في إصدار تم تصميمه باستخدام أدوات.
- datasource: سلسلة عنوان URL لمصدر البيانات.
- gadget: سلسلة عنوان URL لملف xml للأداة.
- userprefs: كائن اختياري للخيارات المفضّلة مناسب لهذا التمثيل المرئي ويحدّد الإعدادات المفضّلة للتمثيل البصري
- style: سلسلة اختيارية لنمط iframe. على سبيل المثال: 'width: 300px; height: 500px;'.

مثال

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

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

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

الأقلمة

لا يدعم شريط الأدوات حاليًا سوى اللغة الإنجليزية الأمريكية.