ভিজ্যুয়ালাইজেশন: জিওচার্ট

ওভারভিউ

একটি জিওচার্ট হল একটি দেশ, একটি মহাদেশ বা অঞ্চলের একটি মানচিত্র যেখানে তিনটি উপায়ের মধ্যে একটিতে চিহ্নিত করা হয়েছে:

  • অঞ্চল মোড সমগ্র অঞ্চলকে রঙ করে, যেমন দেশ, প্রদেশ বা রাজ্য।
  • মার্কার মোড আপনার নির্দিষ্ট করা মান অনুসারে স্কেল করা অঞ্চলগুলিকে মনোনীত করতে চেনাশোনাগুলি ব্যবহার করে৷
  • পাঠ্য মোড শনাক্তকারী সহ অঞ্চলগুলিকে লেবেল করে (যেমন, "রাশিয়া" বা "এশিয়া")।

একটি জিওচার্ট ব্রাউজারের মধ্যে 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 বা তার আগের সংস্করণে সমর্থিত নয়।)

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

আনুপাতিক মার্কার প্রদর্শন করা হচ্ছে

সাধারণত, মার্কার জিওচার্ট ন্যূনতম বিন্দু হিসাবে ক্ষুদ্রতম মার্কার মান প্রদর্শন করে। আপনি যদি এর পরিবর্তে আনুপাতিক মার্কার মান প্রদর্শন করতে চান (বলুন, কারণ সেগুলি শতাংশ), minValue এবং maxValue স্পষ্টভাবে সেট করতে sizeAxis বিকল্পটি ব্যবহার করুন।

উদাহরণস্বরূপ, এখানে তিনটি দেশের জনসংখ্যা এবং এলাকা সহ পশ্চিম ইউরোপের একটি মানচিত্র রয়েছে: ফ্রান্স, জার্মানি এবং পোল্যান্ড। জনসংখ্যা সবই পরম সংখ্যা (উদাহরণস্বরূপ, ফ্রান্সের জন্য 65 মিলিয়ন) কিন্তু এলাকাগুলি সমগ্রের সমস্ত শতাংশ: ফ্রান্স চিহ্নিতকারী রঙিন বেগুনি কারণ এটির জনসংখ্যা মাঝারি, কিন্তু আকার 50 (সম্ভব 100 এর মধ্যে) কারণ এতে রয়েছে সম্মিলিত এলাকার 50%।

এই কোডে, আমরা 0 থেকে 100 এর মধ্যে মার্কার মাপ নির্দিষ্ট করতে sizeAxis ব্যবহার করি। আমরা কমলা থেকে নীল পর্যন্ত রঙের পরিসর হিসাবে জনসংখ্যাকে দেখানোর জন্য RGB মান সহ একটি colorAxis ব্যবহার করি, একটি বর্ণালী যা ব্যবহারকারীদের জন্য ভাল কাজ করবে রঙ দৃষ্টি ঘাটতি। অবশেষে, আমরা পশ্চিম ইউরোপকে 155 এর একটি region সাথে নির্দিষ্ট করি, এই নথিতে পরে "কন্টেন্ট হায়ারার্কি এবং কোড" বিভাগ অনুসারে।

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

টেক্সট GeoCharts

