التصور: رسم بياني جغرافي

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

نظرة عامة

المخطط الجغرافي هو خريطة لبلد أو قارة أو منطقة يتم تحديدها بإحدى الطرق الثلاث التالية:

  • يحدّد وضع المنطقة مناطق بأكملها، مثل البلدان أو المقاطعات أو الولايات.
  • يستخدم وضع العلامات الدوائر لتعيين المناطق التي يتم قياسها وفقًا للقيمة التي تحددها.
  • يصنِّف الوضع النصي المناطق التي تتضمّن معرّفات (مثل "روسيا" أو "آسيا").

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

الرسوم البيانية الجغرافية للمنطقة

يملأ النمط regions مناطق كاملة (عادةً البلدان) بألوان تتوافق مع القيم التي تحدّدها.

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

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

المخططات الجغرافية الخاصة بالعلامات

يعرض النمط markers الدوائر في مواقع جغرافية محدّدة على الرسم البياني الجغرافي، باللون والحجم اللذين تحدّدهما.
حاول التمرير فوق العلامات المزدحمة حول مدينة روما، وسيتم فتح عدسة مكبرة لعرض محددات المواقع بمزيد من التفاصيل. (العدسة المكبرة غير متوافقة في الإصدار 8 من Internet Explorer أو الإصدارات السابقة.)

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

عرض علامات متناسبة

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

على سبيل المثال، إليك خريطة لأوروبا الغربية بها عدد سكان ومناطق لثلاثة بلدان: فرنسا وألمانيا وبولندا. مجموعات السكان كلها أرقام مطلقة (على سبيل المثال، 65 مليونًا لفرنسا) لكن جميع المناطق عبارة عن نسب مئوية من الكل: علامة فرنسا لون بنفسجي لأن عدد سكانها متوسط، لكن حجمها 50 (من 100 محتمل) لأنه يحتوي على 50٪ من المساحة المدمجة.

في هذا الرمز، نستخدم sizeAxis لتحديد أحجام العلامات في النطاق من 0 إلى 100. نستخدم أيضًا colorAxis مع قيم النموذج اللوني RGB لإظهار السكان كمجموعة ألوان من البرتقالي إلى الأزرق، وهو طيف سيعمل بشكل جيد مع المستخدمين الذين يعانون من قصور في رؤية الألوان. وأخيرًا، نحدّد أوروبا الغربية بقيمة region من 155، وفقًا لقسم "التسلسل الهرمي للمحتوى والرموز" اللاحق في هذا المستند.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country',   'Population', 'Area Percentage'],
        ['France',  65700000, 50],
        ['Germany', 81890000, 27],
        ['Poland',  38540000, 23]
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '155', // Western Europe
        displayMode: 'markers',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

المخططات الجغرافية النصية

يمكنك تراكب التصنيفات النصية في مخطط جغرافي باستخدام displayMode: text.

البيانات والخيارات
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
رمز HTML الكامل
<html>
 <head>
  <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: Because this chart requires geocoding, you'll need a mapsApiKey.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

   function drawRegionsMap() {
     var data = google.visualization.arrayToDataTable([
       ['Country', 'Popularity'],
       ['South America', 600],
       ['Canada', 500],
       ['France', 600],
       ['Russia', 700],
       ['Australia', 600]
     ]);

     var options = { displayMode: 'text' };

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

     chart.draw(data, options);
   }
  </script>
 </head>
 <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>

تلوين الرسم البياني

هناك العديد من الخيارات لتخصيص ألوان المخططات الجغرافية:

  • colorAxis: مجموعة الألوان المطلوب استخدامها للمناطق في جدول البيانات.
  • backgroundColor: لون خلفية الرسم البياني
  • datalessRegionColor: اللون الذي يجب تخصيصه للمناطق التي لا تتوفّر لها بيانات مرتبطة
  • defaultColor: اللون الذي يجب تخصيصه لمناطق في جدول البيانات تكون قيمتها null أو غير محدّدة

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

