التمثيل البصري: رسم بياني عام للصور

ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.

  1. Overview
  2. أمثلة
  3. جارٍ التحميل
  4. تنسيق البيانات
  5. خيارات الإعداد
  6. الطُرق
  7. الأحداث
  8. سياسة البيانات
  9. الأقلمة

نظرة عامة

الرسم البياني للصور العامة هو برنامج تضمين عام لجميع الرسوم البيانية التي تنتجها Google Chart API. يُرجى قراءة مستندات Chart API قبل محاولة استخدام هذا التمثيل المرئي. يُرجى العِلم أنّه يمكنك إرسال ما يصل إلى 16 ألف بيانات باستخدام هذا التمثيل المرئي، على عكس الحدّ الأقصى المسموح به البالغ 2K في الطلبات المباشرة إلى Chart API.

يتم تمرير كل البيانات إلى الرسوم البيانية باستخدام DataTable أو DataView. بالإضافة إلى ذلك، يتم تمرير بعض التصنيفات كأعمدة في جدول البيانات.

يتم تمرير جميع معلَمات عناوين URL الأخرى لواجهة برمجة التطبيقات Chart API (باستثناء chd) كخيارات.

بواسطة: 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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

رسم بياني شريطي عمودي

يُرجى العلم أنّه في الرسوم البيانية الشريطية الملتفّة، لا تحتاج إلى تحديد chxt='x' كما تفعل في حال استدعاء الرسم البياني بنفسك. وإذا لم تحدّد محورًا، يحاول الرسم البياني بالصور العام إعداد الرسم البياني بشكل صحيح بشكل تلقائي.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

رسم بياني دائري

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

رسم بياني نسيجي

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

مخطط خريطة

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "imagechart"

  google.charts.load('current', {'packages': ['imagechart']});

اسم فئة العرض المرئي هو google.visualization.ImageChart.

  var visualization = new google.visualization.ImageChart(container_div);

تنسيق البيانات

هناك تنسيقان معممان للبيانات: أحدهما لمخططات الخرائط والآخر لجميع المخططات الأخرى. يُرجى العِلم أنّ التنسيق الرقمي الوحيد المتوافق مع البيانات هو نوع "رقم JavaScript".

ملاحظة: يجب عدم ترميز عناوين URL لأي قيم سلسلة يتم تمريرها كبيانات أو خيارات.

مخططات الخرائط

يأخذ مخطط الخريطة جدول بيانات يحتوي على عمودين مطلوبين:

اطّلِع على مستندات الرسم البياني للخريطة للحصول على مزيد من المعلومات.

الرسومات البيانية غير المستندة إلى الخريطة

تأخذ الرسوم البيانية التي لا تستند إلى خريطة إلى جدول بيانات يحتوي على عمودَين اختياريَين (أحدهما في البداية والواحد في النهاية) وعمود بيانات واحد أو أكثر بينهما:

  • العمود الأول: [سلسلة اختيارية] يمثّل كل إدخال تصنيفًا مستخدَمًا على المحور "س" (يعادل المَعلمة chl أو chxl) في الرسوم البيانية المتوافقة.
  • الأعمدة التالية: أي عدد من الأعمدة الرقمية، يمثّل كل منها سلسلة بيانات.
  • الأعمدة الأخيرة: [اختيارية، سلسلة] أي عدد من أعمدة السلسلة بعد أعمدة البيانات، حيث يمثّل كل إدخال تصنيف نقطة بيانات للرسوم البيانية المتوافقة. إذا كنت تريد استخدام هذا العمود، يجب تحديد الخيار annotationColumns.

سيتم عرض البيانات بطرق مختلفة، بناءً على نوع الرسم البياني. اطّلِع على مستندات الرسم البياني.

ملاحظة حول فهارس الأعمدة: يزيل التمثيل البصري للرسم البياني للصور العامة أعمدة السلاسل من جدول البيانات قبل إرسال الجدول إلى خدمة Chart API. وبالتالي، تتضمّن فهارس الأعمدة في الخيارات والطرق والأحداث المحدّدة في هذه الصفحة أعمدة السلسلة في عدد الفهرس، لكن فهارس الأعمدة في أي خيارات تعالجها خدمة Chart API (على سبيل المثال، الخيار chm) تتجاهل أعمدة السلسلة في عدد الفهرس.

خيارات الضبط

يتم تحديد الخيارات التالية لهذا التمثيل البصري. حدِّدها في كائن الخيارات الذي يتم تمريره إلى طريقة draw() للتمثيل البصري. لا تتوفّر بعض الخيارات التالية مع جميع أنواع الرسوم البيانية، لذا يُرجى الاطّلاع على المستندات الخاصة بنوع الرسم البياني للصور الثابتة. يمكنك ضبط أيّ مَعلمة لعنوان URL لواجهة برمجة التطبيقات في Chart API كخيار. على سبيل المثال، سيتم تحديد معلَمة عنوان URL chg=50,50 من التمثيل البصري للرسم البياني بهذه الطريقة: options['chg'] = '50,50'.

