شريط الأدوات

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

نظرة عامة

يمكنك إضافة عنصر شريط أدوات إلى أي تمثيل بصري لتمكين المستخدم من تصدير البيانات الأساسية إلى ملف 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)

المَعلمات

container
مقبض لعنصر 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 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);
};

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

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

الأقلمة

يتيح شريط الأدوات حاليًا استخدام اللغة الإنجليزية فقط.