في المخطط التالي، سنستخدم جميع الخيارات الأربعة. يُستخدم colorAxis لعرض إفريقيا بألوان علم عموم إفريقيا، باستخدام خطوط العرض للبلدان: من الأحمر في الشمال، إلى الأسود، إلى الأخضر في الجنوب. يُستخدم الخيار backgroundColor لتلوين الخلفية باللون الأزرق الفاتح وdatalessRegionColor لتلوين البلدان غير الأفريقية باللون الوردي الفاتح وdefaultColor لمدغشقر.
الخيارات
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
صفحة ويب كاملة
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "geochart". لاحظ أنه ينبغي عدم نسخ MapsApiKey؛ فلن ينجح ذلك. لن تحتاج إلى MapsApiKey طالما أن المخطط لا يتطلب ترميزًا جغرافيًا ولا يستخدم رموزًا غير قياسية لتحديد المواقع. ولمزيد من التفاصيل، يُرجى الاطّلاع على تحميل الإعدادات. 

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: if your chart requires geocoding or uses nonstandard codes, you'll
    // need to get a mapsApiKey for your project. The one below won't work.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

اسم فئة التمثيل البصري للرسم البياني الجغرافي هو google.visualization.GeoChart. 

  var visualization = new google.visualization.GeoChart(container);

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

يختلف تنسيق جدول البيانات حسب وضع العرض الذي تستخدمه: regions أو markers أو text.

تنسيق وضع المناطق

يتم إدخال الموقع في عمود واحد، بالإضافة إلى عمود واحد اختياري كما هو موضح هنا:

  1. الموقع الجغرافي للمنطقة [سلسلة، مطلوبة]: منطقة يجب تمييزها. يتم قبول جميع التنسيقات التالية. يمكنك استخدام تنسيقات مختلفة في صفوف مختلفة:
    • تمثّل هذه السمة اسم البلد كسلسلة (مثل "England") أو رمز ISO-3166-1 alpha-2 بالأحرف الكبيرة أو ما يعادله من نص باللغة الإنجليزية (مثل "GB" أو "المملكة المتحدة").
    • تمثّل هذه السمة اسم رمز المنطقة بأحرف كبيرة وفقًا لمعيار ISO-3166-2 أو ما يعادلها من النص باللغة الإنجليزية (على سبيل المثال، "US-NJ" أو "New Jersey").
    • رمز المنطقة الحضرية. تتكوّن هذه الرموز من ثلاثة أرقام وتُستخدَم لتحديد مناطق مختلفة، ويمكن استخدام رموز الولايات المتحدة فقط. وتجدر الإشارة إلى أنّ هذه الرموز تختلف عن رموز المنطقة الهاتفية.
    • أيّ قيمة تتيحها السمة region.
  2. لون المنطقة [Number, Optional] - عمود رقمي اختياري يُستخدَم لتحديد لون لهذه المنطقة، استنادًا إلى المقياس المحدد في السمة colorAxis.colors. في حال عدم توفّر هذا العمود، ستكون جميع المناطق باللون نفسه. في حال توفّر العمود، لن يُسمح باستخدام القيم الفارغة. يتم تغيير حجم القيم نسبةً إلى القيم sizeAxis.minValue/sizeAxis.maxValue أو بالقيم المحدّدة في السمة colorAxis.values، إذا تمّ توفيرها.

تنسيق وضع العلامات