ملاحظة حول الألوان: يتم تحديد خيارات الألوان، مثل colors وcolor وbackgroundColor، بتنسيق ألوان Chart API. يشبه هذا التنسيق التنسيق #RRGGBB، إلّا أنّه يتضمّن رقمًا سداسيًا عشريًا رابعًا اختياريًا للإشارة إلى الشفافية. الألوان التي يمكن للمستخدمين قراءتها، مثل "الأحمر" و"الأخضر" و"الأزرق" وغيرها غير متوافقة. لا يتضمّن تنسيق ألوان Chart API الرمز # في البداية، ولكنّ خيارات العرض المرئي للرسم البياني العام للصور ستقبل رموز الألوان التي تحتوي على علامة # أو لا.

الاسم النوع القيمة التلقائية الوصف
annotationColumns Array<object> لا ينطبق

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

يتضمّن كل كائن في المصفوفة السمات التالية:

  • column [number] - الفهرس المجاني للعمود الذي يحتوي على النص المُستخدَم في التعليق التوضيحي ولا تحتاج إلى قيمة في كل صف من هذا العمود.
  • positionColumn [number] - الفهرس الدقيق للعمود الذي يتضمّن نقطة البيانات المصنّفة الإعداد التلقائي هو عمود البيانات الأول.
  • color [string] - لون نص التعليق التوضيحي في تنسيق ألوان Chart API. الافتراضي هو '#000000' (أسود).
  • size [number] - حجم خط التعليق التوضيحي بالبكسل
  • priority [string]: إما "منخفض" أو "متوسط" أو "مرتفع"، لتحديد الطبقة التي يجب رسم التصنيف فيها. والقيمة التلقائية هي "medium"، والتي تشير إلى أنّه يتم رسم التصنيف بعد الأشرطة والخطوط، وقبل التصنيفات الأخرى.
  • type [string] - إما "text" أو "flag". ينشئ "text" تعليقًا توضيحيًا بنص عادي، وينشئ "flag" تعليقًا توضيحيًا بالون الكلام.

مثال: يحدّد هذا المقتطف تصنيفًا نصيًا أسود بحجم 12 بكسل، ويكون النص مأخوذًا من العمود 0، ويتم تعيينه لنقطة البيانات في العمود 2 من الصف نفسه: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];.
backgroundColor سلسلة '#FFFFFF' (أبيض) لون خلفية الرسم البياني في تنسيق ألوان Chart API
اللون سلسلة تلقائية تحدد لونًا أساسيًا لاستخدامه في كل السلاسل، وستكون كل سلسلة تدرجًا للون المحدد. ويتم تحديد الألوان في تنسيق ألوان Chart API. يتم تجاهل السياسة إذا تم تحديد colors.
الألوان مصفوفة<string> تلقائية استخدِم هذا الخيار لتحديد ألوان معيّنة لكل سلسلة بيانات. ويتم تحديد الألوان في تنسيق ألوان Chart API. يُستخدم اللون i في عمود البيانات i، والذي يلتف حول البداية إذا كان هناك أعمدة بيانات أكثر من الألوان. إذا كانت صيغ اللون الواحد مقبولة لكل السلاسل، استخدِم الخيار color بدلاً من ذلك.
enableEvents boolean false يؤدي إلى طرح الرسوم البيانية للأحداث التي يشغّلها المستخدم، مثل النقر أو الماوس. لا تتوفّر هذه الميزة إلا لأنواع محددة من الرسوم البيانية. يمكنك الاطّلاع على الأحداث أدناه.
fill boolean false إذا كانت القيمة هي true، يتم ملء المنطقة أسفل كل سطر. يتوفر هذا الخيار للمخططات الخطية فقط.
firstHiddenColumn الرقم لا ينطبق

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

[الرسم البياني الدائري فقط] التصنيف، إن توفّر، الذي يجب عرضه لكل شريحة اختَر من بين القيم التالية:

  • 'none' - لا توجد تصنيفات.
  • "value" - إظهار قيمة الشريحة كتسمية.
  • "name" - إظهار اسم الشريحة (اسم العمود) كتسمية.
