खास जानकारी
जियोचार्ट किसी देश, महाद्वीप या क्षेत्र का मैप होता है, जिसमें तीन में से किसी एक तरीके से इलाके की पहचान की जाती है:
- क्षेत्र मोड देशों, प्रांतों या राज्यों जैसे पूरे क्षेत्रों को रंगता है.
- मार्कर मोड उन इलाकों को तय करने के लिए सर्कल का इस्तेमाल करता है जिन्हें आपकी बताई गई वैल्यू के मुताबिक बढ़ाया जाता है.
- टेक्स्ट मोड, क्षेत्रों को आइडेंटिफ़ायर से लेबल करता है (उदाहरण के लिए, "रूस" या "एशिया").
जियोचार्ट को 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
स्टाइल, जियोचार्ट पर बताई गई जगहों पर सर्कल रेंडर करता है. इनमें, आपके दिए गए रंग और साइज़ होते हैं.
रोम के आस-पास मौजूद अव्यवस्थित मार्कर पर माउस घुमाने की कोशिश करें और मार्कर को ज़्यादा जानकारी के साथ दिखाने के लिए एक मैग्नीफ़ाइंग ग्लास खुल जाएगा. (मेग्नीफ़ाइंग ग्लास, 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>
आनुपातिक मार्कर प्रदर्शित करना
आम तौर पर, मार्कर जियोचार्ट सबसे छोटे मार्कर मान को कम से कम बिंदु के रूप में दिखाते हैं. इसके बजाय, अगर आप अनुपात के हिसाब से मार्कर वैल्यू (जैसे, वे प्रतिशत हैं) दिखाना चाहते हैं, तो minValue
और maxValue
को साफ़ तौर पर सेट करने के लिए sizeAxis
विकल्प का इस्तेमाल करें.
उदाहरण के लिए, यहां पश्चिमी यूरोप का नक्शा दिया गया है, जिसमें तीन देशों के लिए जनसंख्या और क्षेत्र हैं: फ़्रांस, जर्मनी, और पोलैंड. सभी जनसंख्याएं, आंकड़ों की सटीक वैल्यू होती हैं. उदाहरण के लिए, फ़्रांस के लिए)
इस कोड में, हम 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>
टेक्स्ट जियोचार्ट
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"
है.
ध्यान रखें कि आपको हमारा mapsApiKey कॉपी नहीं करना चाहिए; जो काम नहीं करेगा. जब तक आपके चार्ट के लिए भौगोलिक कोडिंग की ज़रूरत नहीं होती, तब तक आपको MapApiKey की ज़रूरत नहीं है. ज़्यादा जानकारी के लिए,
सेटिंग लोड करना देखें.
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
.
'क्षेत्र' मोड का फ़ॉर्मैट
जगह की जानकारी एक कॉलम में डाली जाती है. साथ ही, यहां बताए गए तरीके से एक वैकल्पिक कॉलम भी डाला जाता है:
-
क्षेत्र की जगह [स्ट्रिंग, ज़रूरी है] - हाइलाइट किया जाने वाला क्षेत्र.
नीचे दिए गए सभी फ़ॉर्मैट स्वीकार किए जाते हैं. अलग-अलग लाइन का इस्तेमाल अलग-अलग लाइन में किया जा सकता है:
- स्ट्रिंग के तौर पर देश का नाम (उदाहरण के लिए, "इंग्लैंड"), या अपरकेस ISO-3166-1 ऐल्फ़ा-2 कोड या इसका अंग्रेज़ी टेक्स्ट एक जैसा है (उदाहरण के लिए, "GB" या "यूनाइटेड किंगडम").
- अंग्रेज़ी के बड़े अक्षरों में लिखे गए ISO-3166-2 कोड का नाम, या अंग्रेज़ी भाषा में इसके बराबर नाम (जैसे, "US-NJ" या "न्यू जर्सी").
- महानगरीय क्षेत्र का कोड. इन तीन अंकों वाले महानगर के कोड, जिनका इस्तेमाल अलग-अलग इलाकों के लिए किया जाता है. सिर्फ़ अमेरिका के कोड के लिए इनकी सुविधा है. ध्यान दें कि ये टेलीफ़ोन क्षेत्र कोड से अलग नहीं होते हैं.
region
प्रॉपर्टी के साथ काम करने वाला कोई भी मान.
-
क्षेत्र का रंग [संख्या, ज़रूरी नहीं] -
colorAxis.colors
प्रॉपर्टी में दिए गए स्केल के आधार पर, इस क्षेत्र को रंग देने के लिए इस्तेमाल किया जाने वाला वैकल्पिक न्यूमेरिक कॉलम. अगर यह कॉलम मौजूद नहीं है, तो सभी इलाकों का रंग एक ही होगा. अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है. वैल्यू कोsizeAxis.minValue
/sizeAxis.maxValue
वैल्यू याcolorAxis.values
प्रॉपर्टी में बताई गई वैल्यू के हिसाब से बढ़ाया जाता है.
मार्कर मोड का फ़ॉर्मैट
कॉलम की संख्या, इस्तेमाल किए जाने वाले मार्कर फ़ॉर्मैट के साथ-साथ अन्य वैकल्पिक कॉलम के हिसाब से अलग-अलग हो सकती है.
-
मार्कर की जगह [ज़रूरी है]
या
पहला कॉलम एक खास स्ट्रिंग पता होता है (उदाहरण के लिए, "1600 पेंसिलवेनिया एवेन्यू").पहले दो कॉलम संख्या में होते हैं. इनमें पहला कॉलम अक्षांश और दूसरा कॉलम देशांतर होता है.
ध्यान दें: हम सुझाव देते हैं कि 'क्षेत्र' मोड में इस्तेमाल करने के लिए, ISO 3166 कोड इस्तेमाल करें. इसकी वजह यह है कि जियोचार्ट 'मार्कर' मोड में होने पर, जगहों को जियोकोड करने के लिए Google Maps का इस्तेमाल किया जाता है. इसकी मदद से, किसी स्ट्रिंग की जगह को अक्षांश और देशांतर में बदला जाता है. इस वजह से, हो सकता है कि आपकी जगहों को आपकी उम्मीद के मुताबिक भौगोलिक जगह न मिल पाए. जैसे, जर्मनी या डेलावेयर के लिए 'DE' खड़े होने की जगह या पनामा या पेंसिलवेनिया में 'PA' खड़े होने की स्थिति.
-
मार्कर का रंग [संख्या, ज़रूरी नहीं] अगला कॉलम, संख्या के तौर पर एक वैकल्पिक कॉलम है. इसका इस्तेमाल
colorAxis.colors
प्रॉपर्टी में दिए गए स्केल के आधार पर, इस मार्कर को रंग असाइन करने के लिए किया जाता है. अगर यह कॉलम मौजूद नहीं है, तो सभी मार्कर का रंग एक जैसा होगा. अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है. वैल्यू को एक-दूसरे के हिसाब से या पूरी तरह सेcolorAxis.values
प्रॉपर्टी में तय की गई वैल्यू के हिसाब से स्केल किया जाता है. - मार्कर का साइज़ [नंबर, ज़रूरी नहीं] मार्कर का इस्तेमाल एक वैकल्पिक कॉलम होता है. इसका इस्तेमाल मार्कर के साइज़ को तय करने के लिए किया जाता है. यह मार्कर मार्कर के दूसरे साइज़ से मिलता-जुलता होता है. अगर यह कॉलम मौजूद नहीं है, तो पिछले कॉलम की वैल्यू का इस्तेमाल किया जाएगा (या डिफ़ॉल्ट साइज़, अगर कोई कलर कॉलम नहीं दिया गया है). अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है.
टेक्स्ट मोड फ़ॉर्मैट
लेबल को पहले कॉलम में डाला जाता है. साथ ही, एक वैकल्पिक कॉलम भी डाला जाता है:
- टेक्स्ट लेबल [स्ट्रिंग, ज़रूरी है] कोई खास स्ट्रिंग पता (उदाहरण के लिए, "1600 पेंसिलवेनिया एवेन्यू").
- टेक्स्ट का साइज़ [संख्या, ज़रूरी नहीं] दूसरा कॉलम, संख्या वाला वैकल्पिक कॉलम है. इसे लेबल का साइज़ असाइन करने के लिए इस्तेमाल किया जाता है. अगर यह कॉलम मौजूद नहीं है, तो सभी लेबल का साइज़ एक जैसा होगा.
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
बैकग्राउंड का रंग |
चार्ट के मुख्य हिस्से का बैकग्राउंड कलर. यह एचटीएमएल रंग की
सामान्य स्ट्रिंग हो सकती है. उदाहरण के लिए: टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: सफ़ेद
|
बैकग्राउंड का रंग भरें |
चार्ट, एचटीएमएल कलर स्ट्रिंग के तौर पर रंग भरता है. टाइप: स्ट्रिंग
डिफ़ॉल्ट: सफ़ेद
|
बैकग्राउंड का रंग |
चार्ट के बॉर्डर का रंग, एचटीएमएल कलर स्ट्रिंग के तौर पर. टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#666'
|
पृष्ठभूमिरंग.स्ट्रोकचौड़ाई |
बॉर्डर की चौड़ाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: 0
|
ColorAxis |
वह ऑब्जेक्ट जो कलर कॉलम की वैल्यू और कलर या ग्रेडिएंट स्केल के बीच मैपिंग करता है. इस ऑब्जेक्ट की प्रॉपर्टी तय करने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {minValue: 0, colors: ['#FF0000', '#00FF00']} टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
colorAxis.minValue |
अगर मौजूद हो, तो चार्ट में रंग डेटा के लिए कम से कम वैल्यू तय की जाती है. इस वैल्यू और इससे कम के कलर डेटा की वैल्यू को टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, कलर कॉलम की कम से कम वैल्यू
|
colorAxis.maxValue |
अगर मौजूद हो, तो चार्ट के रंग डेटा के लिए ज़्यादा से ज़्यादा वैल्यू तय करता है. इस वैल्यू और इससे ज़्यादा वैल्यू के कलर डेटा की वैल्यू, टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, कलर कॉलम की ज़्यादा से ज़्यादा वैल्यू
|
colorAxis.values |
मौजूद होने पर यह कंट्रोल किया जाता है कि वैल्यू को रंगों से किस तरह जोड़ा जाए. हर वैल्यू, टाइप: संख्याओं की श्रेणी
डिफ़ॉल्ट: शून्य
|
colorAxis.colors |
विज़ुअलाइज़ेशन में वैल्यू के लिए रंग. स्ट्रिंग की श्रेणी, जहां हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग होता है, उदाहरण के लिए: टाइप: रंग वाली स्ट्रिंग की कैटगरी
डिफ़ॉल्ट: शून्य
|
बिना डेटा वाला क्षेत्र का रंग |
बिना किसी डेटा वाले क्षेत्रों को असाइन करने के लिए रंग. टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#F5F5F5'
|
डिफ़ॉल्ट रंग |
जगह के हिसाब से जियोचार्ट में डेटा पॉइंट दिखाने के लिए, इस्तेमाल किया जाने वाला रंग
(उदाहरण, टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#267114'
|
डिसप्ले मोड |
यह किस तरह का जियोचार्ट है. DataTable फ़ॉर्मैट, दी गई वैल्यू से मेल खाना चाहिए. इस पर इस्तेमाल की जा सकती हैं:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'अपने-आप'
|
डोमेन |
जियोचार्ट ऐसा दिखाएं जैसे उसे इस क्षेत्र से पेश किया गया था. उदाहरण के लिए, टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
|
रीजनल इंटरैक्टिविटी चालू करें |
सही होने पर, माउस होवर पर फ़ोकस और टूल-टिप बढ़ाने और क्षेत्र चुनने और माउस क्लिक करने पर डिफ़ॉल्ट रूप से, यह मोड मोड में सही होता है और मार्कर मोड में गलत होता है. टाइप: बूलियन
डिफ़ॉल्ट: अपने-आप
|
फ़ोर्सआईफ़्रेम |
चार्ट को इनलाइन फ़्रेम के अंदर दिखाता है. (ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है; सभी IE8 चार्ट को i-frame में बनाया गया है.) टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
जियोचार्टवर्शन |
भौगोलिक चार्ट के बॉर्डर डेटा का वर्शन. टाइप: नंबर
डिफ़ॉल्ट:10
|
ऊंचाई |
पिक्सल में, विज़ुअलाइज़ेशन की ऊंचाई. डिफ़ॉल्ट ऊंचाई 347 पिक्सल है. जब तक
टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
|
Keepऐप की आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) रखें |
अगर सही है, तो जियोचार्ट को सबसे बड़े साइज़ पर बनाया जाएगा, जो चार्ट के एरिया में अपने सामान्य आसपेक्ट रेशियो में फ़िट हो सकता है. अगर
अगर गलत हो, तो जियोचार्ट को चार्ट के सटीक साइज़ तक बढ़ाया जाएगा, जैसा कि
टाइप: बूलियन
डिफ़ॉल्ट: true
|
लेजेंड |
लीजेंड के विभिन्न पहलुओं को कॉन्फ़िगर करने के लिए सदस्यों वाला एक ऑब्जेक्ट, या अगर कोई लीजेंड दिखाई नहीं देना चाहिए, तो 'कोई नहीं'. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {textStyle: {color: 'blue', fontSize: 16}} टाइप: ऑब्जेक्ट / 'कोई नहीं'
डिफ़ॉल्ट: शून्य
|
लेजेंड.नंबर फ़ॉर्मैट |
संख्या वाले लेबल के लिए फ़ॉर्मैट स्ट्रिंग. यह
आईसीयू पैटर्न सेट
का सबसेट है.
उदाहरण के लिए, टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
लेजेंड.टेक्स्टस्टाइल |
ऐसा ऑब्जेक्ट जो लेजेंड टेक्स्ट की स्टाइल बताता है. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
इलाका |
जियोचार्ट पर दिखाया जाने वाला इलाका. (आस-पास के क्षेत्र भी दिखाए जाएंगे.) इनमें से कोई एक हो सकती है:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'दुनिया'
|
मैग्नीग्लास |
मैग्नीफ़ाइंग ग्लास के अलग-अलग पहलुओं को कॉन्फ़िगर करने के लिए, सदस्यों वाला एक ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {enable: true, zoomFactor: 7.5} टाइप: ऑब्जेक्ट
डिफ़ॉल्ट:
{enable: true, zoomFactor: 5.0} |
मैग्नीफ़ाइंग ग्लास को चालू करें |
अगर सही है, तो उपयोगकर्ता जब अव्यवस्थित मार्कर पर रुकता है, तो मैग्नीफ़ाइंग ग्लास खुल जाता है. ध्यान दें: यह सुविधा ऐसे ब्राउज़र में काम नहीं करती जो SVG के साथ काम नहीं करते. उदाहरण के लिए, Internet Explorer का वर्शन 8 या इससे पहले का वर्शन. टाइप: बूलियन
डिफ़ॉल्ट: true
|
आवर्द्धनGlass.zoomFactor |
मैग्नीफ़ाइंग ग्लास का ज़ूम फ़ैक्टर. यह 0 से बड़ी कोई भी संख्या हो सकती है. टाइप: नंबर
डिफ़ॉल्ट: 5.0
|
मार्कर की ओपैसिटी |
मार्कर की पारदर्शिता, जहां 0.0 पूरी तरह से पारदर्शी है और 1.0 पूरी तरह से अपारदर्शी है. टाइप: नंबर, 0.0–1.0
डिफ़ॉल्ट: 1.0
|
AreacoderVersion |
Areacoder डेटा का वर्शन. टाइप: नंबर
डिफ़ॉल्ट:0
|
रिज़ॉल्यूशन |
जियोचार्ट बॉर्डर का रिज़ॉल्यूशन. इनमें से कोई एक वैल्यू चुनें:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'देश'
|
साइज़ ऐक्सिस |
सदस्यों के साथ एक ऑब्जेक्ट, जो यह कॉन्फ़िगर करता है कि वैल्यू, बबल साइज़ से कैसे जुड़ी हैं. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {minValue: 0, maxSize: 20} टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
साइज़-ऐक्सिस |
सबसे बड़े संभावित बबल की ज़्यादा से ज़्यादा पिक्सल, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: 12
|
साइज़Axis.maxValue |
टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, साइज़ कॉलम की ज़्यादा से ज़्यादा वैल्यू
|
साइज़ ऐक्सिस का कम से कम साइज़ |
पिक्सल में, सबसे छोटे संभव बबल की कम से कम त्रिज्या. टाइप: नंबर
डिफ़ॉल्ट: 3
|
साइज़Axis.minValue |
टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, साइज़ कॉलम की कम से कम वैल्यू
|
टूलटिप |
कई टूलटिप एलिमेंट को कॉन्फ़िगर करने के लिए, ऑब्जेक्ट वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी तय करने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {textStyle: {color: '#FF0000'}, showColorCode: true} टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
टूलटिप |
टूलटिप टेक्स्ट की स्टाइल के बारे में बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
टूलटिप |
जिस उपयोगकर्ता इंटरैक्शन की वजह से टूलटिप दिखता है:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'फ़ोकस'
|
width |
विज़ुअलाइज़ेशन में चौड़ाई, पिक्सल में. डिफ़ॉल्ट चौड़ाई 556 पिक्सल होती है, बशर्ते
टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
|
महाद्वीप के क्रम और कोड
नीचे दिए गए तीन अंकों के कोड में से किसी एक को region
विकल्प सेट करके, महाद्वीपों/उपमहाद्वीपों के जियोचार्ट दिखाए जा सकते हैं. कोड और हैरारकी, संयुक्त राष्ट्र के आंकड़ों के डिवीज़न
में बनाए गए और मैनेज किए गए कोड पर मौजूद हैं. हालांकि, इनमें अपवाद भी शामिल हैं.
महाद्वीप | उपमहाद्वीप | देश |
---|---|---|
002 - अफ़्रीका |
015 - उत्तरी अफ़्रीका |
DZ, EG, EH, LY, MA, SD, SS, TN |
011 - पश्चिमी अफ़्रीका |
BF, BJ, CI, CV, GH, GM, GN, GW, एलआर, , ML, ली, 2,{2,{/1,{2,{/1,, | |
017 - मध्य अफ़्रीका |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014 - पूर्वी अफ़्रीका |
||
018 - दक्षिणी अफ़्रीका |
BW, LS, NA, SZ, ZA | |
150 - यूरोप |
154 - उत्तरी यूरोप |
GG |
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, {1, {3 लगता है, 2, {, 2, 2, 2, 2, 2, 2, {, {2,{/1,} {2, {/ 2-2, 2-2, 2, { {2, {/ 2, 2-2, 2, { {2, {/-2, {2, { संदेश, {, 2-2-2, 2, 2, 2, 2, { {2, {2, 2-2, 2-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, पीई, पीवाई, } | |
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, वें, T, } | |
145 - पश्चिमी एशिया |
||
009 - ओशिएनिया |
053 - ऑस्ट्रेलिया और न्यूज़ीलैंड |
AU, NF, न्यूज़ीलैंड |
054 - मेलनेशिया |
FJ, NC, PG, SB, VU | |
057 - माइक्रोनेशिया |
FM, GU, KI, MH, MP, NR, PW | |
061 - पॉलिनेशिया |
AS, CK, NU, PF, PN, TK, TO, टीवी, WF, WS |
तरीके
तरीका | |
---|---|
clearChart() |
चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है. सामान लौटाने का टाइप: कोई नहीं
|
draw(data, options) |
चार्ट ड्रॉ करता है. चार्ट में, सामान लौटाने का टाइप: कोई नहीं
|
getImageURI() |
चार्ट को चित्र यूआरआई के रूप में क्रमांकित करता है. इसे चार्ट बनाने के बाद कॉल करें. PNG चार्ट प्रिंट करना देखें. सामान लौटाने का टाइप: स्ट्रिंग
|
getSelection() |
चुनी गई चार्ट इकाइयों की श्रेणी दिखाता है.
चुनी जा सकने वाली इकाइयां, ऐसे क्षेत्र होते हैं जिनमें असाइन की गई वैल्यू होती है.
इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई को चुना जा सकता है.
लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
|
setSelection() |
चार्ट की दी गई इकाइयों को चुनें. पहले चुने गए को रद्द करता है.
चुनी जा सकने वाली इकाइयां, ऐसे क्षेत्र होते हैं जिनमें असाइन की गई वैल्यू होती है.
इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई को चुना जा सकता है.
सामान लौटाने का टाइप: कोई नहीं
|
इवेंट
नाम | |
---|---|
error |
जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. प्रॉपर्टी: आईडी, मैसेज
|
ready |
चार्ट, मेथड कॉल के लिए तैयार है. चार्ट बनाने के बाद, अगर आपको चार्ट और इंटरैक्ट करने के तरीकों से इंटरैक्ट करना है, तो प्रॉपर्टी: कोई नहीं
|
regionClick |
यह तब कॉल किया जाता है, जब किसी क्षेत्र पर क्लिक किया जाता है. 'क्षेत्र' विकल्प में दिए गए खास देश के लिए, इसे नहीं दिया जाएगा (अगर कोई खास देश सूची में मौजूद था).
प्रॉपर्टी:
एक प्रॉपर्टी
region वाला ऑब्जेक्ट, जो ISO-3166 फ़ॉर्मैट में है. उस स्ट्रिंग में, क्लिक किए गए क्षेत्र का ब्यौरा होता है.
|
select |
तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. अगर आपको चुना गया है, तो यह जानने के लिए
प्रॉपर्टी: कोई नहीं
|
डेटा नीति
Google Maps, जगहों की जानकारी को भौगोलिक जगह पर भेजता है. ऐसा कोई भी डेटा किसी भी सर्वर को नहीं भेजा जाता है जिसके लिए जियोकोडिंग की ज़रूरत नहीं होती है. उनकी डेटा नीति के बारे में ज़्यादा जानने के लिए, कृपया Google Maps की सेवा की शर्तें देखें.