تجسم: GeoChart

  1. نمای کلی
  2. نمودارهای جغرافیایی منطقه
  3. نمودارهای جغرافیایی نشانگر
  4. نمودارهای جغرافیایی متنی
  5. رنگ آمیزی نمودار شما
  6. در حال بارگذاری
  7. فرمت داده
  8. گزینه های پیکربندی
  9. روش ها
  10. رویدادها
  11. خط مشی داده

نمای کلی

ژئوچارت نقشه ای از یک کشور، یک قاره، یا یک منطقه با مناطقی است که به یکی از سه روش مشخص شده است:

  • حالت منطقه کل مناطق مانند کشورها، استان ها یا ایالت ها را رنگ می کند.
  • حالت نشانگرها از دایره‌هایی برای تعیین مناطقی استفاده می‌کند که با توجه به مقداری که شما مشخص کرده‌اید، مقیاس‌بندی می‌شوند.
  • حالت متنی ، مناطق را با شناسه (مثلاً "روسیه" یا "آسیا") برچسب گذاری می کند.

یک نمودار جغرافیایی در مرورگر با استفاده از SVG یا VML ارائه می شود. توجه داشته باشید که geochart قابل پیمایش یا کشیدن نیست و به جای یک نقشه زمین، یک ترسیم خطی است. اگر هر یک از آن ها را می خواهید، به جای آن یک تجسم نقشه را در نظر بگیرید.

نمودارهای جغرافیایی منطقه

سبک 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 دایره‌ها را در مکان‌های مشخص شده در geochart با رنگ و اندازه‌ای که شما مشخص می‌کنید ارائه می‌کند.
سعی کنید روی نشانگرهای درهم ریخته در اطراف رم شناور شوید و یک ذره بین باز می شود تا نشانگرها را با جزئیات بیشتری نشان دهد. (ذره بین در اینترنت اکسپلورر نسخه 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'
  });

نام کلاس تجسم geochart google.visualization.GeoChart است.

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

فرمت داده

قالب DataTable بسته به حالت نمایشی که استفاده می کنید متفاوت است: regions ، markers یا text .

فرمت حالت مناطق

مکان در یک ستون به اضافه یک ستون اختیاری همانطور که در اینجا توضیح داده شده است وارد می شود:

  1. موقعیت منطقه [ رشته، مورد نیاز ] - منطقه ای برای برجسته کردن. تمامی فرمت های زیر پذیرفته می شود. می توانید از فرمت های مختلف در ردیف های مختلف استفاده کنید:
    • نام کشور به عنوان یک رشته (مثلاً "England")، یا کد آلفا-2 ISO-3166-1 بزرگ یا معادل متن انگلیسی آن (مثلاً "GB" یا "United Kingdom").
    • نام کد منطقه ای ISO-3166-2 با حروف بزرگ یا متن انگلیسی معادل آن (به عنوان مثال، "US-NJ" یا "New Jersey").
    • یک کد منطقه شهری اینها کدهای سه رقمی مترو هستند که برای تعیین مناطق مختلف استفاده می شوند. کدهای ایالات متحده فقط پشتیبانی می شوند. توجه داشته باشید که اینها با کدهای منطقه تلفن یکسان نیستند .
    • هر مقداری که توسط ویژگی region پشتیبانی می شود.
  2. رنگ منطقه [ شماره، اختیاری ] - یک ستون عددی اختیاری که برای اختصاص یک رنگ به این منطقه، بر اساس مقیاس مشخص شده در ویژگی colorAxis.colors استفاده می شود. اگر این ستون وجود نداشته باشد، همه مناطق یک رنگ خواهند بود. اگر ستون موجود باشد، مقادیر null مجاز نیستند. مقادیر نسبت به مقادیر sizeAxis.minValue / sizeAxis.maxValue یا مقادیر مشخص شده در ویژگی colorAxis.values ، در صورت ارائه، مقیاس می شوند.

قالب حالت نشانگرها