أسطورة سلسلة "يمين" مكان عرض وسيلة إيضاح الرسم البياني بالنسبة إلى الرسم البياني حدِّد أحد الخيارات التالية: 'top' أو 'bottom' أو 'left' أو 'right' أو 'none'. ويتم تجاهله في الرسوم البيانية التي لا تتضمّن وسائل إيضاح (مثل الرسوم البيانية في الخريطة).
الحد الأقصى الرقم الحد الأقصى لقيمة البيانات القيمة القصوى المعروضة على المقياس. يتم تجاهله في الرسوم البيانية الدائرية. القيمة التلقائية هي الحد الأقصى لقيمة البيانات، باستثناء الرسوم البيانية الشريطية، حيث تكون القيمة التلقائية الحد الأقصى للبيانات. ويتم تجاهل ذلك في الرسوم البيانية الشريطية عندما يحتوي الجدول على أكثر من عمود بيانات واحد.
دقيقة الرقم قيمة بيانات أدنى تمثّل هذه السمة القيمة الصغرى المعروضة على المقياس. يتم تجاهله في الرسوم البيانية الدائرية. والقيمة التلقائية هي الحد الأدنى لقيمة البيانات، باستثناء الرسوم البيانية الشريطية، حيث تكون القيمة التلقائية صفرًا. ويتم تجاهل هذا في الرسوم البيانية الشريطية عندما يحتوي الجدول على أكثر من عمود بيانات واحد.
showCategoryLabels boolean صحيح تحديد ما إذا كان يجب ظهور التصنيفات على محور الفئة (أي الصف) يتوفر هذا الخيار للمخططات الخطية والشريطية فقط.
showValueLabels boolean صحيح تعرِض القيمة "صحيح" تصنيفًا على محور القيمة. وهي متاحة فقط للمخططات الخطية والشريطية.
singleColumnDisplay الرقم لا ينطبق يعرض عمود البيانات المحدّد فقط. يمثّل هذا الرقم فهرسًا يستند إلى صفر في الجدول، حيث يمثّل الصفر أول عمود بيانات. ويكون اللون المخصّص للعمود الواحد هو نفسه اللون الذي يتم به عرض جميع الأعمدة. ولا يمكن استخدامها مع المخططات الدائرية أو الخرائط.
title سلسلة سلسلة فارغة عنوان المخطط. إذا لم يتم تحديده، فلن يتم عرض أي عنوان. معلمة الرسم البياني المكافئ هي chtt.
valueLabelsInterval الرقم تلقائية الفاصل الزمني الذي يتم خلاله إظهار تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة السمة min هي 0 والقيمة max هي 100 والقيمة valueLabelsInterval هي 20، سيعرض الرسم البياني تصنيفات المحاور على القيم التالية: (0 و20 و40 و60 و80 100).
العرض الرقم 400 عرض الرسم البياني بالبكسل يتم استخدام عرض العنصر الذي يتضمن الصورة إذا لم تكن الصورة ضمن نطاق مقبول أو إذا لم تكن ضمن النطاق المقبول. وإذا كان ذلك أيضًا خارج النطاق المقبول، سيتم استخدام العرض التلقائي.

الطُرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم الخريطة.
getImageUrl() سلسلة عرض عنوان URL لواجهة برمجة تطبيقات Google Chart API المُستخدم لطلب الرسم البياني. يُرجى العِلم أنّ النص يمكن أن يتجاوز 2,000 حرف. راجِع Google Chart API لمعرفة مزيد من التفاصيل.

الأحداث

إذا ضبطت السمة enableEvents على "صحيح"، ستعرض الرسوم البيانية المتوافقة أحداث أحداث المستخدمين المُدرَجة في الجدول أدناه. تعرض كل هذه الأحداث كائن event بالسمات التالية:

  • type - سلسلة تمثّل نوع الحدث
  • region - رقم تعريف للمنطقة المتأثرة أضِف المَعلمة chof=json إلى نوع الرسم البياني الأولي للاطّلاع على قائمة بالأسماء المتاحة. يمكنك الانتقال إلى chof=json للاطّلاع على مزيد من التفاصيل.
الاسم الوصف النوع قيمة
error يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني. رقم التعريف، رسالة
onmouseover يتم الإطلاق عندما يمرر المستخدم مؤشر الماوس فوق عنصر في الرسم البياني. "الماوس"
onmouseout يتم إطلاقه عندما يبتعد المستخدم عن عنصر الرسم البياني. "ماوس"
onclick يتم الإطلاق عندما ينقر أحد المستخدمين على عنصر في الرسم البياني.

"نقر"

ما هي الرسوم البيانية التي تتوافق مع الأحداث؟

أي رسوم بيانية تتيح استخدام مَعلمة chof=json التي تتيح عرض الأحداث (أي كل الرسوم البيانية باستثناء الرسوم البيانية الخاصة، مثل رموز الاستجابة السريعة).

مثال على معالجة الأحداث

في ما يلي مثال يعرض شريطًا يسجِّل نقرات الماوس.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

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

يتم إرسال البيانات إلى خدمة Google Chart API.

الأقلمة

يتيح هذا التمثيل المرئي أي ترجمة متوافقة مع خدمة "مخطط Google".