תצוגה חזותית: תרשים גיאוגרפי

  1. סקירה כללית
  2. תרשימים גיאוגרפיים של אזורים
  3. Marker GeoCharts
  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>

תרשימים גיאוגרפיים של Marker

הסגנון markers מעבד עיגולים במיקומים מסוימים בתרשים הגיאוגרפי, עם הצבע והגודל שציינתם.
כשמעבירים את העכבר מעל הסמנים העמוסים מסביב לרומא, נפתחת זכוכית מגדלת עם פרטים נוספים על הסמנים. (אין תמיכה בזכוכית המגדלת ב-Internet Explorer גרסה 8 ומטה.)

<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>

צביעת התרשים

יש כמה אפשרויות להתאמה אישית של הצבעים של GeoCharts:

  • 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);

פורמט נתונים

הפורמט של ה-DataTable משתנה בהתאם למצב התצוגה שבו משתמשים: regions, markers או text.

הפורמט של מצב האזורים

המיקום מוזן בעמודה אחת, ועוד עמודה אופציונלית אחת כפי שמתואר כאן:

  1. מיקום האזור [מחרוזת, חובה] – אזור להדגשה. כל הפורמטים הבאים מתקבלים. אתם יכולים להשתמש בפורמטים שונים בשורות שונות:
    • שם מדינה כמחרוזת (לדוגמה, "אנגליה"), או קוד ISO-3166-1 alpha-2 באותיות רישיות או טקסט מקביל באנגלית (לדוגמה, "GB" או "United Kingdom").
    • קוד אזור ISO-3166-2 באותיות רישיות או שם הטקסט המקביל באנגלית (לדוגמה, "US-NJ" או "New Jersey").
    • קוד אזור של מטרופוליטן. אלה קודי מטרופולין בני שלוש ספרות שמשמשים לסימון אזורים שונים. קודים של ארה"ב נתמכים בלבד. שימו לב שקידומות כאלה אינן זהות לקידומות של מספרי טלפון.
    • כל ערך שנתמך על ידי המאפיין region.
  2. Region color [מספר, אופציונלי] – עמודה מספרית אופציונלית שמשמשת להקצאת צבע לאזור הזה, על סמך קנה המידה שצוין במאפיין colorAxis.colors. אם העמודה לא מופיעה, כל האזורים יופיעו באותו צבע. אם העמודה קיימת, לא ניתן להשתמש בערכי null. הערכים מדורגים ביחס לערכים sizeAxis.minValue/sizeAxis.maxValue, או לערכים שצוינו במאפיין colorAxis.values, אם צוין.

הפורמט של מצב סמנים