আপনি 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>
 <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" । মনে রাখবেন যে আপনি আমাদের মানচিত্র এপিকি কপি করবেন না; যে কাজ করবে না. যতক্ষণ না আপনার চার্টের জন্য জিওকোডিংয়ের প্রয়োজন হয় না বা অবস্থানগুলি সনাক্ত করতে অমানক কোড ব্যবহার না করে, আপনার ম্যাপএপিকির প্রয়োজন নেই৷ আরো বিস্তারিত জানার জন্য, লোড সেটিংস দেখুন।

  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 আলফা-2 কোড বা এর ইংরেজি পাঠ্য সমতুল্য (উদাহরণস্বরূপ, "জিবি" বা "ইউনাইটেড কিংডম")।
    • একটি বড় হাতের ISO-3166-2 অঞ্চলের কোড নাম বা এর ইংরেজি পাঠ্য সমতুল্য (উদাহরণস্বরূপ, "US-NJ" বা "New Jersey")।
    • একটি মেট্রোপলিটন এরিয়া কোড । এই তিন-সংখ্যার মেট্রো কোডগুলি বিভিন্ন অঞ্চলকে নির্দিষ্ট করতে ব্যবহৃত হয়; US কোড শুধুমাত্র সমর্থিত. মনে রাখবেন যে এগুলি টেলিফোন এরিয়া কোডগুলির মতো নয়
    • region সম্পত্তি দ্বারা সমর্থিত কোনো মান.
  2. অঞ্চলের রঙ [ সংখ্যা, ঐচ্ছিক ] - একটি ঐচ্ছিক সাংখ্যিক কলাম এই অঞ্চলে একটি রঙ নির্ধারণ করতে ব্যবহৃত হয়, colorAxis.colors বৈশিষ্ট্যে নির্দিষ্ট স্কেলের উপর ভিত্তি করে। এই কলামটি উপস্থিত না থাকলে, সমস্ত অঞ্চল একই রঙের হবে৷ কলাম উপস্থিত থাকলে, শূন্য মান অনুমোদিত নয়। মানগুলি sizeAxis.minValue / sizeAxis.maxValue মানের সাথে বা colorAxis.values ​​প্রপার্টিতে নির্দিষ্ট করা মানগুলির সাথে তুলনা করা হয়, যদি প্রদান করা হয়।

মার্কার মোড বিন্যাস

কলামের সংখ্যা ব্যবহৃত মার্কার বিন্যাসের উপর নির্ভর করে, সেইসাথে অন্যান্য ঐচ্ছিক কলামের উপর নির্ভর করে।

  • মার্কার অবস্থান [ প্রয়োজনীয় ]
    প্রথম কলামটি একটি নির্দিষ্ট স্ট্রিং ঠিকানা (উদাহরণস্বরূপ, "1600 পেনসিলভানিয়া এভ")।

    বা

    প্রথম দুটি কলাম সংখ্যাসূচক, যেখানে প্রথম কলামটি অক্ষাংশ এবং দ্বিতীয় কলামটি দ্রাঘিমাংশ।

    দ্রষ্টব্য: যদিও আমরা 'অঞ্চল' মোডের জন্য আইএসও 3166 কোড ব্যবহার করার পরামর্শ দিই, 'মার্কার' মোড অঞ্চলগুলির জন্য দীর্ঘ নামের সাথে সবচেয়ে ভাল কাজ করে (যেমন জার্মানি, পানামা, ইত্যাদি)। এর কারণ হল জিওচার্ট, 'মার্কার' মোডে থাকাকালীন অবস্থানগুলির জিওকোডিংয়ের জন্য (একটি স্ট্রিং অবস্থানকে অক্ষাংশ এবং দ্রাঘিমাংশে রূপান্তর করার জন্য) Google মানচিত্র ব্যবহার করে। এর ফলে অস্পষ্ট অবস্থানগুলি আপনার প্রত্যাশা অনুযায়ী জিওকোডেড না হতে পারে; যেমন 'DE' জার্মানি বা ডেলাওয়্যারের জন্য দাঁড়িয়েছে, বা 'PA' দাঁড়িয়েছে পানামা বা পেনসিলভেনিয়ার জন্য।

  • মার্কার রঙ [ সংখ্যা, ঐচ্ছিক ] পরবর্তী কলাম হল একটি ঐচ্ছিক সাংখ্যিক কলাম যা colorAxis.colors বৈশিষ্ট্যে নির্দিষ্ট স্কেলের উপর ভিত্তি করে এই মার্কারটিতে একটি রঙ নির্ধারণ করতে ব্যবহৃত হয়। এই কলামটি উপস্থিত না থাকলে, সমস্ত মার্কার একই রঙের হবে। কলাম উপস্থিত থাকলে, শূন্য মান অনুমোদিত নয়। মানগুলি একে অপরের সাপেক্ষে বা একেবারে colorAxis.values ​​সম্পত্তিতে নির্দিষ্ট করা মানগুলির সাথে স্কেল করা হয়।
  • মার্কারের আকার [ সংখ্যা, ঐচ্ছিক ] একটি ঐচ্ছিক সাংখ্যিক কলাম যা চিহ্নিতকারীর আকার নির্ধারণ করতে ব্যবহৃত হয়, অন্যান্য মার্কারের আকারের তুলনায়। যদি এই কলামটি উপস্থিত না থাকে, তাহলে পূর্ববর্তী কলামের মান ব্যবহার করা হবে (বা ডিফল্ট আকার, যদি কোন রঙের কলাম প্রদান করা না হয়)। কলাম উপস্থিত থাকলে, শূন্য মান অনুমোদিত নয়।