يختلف عدد الأعمدة حسب تنسيق العلامة المستخدَم، وكذلك الأعمدة الاختيارية الأخرى.

  • موقع العلامة [مطلوبة]
    العمود الأول هو عنوان سلسلة محدّد (على سبيل المثال، "1600 شارع بنسلفانيا").

    أو

    يعرض أول عمودين قيمًا رقمية، حيث يمثل العمود الأول خط العرض والعمود الثاني باسم خط الطول.

    ملاحظة: على الرغم من أنّنا ننصح باستخدام رموز ISO 3166 في وضع "المناطق"، يناسب وضع "العلامات" بشكل أفضل مع الأسماء الأطول للمناطق (مثل ألمانيا وبنما وما إلى ذلك). ويرجع ذلك إلى أنّ المخططات الجغرافية، عندما تكون في وضع "العلامات"، تستخدم خرائط Google في الترميز الجغرافي للمواقع الجغرافية (تحويل موقع سلسلة إلى خط عرض وخط طول). وقد يؤدي ذلك إلى عدم ترميز المواقع الجغرافية بشكل غامض بالشكل الذي تتوقّعه، مثل كلمة "DE" للإشارة إلى ألمانيا أو ديلاوير، أو كلمة "PA" للإشارة إلى بنما أو بنسلفانيا.

  • لون العلامة [الرقم، اختياري] العمود التالي هو عمود رقمي اختياري يُستخدَم لتحديد لون لهذه العلامة استنادًا إلى المقياس المحدَّد في السمة colorAxis.colors. في حال عدم توفّر هذا العمود، ستكون جميع العلامات باللون نفسه. في حال توفّر العمود، لن يُسمح باستخدام القيم الفارغة. يتم تحجيم القيم نسبةً إلى بعضها البعض، أو وفقًا للقيم المحددة في السمة colorAxis.values.
  • حجم العلامة [الرقم، اختياري] عمود رقمي اختياري يُستخدَم لتحديد حجم العلامة بالنسبة إلى أحجام العلامات الأخرى. وفي حال عدم توفّر هذا العمود، سيتم استخدام القيمة من العمود السابق (أو الحجم التلقائي في حال عدم تقديم عمود للّون أيضًا). في حال توفّر العمود، لن يُسمح باستخدام القيم الفارغة.

تنسيق وضع النص

يتم إدخال التصنيف في العمود الأول، بالإضافة إلى عمود اختياري واحد:

  • تصنيف النص [سلسلة، مطلوبة] عنوان سلسلة محدّد (مثلاً، "1600 شارع بنسلفانيا").
  • حجم النص [Number، Optional] العمود الثاني هو عمود رقمي اختياري يُستخدم لتحديد حجم التصنيف. وفي حال عدم توفّر هذا العمود، ستكون جميع التصنيفات بنفس الحجم.

خيارات الإعداد

الاسم
backgroundColor

لون الخلفية للمنطقة الرئيسية من الرسم البياني. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: 'red' أو '#00cc00'، أو كائنًا بالسمات التالية.

النوع: سلسلة أو كائن
الوضع التلقائي:أبيض
backgroundColor.fill

لون تعبئة الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
الوضع التلقائي:أبيض
backgroundColor.stroke

لون حد الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
تلقائي: '#666'
backgroundColor.strokeWidth

عرض الحدود بالبكسل.

النوع: رقم
القيمة التلقائية: 0
colorAxis

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type: كائن
الإعداد التلقائي: قيمة خالية
colorAxis.minValue

في حال توفّرها، يتم تحديد حد أدنى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيم بيانات الألوان لهذه القيمة والأقل كأول لون في نطاق colorAxis.colors.

النوع: رقم
تلقائي: الحد الأدنى لقيمة عمود اللون في بيانات الرسم البياني
colorAxis.maxValue

في حال توفّرها، يتم تحديد حد أقصى لقيمة بيانات ألوان الرسم البياني. سيتم عرض قيَم بيانات الألوان لهذه القيمة والقيم الأعلى كآخر لون في نطاق colorAxis.colors.

النوع: رقم
تلقائي: الحد الأقصى لقيمة عمود اللون في بيانات الرسم البياني
colorAxis.values

وفي حال توفّرها، تتحكّم هذه السياسة في كيفية ارتباط القيم بالألوان. ترتبط كل قيمة باللون المقابل في مصفوفة colorAxis.colors. تنطبق هذه القيم على بيانات ألوان الرسم البياني. يتم التلوين بناءً على تدرج القيم المحددة هنا. إنّ عدم تحديد قيمة لهذا الخيار يساوي تحديد [minValue, maxValue].

النوع: مصفوفة من الأرقام
الإعداد التلقائي: قيمة خالية
colorAxis.colors

الألوان المراد تعيينها للقيم في التصور. تمثّل هذه السمة مصفوفة من السلاسل يكون فيها كل عنصر عبارة عن سلسلة لون HTML، على سبيل المثال: colorAxis: {colors:['red','#004411']}. يجب أن يكون لديك قيمتان على الأقل. سيشمل التدرج جميع القيم، بالإضافة إلى القيم الوسيطة المحسوبة، مع إدراج اللون الأول كأصغر قيمة واللون الأخير كأعلى قيمة.

النوع: مصفوفة من سلاسل الألوان
الإعداد التلقائي: قيمة خالية
datalessRegionColor