מספר העמודות משתנה בהתאם לפורמט של הסמן ולעמודות האופציונליות האחרות.

  • מיקום הסמן [חובה]
    העמודה הראשונה היא כתובת ספציפית של מחרוזת (לדוגמה, ' 1600 Pennsylvania Ave').

    או

    בשתי העמודות הראשונות יש מספר, בעמודה הראשונה מופיע קו הרוחב ובעמודה השנייה רואים את קו האורך.

    הערה: אנחנו ממליצים להשתמש בקודי ISO 3166 במצב 'אזורים', אבל מצב 'סמנים' פועל בצורה הטובה ביותר עם שמות ארוכים יותר לאזורים (כמו גרמניה, פנמה וכו'). הסיבה לכך היא שכאשר נמצאים במצב 'סמנים', נעשה שימוש במפות Google לקידוד גיאוגרפי של המיקומים (המרת מיקום של מחרוזת לקו רוחב וקו אורך). כתוצאה מכך, מיקומים לא ברורים לא יקודדו באופן גיאוגרפי כפי שהייתי מצפה. למשל, 'DE' עומד בגרמניה או דלאוור, או 'PA' לציון פנמה או פנסילבניה.

  • צבע הסמן [Number, Optional] העמודה הבאה היא עמודה מספרית אופציונלית שמשמשת להקצאת צבע לסמן הזה, על סמך קנה המידה שצוין במאפיין colorAxis.colors. אם העמודה הזו לא מופיעה, כל הסמנים יהיו באותו הצבע. אם העמודה קיימת, לא ניתן להשתמש בערכי null. הערכים מדורגים ביחס זה לזה, או מוחלטים לערכים שצוינו במאפיין colorAxis.values.
  • גודל הסמן [Number, Optional] עמודה מספרית אופציונלית שמשמשת להקצאת גודל הסמן, ביחס לגדלים האחרים של הסמנים. אם העמודה לא מופיעה, המערכת תשתמש בערך מהעמודה הקודמת (או בגודל ברירת המחדל, אם לא סופקה גם עמודה של צבע). אם העמודה קיימת, לא ניתן להשתמש בערכי null.

פורמט למצב טקסט

התווית מוזנת בעמודה הראשונה, ועוד עמודה אופציונלית אחת:

  • Text label (תווית טקסט) [String, חובה] כתובת מחרוזת ספציפית (לדוגמה, " 1600 Pennsylvania Ave").
  • Text size [Number, Optional] העמודה השנייה היא עמודה מספרית אופציונלית שמשמשת להקצאת הגודל של התווית. אם העמודה הזו לא מופיעה, כל התוויות יהיו באותו גודל.

אפשרויות הגדרה

שם
backgroundColor

צבע הרקע של האזור הראשי בתרשים. יכולה להיות מחרוזת צבע פשוטה של HTML, לדוגמה: 'red' או '#00cc00', או אובייקט עם המאפיינים הבאים.

סוג: מחרוזת או אובייקט
ברירת מחדל: לבן
backgroundColor.fill

צבע המילוי של התרשים, כמחרוזת של צבע HTML.

סוג: מחרוזת
ברירת מחדל: לבן
backgroundColor.stroke

הצבע של גבול התרשים, כמחרוזת של צבע HTML.

סוג: מחרוזת
ברירת מחדל: '#666'
backgroundColor.strokeWidth

רוחב הגבול, בפיקסלים.

סוג: מספר
ברירת מחדל: 0
colorAxis

אובייקט שמציין מיפוי בין ערכים של עמודות צבעים לבין צבעים או סולם הדרגתי. כדי לציין מאפיינים של האובייקט אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type: object (סוג אובייקט)
ברירת מחדל: null
colorAxis.minValue

אם השדה הזה קיים, הוא מציין ערך מינימלי לנתוני הצבעים בתרשים. ערכים של נתוני צבעים בערך הזה ומטה יוצגו כצבע הראשון בטווח של colorAxis.colors.

סוג: מספר
ברירת מחדל: ערך מינימלי של עמודת צבע בנתוני התרשים
colorAxis.maxValue

אם השדה הזה קיים, הוא מציין ערך מקסימלי לנתוני הצבע של התרשים. ערכים של נתוני צבעים בערך הזה ומעלה יוצגו כצבע האחרון בטווח של colorAxis.colors.

סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודה של צבע בנתוני התרשים
colorAxis.values

אם השדה הזה קיים, המדיניות קובעת איך הערכים ישויכו לצבעים. כל ערך משויך לצבע התואם במערך colorAxis.colors. הערכים האלה חלים על נתוני הצבעים של התרשים. שצביעה מתבצעת לפי שיפוע של הערכים שצוינו כאן. אם לא מציינים ערך לאפשרות הזו, זה מקביל לציון הערך של [minValue, maxValue].

סוג: מערך של מספרים
ברירת מחדל: null
colorAxis.colors

צבעים להקצאה לערכים בתצוגה החזותית. מערך מחרוזות, כאשר כל רכיב הוא מחרוזת של צבע HTML, לדוגמה: colorAxis: {colors:['red','#004411']}. חייבים להיות לפחות שני ערכים. ההדרגתיות תכלול את כל הערכים ואת ערכי הביניים המחושבים, כשהצבע הראשון יהיה הערך הקטן ביותר והצבע האחרון יהיה הגבוה ביותר.

סוג: מערך של מחרוזות צבעים
ברירת מחדל: null
datalessRegionColor

צבע להקצאה לאזורים ללא נתונים משויכים.

סוג: מחרוזת
ברירת מחדל: '#F5F5F5'
defaultColor

הצבע שבו יש להשתמש בנקודות נתונים בתרשים גיאוגרפי כאשר המיקום (למשל, 'US' ) קיים, אבל הערך הוא null או שלא צוין. ההבדל הזה שונה מ-datalessRegionColor, שהוא הצבע שבו נעשה שימוש כשחסרים נתונים.

סוג: מחרוזת
ברירת מחדל: '#267114'
displayMode

איזה סוג של תרשים גיאוגרפי זה. הפורמט של DataTable חייב להתאים לערך שצוין. הערכים הבאים נתמכים:

  • 'אוטומטי' – בחירה לפי הפורמט של טבלת ה-DataTable.
  • 'regions' – צבע את האזורים בתרשים הגאוגרפי.
  • 'סמנים' - הצבת הסמנים באזורים השונים.
  • 'text' - הוספת תוויות לאזורים באמצעות טקסט מ-DataTable.
סוג: מחרוזת
ברירת מחדל: 'אוטומטי'
דומיין

הצגת התרשים הגיאוגרפי כאילו הוא מוצג מהאזור הזה. לדוגמה, אם הערך בשדה domain הוא 'IN', קשמיר יהיה שייך להודו ולא כאזור שיש לגביו מחלוקת.

סוג: מחרוזת
ברירת מחדל: null
enableRegionInteractivity

אם הערך הוא True, יש להפעיל את האינטראקטיביות של האזור, כולל מיקוד והרחבה של השימוש בחלק מהכלים להעברת עכבר מעל העכבר, ובחירה באזור והפעלה של אירועי regionClick ו-select בלחיצה על העכבר.

ברירת המחדל היא True במצב אזור ו-False במצב סמן.

סוג: בוליאני
ברירת מחדל: אוטומטי
forceIFrame

משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames).