পাঠ্য মোড বিন্যাস

লেবেলটি প্রথম কলামে এবং একটি ঐচ্ছিক কলামে প্রবেশ করানো হয়েছে:

  • টেক্সট লেবেল [ স্ট্রিং , প্রয়োজনীয় ] একটি নির্দিষ্ট স্ট্রিং ঠিকানা (উদাহরণস্বরূপ, "1600 পেনসিলভানিয়া Ave")।
  • পাঠ্যের আকার [ সংখ্যা, ঐচ্ছিক ] দ্বিতীয় কলামটি একটি ঐচ্ছিক সাংখ্যিক কলাম যা লেবেলের আকার নির্ধারণ করতে ব্যবহৃত হয়। এই কলামটি উপস্থিত না থাকলে, সমস্ত লেবেল একই আকারের হবে৷

কনফিগারেশন বিকল্প

নাম
ব্যাকগ্রাউন্ড কালার

চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। একটি সাধারণ HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' , অথবা নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু।

প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: সাদা
backgroundColor.fill

চার্ট ফিল কালার, একটি HTML কালার স্ট্রিং হিসেবে।

প্রকার: স্ট্রিং
ডিফল্ট: সাদা
backgroundColor.stroke

চার্ট সীমানার রঙ, একটি HTML রঙের স্ট্রিং হিসাবে।

প্রকার: স্ট্রিং
ডিফল্ট: '#666'
backgroundColor.strokeWidth

সীমানার প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 0
রঙের অক্ষ

একটি বস্তু যা রঙের কলামের মান এবং রং বা গ্রেডিয়েন্ট স্কেলের মধ্যে একটি ম্যাপিং নির্দিষ্ট করে। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
প্রকার: বস্তু
ডিফল্ট: নাল
colorAxis.minValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য একটি ন্যূনতম মান নির্দিষ্ট করে। এই মান এবং কম রঙের ডেটা মানগুলি colorAxis.colors পরিসরে প্রথম রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের ন্যূনতম মান
colorAxis.maxValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য সর্বোচ্চ মান নির্দিষ্ট করে। এই মান এবং উচ্চতর রঙের ডেটা মানগুলি colorAxis.colors পরিসরে শেষ রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের সর্বাধিক মান
colorAxis.values

উপস্থিত থাকলে, মানগুলি কীভাবে রঙের সাথে যুক্ত হয় তা নিয়ন্ত্রণ করে। প্রতিটি মান colorAxis.colors অ্যারেতে সংশ্লিষ্ট রঙের সাথে যুক্ত। এই মানগুলি চার্টের রঙের ডেটাতে প্রযোজ্য। এখানে উল্লিখিত মানগুলির একটি গ্রেডিয়েন্ট অনুযায়ী রঙ করা হয়। এই বিকল্পের জন্য একটি মান নির্দিষ্ট না করা [minValue, maxValue] নির্দিষ্ট করার সমতুল্য।