تعداد ستون ها بسته به قالب نشانگر مورد استفاده و همچنین سایر ستون های اختیاری متفاوت است.

  • مکان نشانگر [ الزامی ]
    ستون اول یک آدرس رشته خاص است (به عنوان مثال، "1600 Pennsylvania Ave").

    یا

    دو ستون اول عددی هستند که ستون اول عرض جغرافیایی و ستون دوم طول جغرافیایی است.

    توجه: اگرچه ما استفاده از کدهای ISO 3166 را برای حالت "منطقه ها" توصیه می کنیم، اما حالت "نشانگرها" با نام های طولانی تر برای مناطق (مانند آلمان، پاناما و غیره) بهترین کار را دارد. این به این دلیل است که geocharts، زمانی که در حالت "نشانگرها" است، از Google Maps برای کدگذاری جغرافیایی مکان ها (تبدیل یک مکان رشته به طول و عرض جغرافیایی) استفاده می کند. این ممکن است منجر به این شود که مکان‌های مبهم آنطور که شما انتظار دارید کدگذاری جغرافیایی نداشته باشند. مانند 'DE' مخفف آلمان یا دلاور، یا 'PA' مخفف پاناما یا پنسیلوانیا.

  • رنگ نشانگر [ Number, Optional ] ستون بعدی یک ستون عددی اختیاری است که برای تخصیص رنگ به این نشانگر بر اساس مقیاس مشخص شده در ویژگی colorAxis.colors استفاده می شود. اگر این ستون وجود نداشته باشد، همه نشانگرها یک رنگ خواهند بود. اگر ستون موجود باشد، مقادیر null مجاز نیستند. مقادیر نسبت به یکدیگر یا کاملاً به مقادیر مشخص شده در ویژگی colorAxis.values ​​مقیاس می شوند.
  • اندازه نشانگر [ شماره، اختیاری ] یک ستون عددی اختیاری که برای تخصیص اندازه نشانگر، نسبت به سایر اندازه‌های نشانگر استفاده می‌شود. اگر این ستون وجود نداشته باشد، از مقدار ستون قبلی استفاده می شود (یا اندازه پیش فرض، اگر ستون رنگی نیز ارائه نشده باشد). اگر ستون موجود باشد، مقادیر null مجاز نیستند.

قالب حالت متنی

برچسب در ستون اول به اضافه یک ستون اختیاری وارد می شود:

  • برچسب متن [ رشته ، مورد نیاز ] یک آدرس رشته خاص (به عنوان مثال، "1600 Pennsylvania Ave").
  • اندازه متن [ شماره، اختیاری ] ستون دوم یک ستون عددی اختیاری است که برای تعیین اندازه برچسب استفاده می شود. اگر این ستون وجود نداشته باشد، همه برچسب ها یک اندازه خواهند بود.

گزینه های پیکربندی

نام
رنگ پس زمینه

رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: 'red' یا '#00cc00' ، یا یک شی با ویژگی های زیر.

نوع: رشته یا شی
پیش فرض: سفید
backgroundColor.fill

رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML.

نوع: رشته
پیش فرض: سفید
backgroundColor.stroke

رنگ حاشیه نمودار، به عنوان یک رشته رنگ HTML.

نوع: رشته
پیش‌فرض: '#666'
backgroundColor.strokeWidth

عرض حاشیه، بر حسب پیکسل.

نوع: شماره
پیش فرض: 0
colorAxis

یک شی که نگاشت بین مقادیر ستون رنگ و رنگ ها یا مقیاس گرادیان را مشخص می کند. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
نوع: شی
پیش فرض: 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'
رنگ پیش فرض

رنگی که برای نقاط داده در یک نمودار جغرافیایی استفاده می‌شود، زمانی که مکان (مثلاً 'US' ) وجود دارد اما مقدار آن null یا نامشخص است. این با datalessRegionColor که رنگی است که در مواقعی که داده از دست رفته استفاده می شود متمایز است.

نوع: رشته
پیش‌فرض: '#267114'
حالت نمایش

این کدام نوع ژئوچارت است. قالب DataTable باید با مقدار مشخص شده مطابقت داشته باشد. مقادیر زیر پشتیبانی می شوند:

  • 'auto' - بر اساس قالب DataTable انتخاب کنید.
  • 'regions' - مناطق را در نمودار جغرافیایی رنگ کنید.
  • نشانگرها - نشانگرها را روی مناطق قرار دهید.
  • 'text' - مناطق را با متن از DataTable برچسب بزنید.
نوع: رشته
پیش فرض: "خودکار"
دامنه

ژئوچارت را طوری نشان دهید که گویی از این منطقه ارائه شده است. برای مثال، با تنظیم domain روی 'IN' ، کشمیر به‌عنوان یک قلمرو مورد مناقشه به هند تعلق دارد.

نوع: رشته
پیش فرض: null
enableRegionInteractivity

اگر درست است، تعامل منطقه‌ای را فعال کنید، از جمله تمرکز و شرح ابزار بر روی شناور ماوس، و انتخاب منطقه و شلیک regionClick و رویدادها را با کلیک ماوس select .

پیش فرض در حالت منطقه درست است و در حالت نشانگر نادرست است.

نوع: بولی
پیش فرض: خودکار
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
geochartVersion

نسخه داده های مرزی GeoChart. نسخه 10 و 11 موجود است.

نوع: شماره
پیش فرض: 10
ارتفاع

ارتفاع تجسم، بر حسب پیکسل. ارتفاع پیش فرض 347 پیکسل است، مگر اینکه گزینه width مشخص شده باشد و keepAspectRatio روی true تنظیم شود - در این صورت ارتفاع بر این اساس محاسبه می شود.

نوع: شماره
پیش فرض: خودکار
حفظ نسبت

اگر درست باشد، ژئوچارت با بزرگ‌ترین اندازه‌ای ترسیم می‌شود که می‌تواند در داخل منطقه نمودار با نسبت ابعاد طبیعی آن قرار بگیرد. اگر فقط یکی از گزینه های width و height مشخص شده باشد، دیگری با توجه به نسبت ابعاد محاسبه می شود.