סוג: בוליאני
ברירת מחדל: false
geochartVersion

הגרסה של נתוני הגבולות של GeoChart. הגרסאות 10 ו-11 זמינות.

סוג: מספר
ברירת מחדל:10
גובה

גובה התצוגה החזותית, בפיקסלים. גובה ברירת המחדל הוא 347 פיקסלים, אלא אם ציינת את האפשרות width והפרמטר keepAspectRatio מוגדר כ-true – במקרה כזה, הגובה יחושב בהתאם.

סוג: מספר
ברירת מחדל: אוטומטי
keepAspectRatio

אם הערך הוא True, התרשים הגאוגרפי ייכתב בגודל הגדול ביותר שיכול להתאים לשטח התרשים ביחס הגובה-רוחב הטבעי שלו. אם ציינת רק אחת מהאפשרויות width ו-height, האפשרות השנייה תחושב בהתאם ליחס הגובה-רוחב.

אם הערך הוא False, התרשים הגאוגרפי יימתח לגודל המדויק של התרשים כפי שצוין באפשרויות width ו-height.

סוג: בוליאני
ברירת מחדל: True
מקרא

אובייקט עם חברים כדי להגדיר היבטים שונים של המקרא, או 'none', אם לא מופיע מקרא. כדי לציין מאפיינים של האובייקט אפשר להשתמש בסימון מילולי של אובייקטים, כפי שמוצג כאן: 

 {textStyle: {color: 'blue', fontSize: 16}}
סוג: Object / 'none'
ברירת מחדל: null
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: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
region

האזור שיש להציג בתרשים הגיאוגרפי. (האזורים המקיפים יוצגו גם הם). יכול להיות אחת מהאפשרויות הבאות:

  • 'עולם' – תרשים גיאוגרפי של כל העולם.
  • יבשת או תת-יבשת, שצוינו באמצעות קוד בן 3 ספרות, לדוגמה, '011' עבור מערב אפריקה.
  • מדינה שצוינה בקוד ISO 3166-1 alpha-2, למשל, 'AU' (אוסטרליה).
  • מדינה בארצות הברית, שצוינה באמצעות קוד ISO 3166-2:US שלה, למשל, 'US-AL' עבור אלבמה. חשוב לשים לב שחייבים להגדיר את האפשרות resolution כ'מחוזות' או כ 'מטרוס'.
סוג: מחרוזת
ברירת מחדל: 'world'
magnifyingGlass

אובייקט עם חברים להגדיר היבטים שונים של זכוכית המגדלת. כדי לציין מאפיינים של האובייקט, אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: 

{enable: true, zoomFactor: 7.5}
סוג: אובייקט
ברירת המחדל: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

אם הערך הוא True, כשהמשתמש מתעכב מעל סמן עמוס, תיפתח זכוכית הגדלה.

הערה: התכונה הזו לא נתמכת בדפדפנים שלא תומכים ב-SVG, כלומר ב-Internet Explorer מגרסה 8 ומטה.

סוג: בוליאני
ברירת מחדל: True
magnifyingGlass.zoomFactor

גורם הזום של זכוכית המגדלת. יכול להיות כל מספר שגדול מ-0.

סוג: מספר
ברירת מחדל: 5.0
markerOpacity

מידת האטימות של הסמנים, כאשר 0.0 הוא שקוף לחלוטין ו-1.0 הוא אטום מלא.

סוג: מספר, 0.0–1.0
ברירת מחדל: 1.0
regioncoderVersion

גרסת הנתונים של מקודד האזור. הגרסאות 0 ו-1 זמינות.

סוג: מספר
ברירת מחדל:0
רזולוציה

הרזולוציה של הגבולות הגיאוגרפיים. בוחרים אחד מהערכים הבאים:

  • 'מדינות' – נתמכת בכל האזורים, למעט אזורים בארה"ב.
  • 'מחוזות' – האפשרות נתמכת רק באזורי מדינה ובאזורים של מדינות בארה"ב. לא נתמכת בכל המדינות. צריך לבדוק מדינה כדי לראות אם האפשרות הזו נתמכת.
  • 'Metaros' – נתמך באזור מדינה בארה"ב ובאזורים של מדינות בארה"ב בלבד.
סוג: מחרוזת
ברירת מחדל: 'מדינות'
sizeAxis