প্রকার: সংখ্যার অ্যারে
ডিফল্ট: নাল
colorAxis.colors

ভিজ্যুয়ালাইজেশনে মান নির্ধারণের জন্য রং। স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colorAxis: {colors:['red','#004411']} । আপনার কমপক্ষে দুটি মান থাকতে হবে; গ্রেডিয়েন্ট আপনার সমস্ত মান অন্তর্ভুক্ত করবে, সাথে গণনা করা মধ্যস্থতামূলক মান, প্রথম রঙটি সবচেয়ে ছোট মান হিসাবে এবং শেষ রঙটি সর্বোচ্চ হিসাবে।

প্রকার: রঙের স্ট্রিং এর অ্যারে
ডিফল্ট: নাল
ডেটাহীন অঞ্চল রঙ

কোনো সংশ্লিষ্ট ডেটা ছাড়া অঞ্চলে বরাদ্দ করার জন্য রঙ।

প্রকার: স্ট্রিং
ডিফল্ট: '#F5F5F5'
ডিফল্ট রঙ

একটি জিওচার্টে ডেটা পয়েন্টের জন্য ব্যবহার করা রঙ যখন অবস্থান (যেমন, 'US' ) উপস্থিত থাকে কিন্তু মানটি হয় null বা অনির্দিষ্ট থাকে৷ এটি datalessRegionColor থেকে আলাদা, যেটি ডেটা অনুপস্থিত থাকলে ব্যবহৃত রঙ।

প্রকার: স্ট্রিং
ডিফল্ট: '#267114'
প্রদর্শন মোড

এই জিওচার্ট কোন ধরনের. DataTable ফরম্যাট অবশ্যই উল্লেখিত মানের সাথে মেলে। নিম্নলিখিত মানগুলি সমর্থিত:

  • 'অটো' - ডেটা টেবিলের বিন্যাসের উপর ভিত্তি করে বেছে নিন।
  • 'অঞ্চল' - জিওচার্টে অঞ্চলগুলিকে রঙ করুন৷
  • 'মার্কার' - অঞ্চলগুলিতে চিহ্নিতকারী রাখুন।
  • 'টেক্সট' - ডেটা টেবিল থেকে পাঠ্য সহ অঞ্চলগুলিকে লেবেল করুন।
প্রকার: স্ট্রিং
ডিফল্ট: 'অটো'
ডোমেইন

জিওচার্টটি এমনভাবে দেখান যেন এটি এই অঞ্চল থেকে পরিবেশন করা হচ্ছে৷ উদাহরণস্বরূপ, 'IN' domain সেট করা কাশ্মীরকে একটি বিতর্কিত অঞ্চল হিসাবে দেখানোর পরিবর্তে ভারতের অন্তর্গত হিসাবে প্রদর্শন করবে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
অঞ্চল ইন্টারঅ্যাক্টিভিটি সক্ষম করুন

সত্য হলে, মাউস হোভারে ফোকাস এবং টুল-টিপ বিস্তারিত সহ অঞ্চল ইন্টারঅ্যাক্টিভিটি সক্ষম করুন, এবং অঞ্চল নির্বাচন এবং regionClick ক্লিকের ফায়ারিং এবং মাউস ক্লিকে ইভেন্ট select

ডিফল্ট অঞ্চল মোডে সত্য এবং মার্কার মোডে মিথ্যা।

প্রকার: বুলিয়ান
ডিফল্ট: স্বয়ংক্রিয়
forceIFrame

একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
জিওচার্ট সংস্করণ

জিওচার্ট বর্ডার ডেটার সংস্করণ। 10 এবং 11 সংস্করণ উপলব্ধ।

প্রকার: সংখ্যা
ডিফল্ট: 10
উচ্চতা