اگر نادرست باشد، geochart به اندازه دقیق نمودار که توسط گزینه های width و height مشخص شده است کشیده می شود.

نوع: بولی
پیش فرض: درست است
افسانه

یک شی با اعضا برای پیکربندی جنبه‌های مختلف افسانه، یا «هیچ»، در صورتی که هیچ افسانه‌ای ظاهر نشود. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: 

 {textStyle: {color: 'blue', fontSize: 16}}
نوع: شی / "هیچ"
پیش فرض: 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 ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
منطقه

منطقه برای نمایش در geochart. (مناطق اطراف نیز نمایش داده می شوند.) می تواند یکی از موارد زیر باشد:

  • "جهان" - ژئوچارت کل جهان.
  • یک قاره یا یک شبه قاره که با کد 3 رقمی آن مشخص شده است، به عنوان مثال، «011» برای آفریقای غربی.
  • کشوری که با کد ISO 3166-1 آلفا-2 آن مشخص شده است، به عنوان مثال، 'AU' برای استرالیا.
  • ایالتی در ایالات متحده که توسط ISO 3166-2: کد US مشخص شده است، به عنوان مثال، "US-AL" برای آلاباما. توجه داشته باشید که گزینه resolution باید روی "استان" یا "مترو" تنظیم شود.
نوع: رشته
پیش فرض: "جهان"
ذره بین

یک شی با اعضا برای پیکربندی جنبه های مختلف ذره بین. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: 

{enable: true, zoomFactor: 7.5}
نوع: شی
پیش‌فرض: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

اگر درست باشد، وقتی کاربر روی یک نشانگر به هم ریخته درنگ می کند، یک ذره بین باز می شود.

توجه: این ویژگی در مرورگرهایی که از SVG پشتیبانی نمی کنند، یعنی اینترنت اکسپلورر نسخه 8 یا قبل از آن پشتیبانی نمی شود.

نوع: بولی
پیش فرض: درست است
magnifyingGlass.zoomFactor

فاکتور زوم ذره بین. می تواند هر عددی بزرگتر از 0 باشد.

نوع: شماره
پیش فرض: 5.0
شفافیت نشانگر

کدورت نشانگرها که 0.0 کاملاً شفاف و 1.0 کاملاً مات است.

نوع: عدد، 0.0–1.0
پیش فرض: 1.0
regioncoderVersion

نسخه داده منطقه کدگذار. نسخه 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' - راهنمای ابزار نمایش داده نخواهد شد.
  • 'انتخاب' - وقتی کاربر عنصر را انتخاب می کند، راهنمای ابزار نمایش داده می شود.
نوع: رشته
پیش فرض: "تمرکز"
عرض

عرض تجسم، بر حسب پیکسل. عرض پیش فرض 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 , MR , NE , NG , SH , SL , SN , TG
017 - آفریقای میانه AO , CD , ZR , CF , CG , CM , GA , GQ , ST , TD
014 - شرق آفریقا BI , DJ , ER , ET , KE , KM , MG , MU , MW , MZ , RE , RW , SC , SO , TZ , UG , YT , ZM , ZW
018 - جنوب آفریقا BW ، LS ، NA ، SZ ، ZA
150 - اروپا 154 - شمال اروپا GG , JE , AX , DK , EE , FI , FO , GB , IE , IM , IS , LT , LV , NO , SE , SJ
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 , RS , PT , SI , SM , VA , YU
019 - قاره آمریکا 021 - آمریکای شمالی BM , CA , GL , PM , US
029 - کارائیب AG , AI , AN , AW , BB , BL , BS , CU , DM , DO , GD , GP , HT , JM , KN , KY , LC , MF , MQ , MS , PR , TC , TT , VC , VI
013 - آمریکای مرکزی BZ , CR , GT , HN , MX , NI , PA , SV
005 - آمریکای جنوبی AR , BO , BR , CL , CO , EC , FK , GF , GY , PE , PY , SR , UY , VE
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 , TP , VN
145 - غرب آسیا AE , AM , AZ , BH , CY , GE , IL , IQ , JO , KW , LB , OM , PS , QA , SA , NT , SY , TR , YE , YD
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

زمانی که یک منطقه کلیک می شود، تماس گرفته می شود. این برای کشور خاصی که در گزینه "منطقه" اختصاص داده شده است (اگر کشور خاصی در لیست بود) پرتاب نمی شود.

Properties: یک شی با یک ویژگی منفرد، region ، که رشته ای در قالب ISO-3166 است که منطقه کلیک شده را توصیف می کند.
select

هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید.

خواص: هیچ

خط مشی داده

مکان ها توسط نقشه های گوگل کدگذاری جغرافیایی می شوند. هر داده ای که نیاز به کدگذاری جغرافیایی نداشته باشد به هیچ سروری ارسال نمی شود. لطفاً برای اطلاعات بیشتر در مورد خط‌مشی داده‌های آن‌ها ، شرایط خدمات Google Maps را ببینید.