אובייקט עם איברים להגדרת האופן שבו ערכים משויכים לגודל בועה. כדי לציין מאפיינים של האובייקט, אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: 

 {minValue: 0,  maxSize: 20}
Type: object (סוג אובייקט)
ברירת מחדל: null
sizeAxis.maxSize

הרדיוס המקסימלי של הבועה הגדולה ביותר, בפיקסלים.

סוג: מספר
ברירת מחדל: 12
sizeAxis.maxValue

ערך המידה (כפי שמופיע בנתוני התרשים) שצריך למפות אל sizeAxis.maxSize. ערכים גדולים יותר ייחתכו לערך הזה.

סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודת הגודל בנתוני התרשים
sizeAxis.minSize

הרדיוס המינימלי של הבועה הקטנה ביותר האפשרית, בפיקסלים.

סוג: מספר
ברירת מחדל: 3
sizeAxis.minValue

ערך המידה (כפי שמופיע בנתוני התרשים) שצריך למפות אל sizeAxis.minSize. ערכים קטנים יותר ייחתכו לערך הזה.

סוג: מספר
ברירת מחדל: הערך המינימלי של עמודת הגודל בנתוני התרשים
הסבר קצר

אובייקט עם חברים להגדיר רכיבים שונים של הסבר קצר. כדי לציין את המאפיינים של האובייקט אפשר להשתמש בסימון מילולי של האובייקטים, כפי שמוצג כאן: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: object (סוג אובייקט)
ברירת מחדל: null
tooltip.textStyle

אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. זהו הפורמט של האובייקט:

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

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

האינטראקציה של המשתמש שגורמת להצגת ההסבר הקצר:

  • 'focus' – ההסבר הקצר יוצג כשהמשתמש מעביר את העכבר מעל הרכיב.
  • 'ללא' – ההסבר הקצר לא יוצג.
  • 'בחירה' – ההסבר הקצר יוצג כשהמשתמש יבחר את הרכיב.
סוג: מחרוזת
ברירת מחדל: 'focus'
רוחב

רוחב התצוגה החזותית, בפיקסלים. רוחב ברירת המחדל הוא 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, MLSHSLSN
017 – מרכז אפריקה AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 – מזרח אפריקה BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, MZRWSCSOTZUG
018 – דרום אפריקה BW, LS, NA, SZ, ZA
150 – אירופה 154 – צפון אירופה GG, JE, AX, DK, EE, FI, FO, GB, IE, IM,, FI, FO, GB, IE, IM}IM, ISLV
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 – דרום אירופה AD3, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT
019 – יבשת אמריקה 021 – אמריקה הצפונית BM, CA, GL, PM, US
029 – האיים הקריביים AG, AI, AN, AW, BB, BL, , CU, DM, DO, GDGPLCMS
013 – מרכז אמריקה BZ, CR, GT, HN, MX, NI, PA, SV
005 – דרום אמריקה AR, BO, BR, CL, CO, EC, FK, GF, GY, PE2}, PYPYPYSRVE
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,019}, TLVN
145 – מערב אסיה AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB
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)

מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע ready מופעל. Extended description.

סוג החזרה: ללא
getImageURI()

מחזירה את התרשים שעבר סריאליזציה ל-URI של תמונה.

קוראים לפונקציה אחרי הצגת התרשים.

ראו הדפסת תרשימי PNG.

סוג החזרה: מחרוזת
getSelection()

מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן אזורים עם ערך מוקצה. עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון. Extended description .

סוג החזרה: מערך של רכיבי בחירה
setSelection()

בחירת ישויות התרשים שצוינו. ביטול הבחירה הקודמת. ישויות שניתן לבחור הן אזורים עם ערך מוקצה. בתרשים הזה ניתן לבחור רק ישות אחת בכל פעם. Extended description .

סוג החזרה: ללא

אירועים

שם
error

מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים.

מאפיינים: מזהה, הודעה
ready

התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את ה-method draw, ולקרוא לו רק אחרי שהאירוע הופעל.

מאפיינים:ללא
regionClick

מתבצעת קריאה כאשר לוחצים על אזור. לא יוצגו התראות לגבי המדינה הספציפית שהוקצתה באפשרות 'אזור' (אם צוינה מדינה ספציפית).

מאפיינים: אובייקט עם מאפיין יחיד, region, שהיא מחרוזת בפורמט ISO-3166 שמתארת את האזור שעליו לוחצים.
select

מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר getSelection().

מאפיינים:ללא

המדיניות בנושא נתונים

מיקומים מקודדים באופן גיאוגרפי על ידי מפות Google. נתונים שלא מחייבים קידוד גיאוגרפי לא נשלחים לשום שרת. ניתן לעיין בתנאים ובהגבלות של מפות Google לקבלת מידע נוסף על המדיניות שלהם בנושא נתונים.