اللون الذي تريد تخصيصه للمناطق التي لا تحتوي على بيانات مرتبطة بها.

النوع: سلسلة
الإعداد التلقائي: "#F5F5F5"
defaultColor

اللون المطلوب استخدامه لنقاط البيانات في مخطط جغرافي عندما يكون الموقع (على سبيل المثال، 'US' ) موجودة ولكن القيمة إما null أو غير محددة. يختلف هذا اللون عن السمة datalessRegionColor، وهو اللون المستخدَم عندما تكون البيانات غير متوفّرة.

النوع: سلسلة
تلقائي: '#267114'
displayMode

هذا هو نوع المخطط الجغرافي. يجب أن يتطابق تنسيق DataTable مع القيمة المحددة. القيم التالية متوافقة:

  • "auto" - اختر هذا الخيار استنادًا إلى تنسيق جدول البيانات.
  • "المناطق" - لون المناطق في المخطط الجغرافي.
  • "العلامات" - ضع العلامات على المناطق.
  • 'نص' - تسمية المناطق التي تحتوي على نص من جدول البيانات.
النوع: سلسلة
تلقائي: "تلقائي"
نطاق

إظهار المخطط الجغرافي كما لو كان يتم عرضه من هذه المنطقة. على سبيل المثال، عند ضبط domain على 'IN'، سيُظهر كشمير على أنّها تابعة للهند وليس كمنطقة متنازع عليها.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
enableRegionInteractivity

في حال اختيار القيمة، فعِّل التفاعل للمنطقة، بما في ذلك التركيز وتقديم تلميحات الأدوات عند تمرير الماوس واختيار المنطقة وتنشيط أحداث regionClick وselect عند النقر بالماوس.

الإعداد التلقائي صحيح في وضع المنطقة، وخطأ في وضع العلامة.

النوع: قيمة منطقية
تلقائي: تلقائي
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
geochartVersion

إصدار بيانات حدود الرسم البياني الجغرافي. يتوفّر الإصداران 10 و11.

النوع: رقم
تلقائي: 10
الطول

ارتفاع العرض المرئي بالبكسل يبلغ الارتفاع التلقائي 347 بكسل، ما لم يتم تحديد الخيار width وضبط keepAspectRatio على "صحيح"، وفي هذه الحالة يتم حساب الارتفاع وفقًا لذلك.

النوع: رقم
الإعداد التلقائي: تلقائي
keepAspectRatio

في حال اختيار القيمة "صحيح"، سيتم رسم الرسم البياني الجغرافي بأكبر حجم يمكن أن يتناسب داخل منطقة الرسم البياني بنسبة العرض إلى الارتفاع الطبيعية له. إذا تم تحديد خيار واحد فقط من الخيارَين width وheight، سيتم احتساب الخيار الآخر وفقًا لنسبة العرض إلى الارتفاع.

إذا كانت القيمة "خطأ"، سيتم تمديد الرسم البياني الجغرافي إلى الحجم الدقيق للرسم البياني كما هو موضّح في الخيارين width وheight.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
أسطورة

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

 {textStyle: {color: 'blue', fontSize: 16}}
النوع: كائن / "بدون"
الإعداد التلقائي: قيمة خالية
legend.numberFormat

سلسلة تنسيق للتسميات الرقمية. هذه مجموعة فرعية من مجموعة أنماط ICU . على سبيل المثال، سيعرض {numberFormat:'.##'} القيم "10.66" و"10.6" و "10.0" للقيم 10.666 و10.6 و10.

النوع: سلسلة
الإعداد التلقائي: تلقائي
legend.textStyle

كائن يحدد نمط نص وسيلة الإيضاح. يحتوي الكائن على التنسيق التالي:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
المنطقة

المنطقة المراد عرضها على المخطط الجغرافي. (ستظهر المناطق المحيطة كذلك). يمكن أن تكون الحالة أيًا مما يلي:

  • "العالم" - مخطط جغرافي للعالم بأكمله.
  • قارة أو شبه قارة يتم تحديدها من خلال الرمز المكوَّن من 3 أرقام، على سبيل المثال "011" لغرب إفريقيا.
  • بلد يتم تحديده باستخدام رمز ISO 3166-1 alpha-2، مثل "AU" لأستراليا.
  • ولاية في الولايات المتحدة، يتم تحديدها باستخدام رمز ISO 3166-2:US الخاص بها، على سبيل المثال: "US-AL" لولاية ألاباما. يُرجى العِلم أنّه يجب ضبط الخيار resolution على "المقاطعات" أو "المناطق المركزية".