ভিজ্যুয়ালাইজেশনের উচ্চতা, পিক্সেলে। ডিফল্ট উচ্চতা হল 347 পিক্সেল, যদি না width বিকল্পটি নির্দিষ্ট করা থাকে এবং keepAspectRatio সত্যে সেট করা হয় - এই ক্ষেত্রে উচ্চতা সেই অনুযায়ী গণনা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
KeepAspectRatio

সত্য হলে, জিওচার্টটি সবচেয়ে বড় আকারে আঁকা হবে যা চার্ট এলাকার ভিতরে তার প্রাকৃতিক আকৃতির অনুপাতের সাথে ফিট করতে পারে। width এবং height বিকল্পগুলির মধ্যে শুধুমাত্র একটি নির্দিষ্ট করা থাকলে, অন্যটি আকৃতির অনুপাত অনুযায়ী গণনা করা হবে।

মিথ্যা হলে, জিওচার্টটি width এবং height বিকল্প দ্বারা নির্দিষ্ট করা চার্টের সঠিক আকারে প্রসারিত হবে।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
কিংবদন্তি

কিংবদন্তির বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু, অথবা 'কোনটিই নয়', যদি কোনো কিংবদন্তি উপস্থিত না হয়। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

 {textStyle: {color: 'blue', fontSize: 16}}
প্রকার: অবজেক্ট / 'কোনও নয়'
ডিফল্ট: নাল
legend.numberFormat

সাংখ্যিক লেবেলগুলির জন্য একটি বিন্যাস স্ট্রিং৷ এটি আইসিইউ প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {numberFormat:'.##'} 10.666, 10.6, এবং 10 মানের জন্য "10.66", "10.6", এবং "10.0" মান প্রদর্শন করবে।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
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>}
অঞ্চল

জিওচার্টে প্রদর্শিত এলাকা। (আশেপাশের এলাকাগুলিও প্রদর্শিত হবে।) নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'বিশ্ব' - সমগ্র বিশ্বের একটি জিওচার্ট।
  • একটি মহাদেশ বা একটি উপ-মহাদেশ, তার 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 সমর্থন করে না, যেমন Internet Explorer সংস্করণ 8 বা তার আগের৷

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
magnifyingGlass.zoomFactor

ম্যাগনিফাইং গ্লাসের জুম ফ্যাক্টর। 0-এর চেয়ে বড় যেকোনো সংখ্যা হতে পারে।

প্রকার: সংখ্যা
ডিফল্ট: 5.0
মার্কার অস্বচ্ছতা

মার্কারগুলির অস্বচ্ছতা, যেখানে 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 সম্পূর্ণ অস্বচ্ছ।

প্রকার: সংখ্যা, 0.0-1.0
ডিফল্ট: 1.0
অঞ্চলকোডার সংস্করণ

অঞ্চলকোডার ডেটার সংস্করণ। 0 এবং 1 সংস্করণ উপলব্ধ।

প্রকার: সংখ্যা
ডিফল্ট: 0
রেজোলিউশন

জিওচার্ট সীমানার রেজোলিউশন। নিম্নলিখিত মানগুলির মধ্যে একটি চয়ন করুন:

  • 'দেশ' - সমস্ত অঞ্চলের জন্য সমর্থিত, মার্কিন রাজ্য অঞ্চলগুলি ছাড়া৷
  • 'প্রদেশ' - শুধুমাত্র দেশের অঞ্চল এবং মার্কিন রাজ্য অঞ্চলগুলির জন্য সমর্থিত৷ সব দেশের জন্য সমর্থিত নয়; এই বিকল্পটি সমর্থিত কিনা তা দেখতে দয়া করে একটি দেশ পরীক্ষা করুন৷
  • 'মেট্রো' - শুধুমাত্র মার্কিন দেশ অঞ্চল এবং মার্কিন রাজ্য অঞ্চলগুলির জন্য সমর্থিত৷
প্রকার: স্ট্রিং
ডিফল্ট: 'দেশ'
আকার অক্ষ

