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

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

نظرة عامة

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

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

يتم عرض رسم بياني جغرافي داخل المتصفح باستخدام 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". لاحظ أنه يجب عدم نسخ خرائطيApiKey؛ لأن هذا لن ينجح. طالما أن المخطط لا يتطلب ترميزًا جغرافيًا أو استخدام شفرات غير قياسية لتحديد المواقع، فإنك لا تحتاج إلى 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. موقع المنطقة [سلسلة، مطلوبة] - منطقة مطلوب تمييزها. يتم قبول جميع التنسيقات التالية. يمكنك استخدام تنسيقات مختلفة في صفوف مختلفة:
    • اسم البلد كسلسلة (على سبيل المثال، "إنجلترا")، أو رمز ISO-3166-1 alpha-2 كبير أو ما يقابله بالنص الإنجليزي (على سبيل المثال، "GB" أو "المملكة المتحدة").
    • تمثّل هذه الخاصية اسم رمز المنطقة ISO-3166-2 أو حرفًا مكافئًا له باللغة الإنجليزية (مثل "US-NJ" أو "نيو جيرسي").
    • رمز المنطقة المركزية. تتكون هذه الرموز من ثلاثة أرقام ويتم استخدامها لتحديد مناطق مختلفة، في حين أن رموز الولايات المتحدة معتمدة فقط. لاحظ أن هذه الرموز ليست مثل رموز مناطق الهاتف.
    • أي قيمة مسموح بها من خلال السمة region.
  2. لون المنطقة [الرقم، اختياري] - عمود رقمي اختياري يُستخدَم لتحديد لون لهذه المنطقة، بناءً على المقياس المحدّد في السمة colorAxis.colors. إذا لم يكن هذا العمود موجودًا، ستكون جميع المناطق باللون نفسه. إذا كان العمود موجودًا، فلن يُسمح باستخدام قيم فارغة. ويتم تغيير حجم القيم بالنسبة إلى قيم sizeAxis.minValue/sizeAxis.maxValue أو إلى القيم المحدّدة في السمة colorAxis.values، في حال توفّرها.

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

يختلف عدد الأعمدة استنادًا إلى تنسيق العلامة المستخدَمة، بالإضافة إلى أعمدة اختيارية أخرى.

  • موقع العلامة [مطلوبة]
    العمود الأول هو عنوان سلسلة محدّد (مثل "1600 Pennsylvania Ave").

    أو

    أول عمودين رقميان، حيث يكون العمود الأول هو خط العرض، والعمود الثاني هو خط الطول.

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

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

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

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

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

خيارات الضبط

الاسم
لون الخلفية

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

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

لون تعبئة المخطط، كسلسلة لون HTML.

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

لون حد المخطط، كسلسلة لون HTML.

النوع: سلسلة
الافتراضي: '#666'
عرض لون الخلفية.الشطب

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

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

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
النوع: الكائن
تلقائي: null
colorAxis.minValue

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

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

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

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

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

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

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

النوع: مصفوفة سلاسل الألوان
تلقائي: null
لون المنطقة بدون بيانات

لون يمكن تحديده للمناطق التي لا توجد بها بيانات مرتبطة.

النوع: سلسلة
الافتراضي: "#F5F5F5"
اللون الافتراضي

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

النوع: سلسلة
الافتراضي: '#267114'
وضع العرض

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

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

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

النوع: سلسلة
تلقائي: null
تفعيل المنطقة

في حال التحديد على "true"، يمكنك تفعيل التفاعل على مستوى المنطقة، بما في ذلك التركيز على البقايا التفصيلية للأدوات وتحريكها عند تمرير الماوس، واختيار المنطقة وتنشيطها لفعاليات regionClick وselect عند النقر بالماوس.

وتكون القيمة التلقائية "صحيح" في وضع المنطقة، و"false" في وضع العلامة.

النوع: منطقي
افتراضي: تلقائي
فرض إطار

لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.)

النوع: منطقي
تلقائي: خطأ
إصدار الناحية الجغرافية

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

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

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

النوع: الرقم
تلقائي: تلقائي
إبقاء نسبة العرض إلى الارتفاع

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

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

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

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

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

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

النوع: سلسلة
تلقائي: تلقائي
وسيلة الإيضاح

كائن يحدد نمط نص التسمية التوضيحية. ويكون الكائن بهذا التنسيق:

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

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

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

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

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

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

{enable: true, zoomFactor: 7.5}
النوع: كائن
تلقائي: {enable: true, zoomFactor: 5.0}
تكبير العدسة

في حال التعيين على "true"، عندما يبقى المستخدم فوق علامة غير منظّمة، سيتم فتح عدسة رائعة.

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

النوع: منطقي
افتراضي: صحيح
تكبير العدسة المكبرة

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

النوع: الرقم
الإصدار التلقائي: 5.0
كثافة العلامة

تعتيم المحددات، حيث 0.0 يتميز بالشفافية التامة و1.0 يصبح معتمًا تمامًا.

النوع: رقم، 0.0–1.0
الإعداد التلقائي: 1.0
إصدار رمز المنطقة

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

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

دقة حدود الرسم البياني الجغرافي. اختر إحدى القيم التالية:

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

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

 {minValue: 0,  maxSize: 20}
النوع: الكائن
تلقائي: null
sizeAxis.maxSize

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

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

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

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
النوع: الكائن
تلقائي: null
tooltip.textStyle

كائن يحدد نمط نص التلميح. ويكون الكائن بهذا التنسيق:

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

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

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

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

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

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

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

 

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

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

القارة شبه القارة البلدان
002 - أفريقيا 015 - شمال إفريقيا DZ، EG، EH، LY، MA، SD، SS، TN
011 - غرب إفريقيا BF، BJ، CI، CV، GH، GM، GN، GW، LR، ML، ،، ،}}، القسم }
017 - أفريقيا الوسطى AO، CD، ZR، CF، CG، CM، GA، GQ، ST، TD
014 - شرق إفريقيا BI، DJ، ER، ET، KE، KM، MG، MU، MW، MZ، 2 {3}، }، }، }، }، }
018 - جنوب أفريقيا BW، LS، NA، SZ، ZA
150 - أوروبا 154 - شمال أوروبا GG، JE، AX، DK، EE، FI، FO، GB، IE، IM، IS، 2}،}،}،،}،}،}}
155 - أوروبا الغربية AT، BE، CH، DE، DD، FR، 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}، }، }، }، 2}}، 2}}
019 - الأمريكتان 021 - أمريكا الشمالية BM، CA، GL، PM، US
029 - جزر الكاريبي .
013 - أمريكا الوسطى BZ، CR، GT، HN، MX، NI، PA، SV
005 - أمريكا الجنوبية AR، BO، BR، CL، CO، EC، FK، GF، GY، PE، PY، ، ، 2}، 2}}
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، TL، TL، }
145 - غرب آسيا AE، AM، AZ، BH، CY، GE، IL، IQ، JO، KW، ، ، }، }، ، }، }، }، }
009 - أوقيانوسيا 053 - أستراليا ونيوزيلندا AU وNF وNZ
054 - ميلانيسيا FJ، NC، PG، SB، VU
057 - ميكرونيزيا FM، GU، KI، MH، MP، NR، PW
061 - بولينيزيا AS، CK، NU، PF، PN، TK، TO، TV، 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" للحصول على مزيد من المعلومات حول سياسة البيانات.