النوع: سلسلة
تلقائي: "العالم"
magnifyingGlass

كائن يحتوي على أعضاء لتهيئة الجوانب المختلفة للعدسة المكبرة. لتحديد سمات هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن على النحو الموضّح هنا: 

{enable: true, zoomFactor: 7.5}
النوع: كائن
تلقائي: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

إذا كان true، عندما يختبر المستخدم علامة مزدحمة، فسيتم فتح زجاج ضخم.

ملاحظة: هذه الميزة غير متاحة في المتصفحات التي لا تتوافق مع SVG، مثل الإصدار 8 من Internet Explorer أو الإصدارات الأقدم.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
magnifyingGlass.zoomFactor

عامل التكبير/التصغير للعدسة المكبرة. يمكن أن يكون أي رقم أكبر من 0.

النوع: رقم
الإعداد التلقائي: 5.0
markerOpacity

تعتيم العلامات، عندما تكون 0.0 شفافًا تمامًا و1.0 معتمًا تمامًا.

النوع: رقم، 0.0–1.0
القيمة التلقائية: 1.0
regioncoderVersion

إصدار بيانات برنامج ترميز المنطقة يتوفّر الإصداران 0 و1.

النوع: رقم
تلقائي:0
الدقة

دقة حدود المخطط الجغرافي. اختَر إحدى القيم التالية:

  • "البُلدان": متاحة في جميع المناطق، باستثناء مناطق الولايات الأمريكية.
  • "المقاطعات" - متاح فقط لمناطق البلدان ومناطق الولايات الأمريكية. هذا الخيار غير متاح لبعض البلدان. يُرجى اختبار بلد لمعرفة ما إذا كان هذا الخيار متاحًا.
  • "المناطق المركزية": متاحة في منطقة الولايات المتحدة ومناطق الولايات الأمريكية فقط.
النوع: سلسلة
تلقائي: "البلدان"
sizeAxis

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

 {minValue: 0,  maxSize: 20}
Type: كائن
الإعداد التلقائي: قيمة خالية
sizeAxis.maxSize

الحد الأقصى لنصف القطر لأكبر فقاعة ممكنة، بالبكسل.

النوع: رقم
تلقائي: 12
sizeAxis.maxValue

قيمة الحجم (كما تظهر في بيانات الرسم البياني) المطلوب ربطها بـ sizeAxis.maxSize سيتم اقتصاص القيم الأكبر إلى هذه القيمة.

النوع: رقم
تلقائي: القيمة القصوى لعمود الحجم في بيانات الرسم البياني
sizeAxis.minSize

أقل نصف قطر لأصغر فقاعة ممكنة، بالبكسل.

النوع: رقم
تلقائي: 3
sizeAxis.minValue

قيمة الحجم (كما تظهر في بيانات الرسم البياني) المطلوب ربطها بـ sizeAxis.minSize سيتم اقتصاص القيم الأصغر إلى هذه القيمة.

النوع: رقم
تلقائي: القيمة الصغرى لقيمة عمود الحجم في بيانات الرسم البياني
تلميح

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: كائن
الإعداد التلقائي: قيمة خالية
tooltip.textStyle

كائن يحدد نمط نص التلميح. يحتوي الكائن على التنسيق التالي:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

تفاعل المستخدِم الذي يتسبب في عرض التلميح:

  • "Focus" (التركيز): سيتم عرض التلميح عندما يمرِّر المستخدم مؤشر الماوس فوق العنصر.
  • 'none' - لن يتم عرض التلميح.
  • "الاختيار": سيتم عرض التلميح عندما يختار المستخدم العنصر.
النوع: سلسلة
تلقائي: "التركيز"
العرض

عرض التمثيل البصري بالبكسل يبلغ العرض التلقائي 556 بكسل، ما لم يتم تحديد الخيار height وضبط keepAspectRatio على "صحيح"، وفي هذه الحالة يتم احتساب العرض وفقًا لذلك.