বুদবুদ আকারের সাথে মানগুলি কীভাবে যুক্ত হয় তা কনফিগার করতে সদস্যদের সাথে একটি বস্তু৷ এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

 {minValue: 0,  maxSize: 20}
প্রকার: বস্তু
ডিফল্ট: নাল
sizeAxis.maxSize

সবচেয়ে বড় সম্ভাব্য বুদবুদের সর্বোচ্চ ব্যাসার্ধ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 12
sizeAxis.maxValue

sizeAxis.maxSize এ ম্যাপ করার জন্য আকারের মান (চার্ট ডেটাতে প্রদর্শিত হয়)। বড় মান এই মান ক্রপ করা হবে.

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে আকারের কলামের সর্বোচ্চ মান
sizeAxis.minSize

ক্ষুদ্রতম সম্ভাব্য বুদ্বুদের সর্বনিম্ন ব্যাসার্ধ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 3
sizeAxis.minValue

sizeAxis.minSize এ ম্যাপ করার জন্য আকারের মান (চার্ট ডেটাতে প্রদর্শিত হয়)। ছোট মান এই মান ক্রপ করা হবে.

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে আকারের কলামের ন্যূনতম মান
টুলটিপ

বিভিন্ন টুলটিপ উপাদান কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{textStyle: {color: '#FF0000'}, showColorCode: true}
প্রকার: বস্তু
ডিফল্ট: নাল
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

ব্যবহারকারীর ইন্টারঅ্যাকশন যার কারণে টুলটিপ প্রদর্শিত হয়:

  • 'ফোকাস' - ব্যবহারকারী যখন উপাদানটির উপর ঘোরায় তখন টুলটিপ প্রদর্শিত হবে।
  • 'none' - টুলটিপ প্রদর্শিত হবে না।
  • 'নির্বাচন' - ব্যবহারকারী উপাদান নির্বাচন করলে টুলটিপ প্রদর্শিত হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ফোকাস'
প্রস্থ

ভিজ্যুয়ালাইজেশনের প্রস্থ, পিক্সেলে। ডিফল্ট প্রস্থ হল 556 পিক্সেল, যদি না height বিকল্পটি নির্দিষ্ট করা হয় এবং keepAspectRatio সত্যে সেট করা হয় - এই ক্ষেত্রে প্রস্থটি সেই অনুযায়ী গণনা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়

মহাদেশীয় শ্রেণিবিন্যাস এবং কোড

নিম্নলিখিত 3-সংখ্যার কোডগুলির একটিতে region বিকল্প সেট করে মহাদেশ/উপ-মহাদেশের জিওচার্ট দেখানো সম্ভব। কোড এবং শ্রেণিবিন্যাস কিছু ব্যতিক্রম সহ, জাতিসংঘের পরিসংখ্যান বিভাগ দ্বারা উন্নত এবং রক্ষণাবেক্ষণের উপর ভিত্তি করে।

মহাদেশ উপমহাদেশ দেশগুলো
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 , VG 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 - মধ্য এশিয়া টিএম , টিজে , কেজি , কেজেড , ইউজেড
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 - মাইক্রোনেশিয়া এফএম , জিইউ , কেআই , এমএইচ , এমপি , এনআর , পিডব্লিউ
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 সহ একটি বস্তু যা আইএসও-3166 বিন্যাসে একটি স্ট্রিং যা ক্লিক করা অঞ্চলের বর্ণনা দেয়।
select

ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন।

বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

অবস্থানগুলি Google মানচিত্র দ্বারা জিওকোড করা হয়৷ জিওকোডিংয়ের প্রয়োজন নেই এমন কোনো ডেটা কোনো সার্ভারে পাঠানো হয় না। তাদের ডেটা নীতি সম্পর্কে আরও তথ্যের জন্য দয়া করে Google মানচিত্র পরিষেবার শর্তাবলী দেখুন৷