खास जानकारी
ब्राउज़र में SVG या VML का इस्तेमाल करके रेंडर किया जाने वाला पाई चार्ट. स्लाइस पर कर्सर घुमाने पर टूलटिप दिखाता है.
उदाहरण
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
3D पाई चार्ट बनाना
अगर is3D
विकल्प को true
पर सेट किया जाता है, तो आपका पाई चार्ट इस तरह से दिखाया जाएगा, जैसे कि उसमें तीन डाइमेंशन होते हैं:
is3D
, डिफ़ॉल्ट रूप से false
पर सेट है. इसलिए, यहां हमने साफ़ तौर पर इसे true
पर सेट किया है:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
डोनट चार्ट बनाना
डोनट चार्ट एक पाई चार्ट होता है, जिसके बीच में एक छेद होता है. pieHole
विकल्प से डोनट चार्ट बनाए जा सकते हैं:
pieHole
विकल्प को 0 और 1 के बीच की किसी संख्या पर सेट किया जाना चाहिए. ऐसा होल और चार्ट के बीच के दायरे के अनुपात के हिसाब से होना चाहिए. ज़्यादातर चार्ट में 0.4 और 0.6 के बीच की संख्याएं बेहतरीन दिखेंगी.
1 के बराबर या उससे बड़े मानों को अनदेखा कर दिया जाएगा और 0 का मान आपका पाईहोल पूरी तरह बंद कर देगा.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
pieHole
और is3D
विकल्पों को जोड़ा नहीं जा सकता. अगर ऐसा किया जाता है, तो pieHole
को अनदेखा कर दिया जाएगा.
ध्यान दें कि Google चार्ट लेबल को जितना हो सके स्लाइस के सेंटर के जितना हो सके उतना करीब रखने की कोशिश करता है. अगर आपके पास सिर्फ़ एक स्लाइस वाला डोनट चार्ट है, तो हो सकता है कि स्लाइस का बीच वाला हिस्सा डोनट होल में चले. ऐसे में, लेबल का रंग बदलें:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
पाई चार्ट को घुमाना
डिफ़ॉल्ट रूप से, पाई चार्ट पहले स्लाइस के बाएं किनारे से
सीधे ऊपर की ओर इशारा करते हुए शुरू होते हैं. इसे pieStartAngle
विकल्प से बदला जा सकता है.
यहां हम pieStartAngle: 100
विकल्प का इस्तेमाल करके, चार्ट को घड़ी की सुई की दिशा में 100 डिग्री घुमाते हैं. (इसलिए चुना गया है, क्योंकि वह खास कोण "इटैलियन" लेबल को स्लाइस के अंदर फ़िट करने के लिए होता है.)
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
स्लाइस में विस्फोट
slices
विकल्प की offset
प्रॉपर्टी का इस्तेमाल करके, पाई स्लाइस को चार्ट के बाकी हिस्सों से अलग किया जा सकता है:
किसी स्लाइस को अलग करने के लिए, slices
ऑब्जेक्ट बनाएं और 0 और 1 के बीच सही स्लाइस नंबर
offset
असाइन करें. नीचे, हमने स्लाइस 4 (गुजराती), 12 (मराठी), 14 (ओड़िया), और 15 (पंजाबी) के लिए क्रम से बड़े ऑफ़सेट असाइन किए हैं:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
स्लाइस हटाना
स्लाइस को छोड़ने के लिए, रंग को बदलकर 'transparent'
करें:
हमने चार्ट को 135 डिग्री घुमाने के लिए pieStartAngle
, स्लाइस से टेक्स्ट हटाने के लिए pieSliceText
, और टूलटिप बंद करने के लिए tooltip.trigger
का इस्तेमाल किया है:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
स्लाइस के दिखने की थ्रेशोल्ड
पाई स्लाइस को अलग-अलग रेंडर करने के लिए, इसकी वैल्यू को थ्रेशोल्ड के तौर पर सेट किया जा सकता है. यह वैल्यू, चार्ट के किसी हिस्से से मेल खाती है. पूरे चार्ट की वैल्यू 1 होती है. इस थ्रेशोल्ड को पूरे प्रतिशत के तौर पर सेट करने के लिए, प्रतिशत को 100 से भाग दें (20% के थ्रेशोल्ड के लिए, वैल्यू 0.2 होगी).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
इस थ्रेशोल्ड से छोटे स्लाइस को एक "अन्य" स्लाइस में जोड़ दिया जाएगा और उसमें थ्रेशोल्ड के नीचे सभी स्लाइस की मिली-जुली वैल्यू होगी.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
लोड हो रहा है
google.charts.load
पैकेज का नाम "corechart"
है.
google.charts.load("current", {packages: ["corechart"]});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.PieChart
है.
var visualization = new google.visualization.PieChart(container);
डेटा फ़ॉर्मैट
पंक्तियां: टेबल की हर पंक्ति एक स्लाइस को दिखाती है.
कॉलम:
कॉलम 0 | कॉलम 1 | ... | कॉलम N (ज़रूरी नहीं) | |
---|---|---|---|---|
मकसद: | स्लाइस लेबल | स्लाइस की वैल्यू | ... | वैकल्पिक भूमिकाएं |
डेटा टाइप: | स्ट्रिंग | नंबर | ... | |
भूमिका: | डोमेन | डेटा | ... | |
कॉलम की वैकल्पिक भूमिकाएं: | बिलकुल नहीं | बिलकुल नहीं | ... |
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
backgroundColor |
चार्ट के मुख्य हिस्से के लिए बैकग्राउंड का रंग. यह एक सामान्य एचटीएमएल कलर स्ट्रिंग हो सकती है,
जैसे: टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: 'सफ़ेद'
|
backgroundColor.stroke |
एचटीएमएल कलर स्ट्रिंग के तौर पर, चार्ट के बॉर्डर का रंग. Type: स्ट्रिंग
डिफ़ॉल्ट: '#666'
|
backgroundColor.strokeWidth |
बॉर्डर की चौड़ाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: 0
|
backgroundColor.fill |
एचटीएमएल कलर स्ट्रिंग के तौर पर, चार्ट में भरने वाला रंग. Type: स्ट्रिंग
डिफ़ॉल्ट: 'सफ़ेद'
|
chartArea |
चार्ट एरिया के प्लेसमेंट और साइज़ को कॉन्फ़िगर करने के लिए, सदस्यों वाला एक ऑब्जेक्ट (जहां चार्ट
खुद ड्रॉ किया जाता है). इसमें ऐक्सिस और लेजेंड शामिल नहीं हैं. दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं: कोई संख्या या संख्या के बाद %. सामान्य संख्या पिक्सल में वैल्यू होती है. पहले संख्या के बाद % का मतलब प्रतिशत होता है. उदाहरण: Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
chartArea.backgroundColor |
चार्ट क्षेत्र का बैकग्राउंड रंग. जब किसी स्ट्रिंग का इस्तेमाल किया जाता है, तो यह एक हेक्स स्ट्रिंग हो सकती है
(उदाहरण के लिए, '#fdc') या अंग्रेज़ी रंग का नाम. किसी ऑब्जेक्ट का इस्तेमाल करते समय, ये प्रॉपर्टी
दी जा सकती हैं:
टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: 'सफ़ेद'
|
chartArea.left |
बाएं बॉर्डर से चार्ट को कितनी दूर तक खींचना है. टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
chartArea.top |
ऊपरी बॉर्डर से चार्ट को कितनी दूर तक खींचना है. टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
chartArea.width |
चार्ट एरिया की चौड़ाई. टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
chartArea.height |
चार्ट क्षेत्र की ऊंचाई. टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
कलर |
चार्ट के एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन, जिसमें हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग है, जैसे: टाइप: स्ट्रिंग की कलेक्शन
डिफ़ॉल्ट: डिफ़ॉल्ट रंग
|
enableInteractivity |
चार्ट, उपयोगकर्ता-आधारित इवेंट दिखाता है या उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देता है. गलत होने पर, चार्ट 'चुनें' या इंटरैक्शन पर आधारित अन्य इवेंट नहीं दिखाएगा (लेकिन तैयार या गड़बड़ी वाले इवेंट दिखाएगा) और उपयोगकर्ता के इनपुट के आधार पर, होवर टेक्स्ट नहीं दिखाएगा या उसमें बदलाव नहीं करेगा. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
fontSize |
चार्ट में सभी टेक्स्ट का डिफ़ॉल्ट फ़ॉन्ट साइज़, पिक्सल में. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है. टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
|
fontName |
चार्ट में सभी टेक्स्ट के लिए डिफ़ॉल्ट फ़ॉन्ट फ़ेस. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है. Type: स्ट्रिंग
डिफ़ॉल्ट: 'राय'
|
forceIFrame |
चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
ऊंचाई |
चार्ट की ऊंचाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
|
आईएस3डी |
अगर सही है, तो एक तीन-डाइमेंशन वाला चार्ट दिखाता है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
लेजेंड |
लेजेंड के अलग-अलग पहलुओं को कॉन्फ़िगर करने के लिए सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
legend.alignment |
लेजेंड का अलाइनमेंट. इनमें से कोई एक चीज़ हो सकती है:
शुरुआती, बीच में, और आखिरी हिस्सा, लेजेंड की स्टाइल -- वर्टिकल या हॉरिज़ॉन्टल -- के हिसाब से होते हैं. उदाहरण के लिए, 'राइट' लेजेंड में, 'start' और 'end' क्रम से सबसे ऊपर और सबसे नीचे होते हैं. 'टॉप' लेजेंड के लिए, 'start' और 'end' एरिया के बाईं और दाईं ओर होगा. डिफ़ॉल्ट वैल्यू, लेजेंड की पोज़िशन पर निर्भर करती है. 'बॉटम' लेजेंड के लिए, डिफ़ॉल्ट वैल्यू 'center' होती है. अन्य लेजेंड की वैल्यू डिफ़ॉल्ट रूप से 'start' पर सेट होती है. Type: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
legend.position |
लेजेंड की स्थिति. इनमें से कोई एक चीज़ हो सकती है:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'दायां'
|
legend.maxLines |
लेजेंड में लाइनों की ज़्यादा से ज़्यादा संख्या. अपने लेजेंड में लाइनें जोड़ने के लिए, इसे एक से बड़ी संख्या पर सेट करें. ध्यान दें: रेंडर की गई लाइनों की असल संख्या तय करने के लिए, इस्तेमाल किया जाने वाला सटीक लॉजिक अब भी फ़्लो में है. फ़िलहाल, यह विकल्प सिर्फ़ तब काम करता है, जब लेजेंड.पोज़िशन 'सबसे ऊपर' पर सेट हो. टाइप: नंबर
डिफ़ॉल्ट: 1
|
legend.textStyle |
ऐसा ऑब्जेक्ट जो लेजेंड टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieHole |
अगर यह 0 और 1 के बीच है, तो डोनट चार्ट दिखाता है. इस छेद में मौजूद रेडियस, चार्ट की रेडियस के टाइप: नंबर
डिफ़ॉल्ट: 0
|
pieSliceBorderColor |
स्लाइस के बॉर्डर का रंग. यह सिर्फ़ तब लागू होता है, जब चार्ट दो-डाइमेंशन वाला होता है. Type: स्ट्रिंग
डिफ़ॉल्ट: 'सफ़ेद'
|
pieSliceText |
स्लाइस पर दिखाए गए टेक्स्ट का कॉन्टेंट. इनमें से कोई एक चीज़ हो सकती है:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'प्रतिशत'
|
pieSliceTextStyle |
एक ऑब्जेक्ट जो स्लाइस टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है: {color: <string>, fontName: <string>, fontSize: <number>}
Type: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieStartAngle |
वह कोण, डिग्री में, जिसके अनुसार चार्ट को घुमाना है. टाइप: नंबर
डिफ़ॉल्ट:
0 |
reverseCategories |
अगर सही है, तो स्लाइस को घड़ी की उलटी दिशा में खींचता है. डिफ़ॉल्ट रूप से, घड़ी की दिशा में ड्रॉ करना होता है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
pieResidueSliceColor |
कॉम्बिनेशन स्लाइस का रंग, जिसमें सभी स्लाइस slice visibilityों के नीचे हैं. Type: स्ट्रिंग
डिफ़ॉल्ट: '#FCC'
|
pieResidueSliceLabel |
कॉम्बिनेशन स्लाइस के लिए एक लेबल, जिसमें सभी स्लाइस sliceVisibilityThreshold के नीचे हैं. Type: स्ट्रिंग
डिफ़ॉल्ट: 'अन्य'
|
स्लाइस |
ऑब्जेक्ट का कलेक्शन, जिसमें हर एक पाई में उसके हिसाब से बने स्लाइस के फ़ॉर्मैट की जानकारी दी गई है. स्लाइस के लिए डिफ़ॉल्ट वैल्यू का इस्तेमाल करने के लिए, कोई खाली ऑब्जेक्ट डालें (जैसे,
आपके पास ऑब्जेक्ट का कलेक्शन तय करने का विकल्प होता है और हर कलेक्शन, दिए गए क्रम में स्लाइस पर लागू होता है. इसके अलावा, हर चाइल्ड के पास संख्या वाली कुंजी हो, जिससे यह पता चल सके कि वह किस स्लाइस पर लागू होता है. उदाहरण के लिए, नीचे दिए गए दो एलान एक जैसे हैं और पहले स्लाइस को काले और चौथे स्लाइस को लाल रंग के तौर पर बताते हैं: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} टाइप: ऑब्जेक्ट की कैटगरी या नेस्ट किए गए ऑब्जेक्ट वाले ऑब्जेक्ट
डिफ़ॉल्ट: {}
|
sliceVisibilityThreshold |
पाई का वह आंशिक मान, जिसके नीचे स्लाइस को अलग-अलग नहीं दिखाया जाएगा. इस थ्रेशोल्ड को पार नहीं करने वाले सभी स्लाइस, "अन्य" स्लाइस में जोड़ दिए जाएंगे. इनका साइज़, उनके सभी साइज़ का कुल योग होता है. डिफ़ॉल्ट रूप से ऐसी स्लाइस को अलग-अलग नहीं दिखाया जाता जो आधे डिग्री से कम हो. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 टाइप: नंबर
डिफ़ॉल्ट: आधी डिग्री (.5/360 या 1/720 या .0014)
|
title |
चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट. Type: स्ट्रिंग
डिफ़ॉल्ट: कोई टाइटल नहीं
|
titleTextStyle |
यह ऐसा ऑब्जेक्ट है जो टाइटल के टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
टूलटिप |
एक ऑब्जेक्ट, जिसमें सदस्यों के साथ अलग-अलग टूलटिप एलिमेंट को कॉन्फ़िगर करने की सुविधा होती है. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
tooltip.ignoreBounds |
अगर इसे ध्यान दें: यह सिर्फ़ एचटीएमएल टूलटिप पर लागू होता है. अगर इसे SVG टूलटिप की मदद से चालू किया जाता है, तो चार्ट की सीमाओं के बाहर के किसी भी ओवरफ़्लो को काट दिया जाएगा. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
tooltip.isHtml |
अगर इसे 'सही है' पर सेट किया जाता है, तो SVG के रेंडर किए गए टूलटिप के बजाय, एचटीएमएल के रेंडर किए गए टूलटिप का इस्तेमाल करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें. ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
tooltip.showColorCode |
अगर सही है, तो टूलटिप में स्लाइस की जानकारी के बगल में रंगीन स्क्वेयर दिखाएं. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
tooltip.text |
जब कोई उपयोगकर्ता पाई स्लाइस पर कर्सर घुमाता है, तो उसे कौनसी जानकारी दिखानी होती है. ये वैल्यू इस्तेमाल की जा सकती हैं:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'दोनों'
|
tooltip.textStyle |
ऐसा ऑब्जेक्ट जो टूलटिप टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
वह उपयोगकर्ता इंटरैक्शन जिसकी वजह से टूलटिप दिखती है:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'फ़ोकस'
|
चौड़ाई |
चार्ट की चौड़ाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई
|
तरीके
तरीका | |
---|---|
draw(data, options) |
चार्ट बनाता है. सामान लौटाने का तरीका: कोई नहीं
|
getAction(actionID) |
अनुरोध किए गए रिटर्न टाइप: ऑब्जेक्ट
|
getBoundingBox(id) |
चार्ट के एलिमेंट
वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: ऑब्जेक्ट
|
getChartAreaBoundingBox() |
चार्ट के कॉन्टेंट की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाला ऑब्जेक्ट दिखाता है (जैसे, लेबल और लेजेंड को छोड़कर):
वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: ऑब्जेक्ट
|
getChartLayoutInterface() |
वह ऑब्जेक्ट दिखाता है जिसमें चार्ट की ऑनस्क्रीन प्लेसमेंट और उसके एलिमेंट के बारे में जानकारी होती है. लौटाए गए ऑब्जेक्ट पर इन तरीकों को कॉल किया जा सकता है:
चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: ऑब्जेक्ट
|
getHAxisValue(xPosition, optional_axis_index) |
उदाहरण: चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: नंबर
|
getImageURI() |
चार्ट को इमेज यूआरआई के तौर पर क्रम से दिखाता है. चार्ट बनाने के बाद इसे कॉल करें. PNG चार्ट प्रिंट करना देखें. रिटर्न टाइप: स्ट्रिंग
|
getSelection() |
चुनी गई चार्ट इकाइयों का कलेक्शन दिखाता है.
चुनी जा सकने वाली इकाइयां स्लाइस और लेजेंड एंट्री होती हैं.
इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है.
रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
|
getVAxisValue(yPosition, optional_axis_index) |
उदाहरण: चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: नंबर
|
getXLocation(dataValue, optional_axis_index) |
चार्ट के कंटेनर के बाएं किनारे के संबंध में उदाहरण: चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: नंबर
|
getYLocation(dataValue, optional_axis_index) |
चार्ट के कंटेनर के ऊपरी किनारे के हिसाब से उदाहरण: चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: नंबर
|
removeAction(actionID) |
चार्ट से, अनुरोध की गई सामान लौटाने का तरीका:
none |
setAction(action) |
उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर, होने वाली टूलटिप कार्रवाई सेट करता है.
चार्ट के सामान लौटाने का तरीका:
none |
setSelection() |
चार्ट में मौजूद, दी गई इकाइयों को चुनता है. चुने गए पिछले किसी भी आइटम को रद्द कर देगा.
चुनी जा सकने वाली इकाइयां स्लाइस और लेजेंड एंट्री होती हैं.
इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई चुनी जा सकती है.
सामान लौटाने का तरीका: कोई नहीं
|
clearChart() |
चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है. सामान लौटाने का तरीका: कोई नहीं
|
इवेंट
इन इवेंट को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, बेसिक इंटरैक्टिविटी, इवेंट मैनेज करना, और इवेंट ट्रिगर करना देखें.
नाम | |
---|---|
click |
जब कोई उपयोगकर्ता, चार्ट में क्लिक करता है, तब ट्रिगर होता है. इनका इस्तेमाल यह पहचानने के लिए किया जा सकता है कि टाइटल, डेटा एलिमेंट, लेजेंड एंट्री, ऐक्सिस, ग्रिडलाइन या लेबल को कब क्लिक किया जाता है. प्रॉपर्टी: targetID
|
error |
यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है. प्रॉपर्टी: आईडी, मैसेज
|
onmouseover |
यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी विज़ुअल इकाई पर माउस रखता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. स्लाइस या लेजेंड एंट्री, डेटा टेबल में किसी लाइन से जुड़ी होती है (कॉलम इंडेक्स शून्य है). प्रॉपर्टी: पंक्ति, कॉलम
|
onmouseout |
यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई से दूर होता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. स्लाइस या लेजेंड एंट्री, डेटा टेबल में किसी लाइन से जुड़ी होती है (कॉलम इंडेक्स शून्य है). प्रॉपर्टी: पंक्ति, कॉलम
|
ready |
यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करना है, तो प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
select |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. चुनी गई जानकारी के बारे में जानने के लिए, प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.