النوع: رقم
الإعداد التلقائي: تلقائي

 

التسلسل الهرمي للقارات والرموز

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

القارة شبه القارة البلدان
002 - أفريقيا 015 - شمال أفريقيا DZ، EG، EH، LY، MA، SD، SS، تينيسي
011 - غرب أفريقيا BF، BJ، CI، CV، GH، GM، GN، GW، LR، ML، SHSLSN
017 - وسط أفريقيا AO، CD، ZR، CF، CG، CM، GA، GQ، ST، TD
014 - شرق أفريقيا BI DJ ER ET KE KM وMG وMU MW MZ RE RWSCSOTZUG
018 - جنوب أفريقيا BW، LS، NA، SZ، ZA
150 - أوروبا 154 - شمال أوروبا GG وJE وAX وDK وEE وFI وFO وGB وIE وIM وIS وS21} و وFOLV
155 - أوروبا الغربية AT، بلجيكا، CH، ألمانيا، DD، فرنسا، FX، LI، LU، MC، NL
151 - أوروبا الشرقية BG، BY، CZ، HU، MD، PL، RO، RU، SU، SK، UA
039 - جنوب أوروبا AD وAL وBA وES وGI وGR وHR وIT وME وMK وMT
019 - الأمريكتان 021 - أمريكا الشمالية BM، CA، GL، PM، US
029 - جزر الكاريبي AG، AI، AN، AW، BB، BL، BS، CU، DM، DO، GD GPLCMS
013 - أمريكا الوسطى BZ، CR، GT، HN، MX، NI، PA، SV
005 - أمريكا الجنوبية AR، BO، BR، CL، CO، EC، FK، GF، GY، PE، PY، PY SRVE
142 - آسيا 143 - آسيا الوسطى TM وTJ وKG وKZ وUZ
030 - شرق آسيا CN وHK وJP وKP وKR وMN وMO وTW
034 - جنوب آسيا AF ، BD، BT، IN، IR، LK، MV، NP، PK
035 - جنوب شرق آسيا BN، ID، KH، LA، MM، BU، MY، PH، SG، TH، TL، TLVN
145 - غرب آسيا AE ، AM، AZ، BH، CY، GE، IL، IQ، KW، LB LBJO
009 - أوقيانوسيا 053 - أستراليا ونيوزيلندا AU ونيفادا ونيوزيلندا
054 - ميلانيزيا FJ وNC وPG وSB وVU
057 - ميكرونيزيا FM وGU وKI وMH وMP وNR وPW
061 - بولينيزيا AS وCK وNU وPF وPN وTK وإلى والتلفزيون وWF وWS

الطُرق

الطريقة
clearChart()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء
draw(data, options)

لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث ready. Extended description.

نوع الإرجاع: لا شيء
getImageURI()

تعرض الرسم البياني المتسلسل كمعرّف الموارد المنتظم (URI) للصورة.

وعليك باستدعاء هذا بعد رسم الرسم البياني.

راجِع طباعة مخططات PNG.

نوع الإرجاع: سلسلة
getSelection()

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

نوع الإرجاع: مصفوفة من عناصر الاختيار
setSelection()

لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق. الكيانات القابلة للاختيار هي مناطق تم تحديد قيمة لها. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة. Extended description .

نوع الإرجاع: لا شيء

الأحداث

الاسم
error

يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: المعرّف والرسالة
ready

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

الخصائص: غير محدّدة
regionClick

يتم الاتصال عند النقر على منطقة. ولن يتم طرحه للبلد المحدّد الذي تم تحديده في خيار "المنطقة" (إذا تم إدراج بلد معيّن).

الخصائص: كائن ذو سمة واحدة، region، وهو عبارة عن سلسلة بتنسيق ISO-3166 تصف المنطقة التي تم النقر عليها.
select

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

الخصائص: غير محدّدة

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

يتم ترميز المواقع الجغرافية بواسطة "خرائط Google" لا يتم إرسال أي بيانات لا تتطلب ترميزًا جغرافيًا إلى أي خادم. يُرجى الاطّلاع على بنود خدمة "خرائط Google" للحصول على مزيد من المعلومات حول سياسة البيانات المتّبعة لديها.