खास जानकारी
एक टेबल जिसे क्रम से लगाया जा सकता है और पेज पर जोड़ा जा सकता है. टेबल सेल को फ़ॉर्मैट की स्ट्रिंग का इस्तेमाल करके या एचटीएमएल को सीधे सेल वैल्यू के तौर पर शामिल करके फ़ॉर्मैट किया जा सकता है. संख्या वाली वैल्यू दाईं ओर अलाइन होती हैं; बूलियन वैल्यू, सही के निशान के तौर पर दिखती हैं. उपयोगकर्ता, कीबोर्ड या माउस की मदद से एक लाइन चुन सकते हैं. उपयोगकर्ता, कॉलम हेडर पर क्लिक करके पंक्तियों को क्रम से लगा सकते हैं. उपयोगकर्ता के स्क्रोल करने पर हेडर लाइन फ़िक्स रहती है. टेबल, उपयोगकर्ता के इंटरैक्शन से जुड़े कई इवेंट को सक्रिय करती है.
उदाहरण
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
लोड हो रहा है
google.charts.load
पैकेज का नाम "table"
है.
google.charts.load('current', {packages: ['table']});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.Table
है.
var visualization = new google.visualization.Table(container);
डेटा फ़ॉर्मैट
DataTable को एक संबंधित HTML टेबल में बदला जाता है. साथ ही, DataTable में मौजूद हर लाइन/कॉलम को एचटीएमएल टेबल की पंक्ति/कॉलम में बदला जाता है. हर कॉलम एक ही तरह के डेटा का होना चाहिए. साथ ही, सभी स्टैंडर्ड विज़ुअलाइज़ेशन डेटा टाइप (स्ट्रिंग, बूलियन, नंबर वगैरह) इस्तेमाल किए जा सकते हैं.
कस्टम प्रॉपर्टी
DataTable के
setProperty()
तरीके का इस्तेमाल करके, डेटा टेबल एलिमेंट में नीचे दी गई कस्टम प्रॉपर्टी असाइन की जा सकती हैं.
प्रॉपर्टी का नाम | इस पर लागू होता है | जानकारी |
---|---|---|
कक्षा का नाम | सेल | किसी अलग सेल को असाइन करने के लिए स्ट्रिंग क्लास का नाम. हर सेल को सीएसएस स्टाइल असाइन करने के लिए, इसका इस्तेमाल करें. |
शैलीकृत करें | सेल | सेल को इनलाइन असाइन करने के लिए स्टाइल स्ट्रिंग. यह उस सेल पर लागू सीएसएस क्लास की स्टाइल को बदल देगा. इस तरीके का इस्तेमाल करने के लिए, आपको allowHtml=true प्रॉपर्टी को सेट करना होगा. उदाहरण: 'border: 1px solid green;' . |
उदाहरण
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
allowHtml |
अगर इस नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले सेल की फ़ॉर्मैटिंग की गई वैल्यू को एचटीएमएल के तौर पर रेंडर किया जाएगा. अगर यह नीति 'गलत है' पर सेट है, तो ज़्यादातर कस्टम फ़ॉर्मैटर ठीक से काम नहीं करेंगे. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
वैकल्पिक वैकल्पिक पंक्ति शैली |
इससे तय होता है कि रंग बदलने की अलग-अलग शैली असाइन की जाएगी जो कि विषम और सम पंक्तियों को असाइन की जाएगी. टाइप: बूलियन
डिफ़ॉल्ट: true
|
cssClassName |
एक ऐसा ऑब्जेक्ट जिसमें हर प्रॉपर्टी के नाम, टेबल के एलिमेंट के बारे में बताते हैं और प्रॉपर्टी की वैल्यू एक स्ट्रिंग होती है. इससे, टेबल के उस एलिमेंट को असाइन करने के लिए क्लास तय होती है. अपनी टेबल के खास एलिमेंट के लिए कस्टम सीएसएस असाइन करने के लिए, इस प्रॉपर्टी का इस्तेमाल करें. इस प्रॉपर्टी का इस्तेमाल करने के लिए एक ऑब्जेक्ट असाइन करें, जहां प्रॉपर्टी के नाम से टेबल एलिमेंट की जानकारी मिलती है, और प्रॉपर्टी की वैल्यू एक स्ट्रिंग है. इससे, उस एलिमेंट को क्लास का नाम असाइन किया जाता है. इसके बाद, आपको अपने पेज पर कक्षा के लिए सीएसएस स्टाइल तय करनी होगी. प्रॉपर्टी के इन नामों का इस्तेमाल किया जा सकता है:
उदाहरण:
ध्यान दें: सीएसएस में, कुछ एलिमेंट दूसरे एलिमेंट को बदल देते हैं. उदाहरण के लिए, अगर टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
पहली पंक्ति नंबर |
dataTable में पहली लाइन की लाइन संख्या. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब showRowNumber 'सही' होता है. टाइप: नंबर
डिफ़ॉल्ट: 1
|
फ़्रीज़ किए गए स्तंभ |
बाईं ओर से उन स्तंभों की संख्या जिन्हें फ़्रीज़ किया जाएगा. बाकी के कॉलम हॉरिज़ॉन्टल रूप से स्क्रोल करते समय,
बनी रहेंगी. अगर टाइप: नंबर
डिफ़ॉल्ट: शून्य
|
ऊंचाई |
विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की ऊंचाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, '100 पिक्सल', '80em', '60'. अगर कोई इकाई तय नहीं की जाती है, तो यह माना जाता है कि संख्या पिक्सल है. अगर इसके बारे में नहीं बताया गया है, तो ब्राउज़र अपने-आप टेबल में फ़िट होने के लिए, ऊंचाई को अडजस्ट कर देगा. इससे, प्रोसेस में जितना हो सके उतना छोटा किया जा सकेगा. अगर ज़रूरी ऊंचाई से छोटा सेट किया जाता है, तो टेबल में एक वर्टिकल स्क्रोल बार जुड़ जाएगा. हेडर लाइन भी फ़्रीज़ हो गई है. अगर इसे '100%' पर सेट किया जाता है, तो कंटेनर एलिमेंट में टेबल को ज़्यादा से ज़्यादा बड़ा किया जा सकता है. टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
पेज |
डेटा से पेजिंग को चालू करने का तरीका जानें. इनमें से कोई एक स्ट्रिंग वैल्यू चुनें:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'बंद करें'
|
पेज का साइज़ |
पेज विकल्प के साथ पेजिंग चालू करने पर, हर पेज पर पंक्तियों की संख्या. टाइप: नंबर
डिफ़ॉल्ट: 10
|
पेजिंगबटन |
पेजिंग बटन के लिए एक खास विकल्प सेट करता है. विकल्प इस प्रकार हैं:
टाइप: स्ट्रिंग या संख्या
डिफ़ॉल्ट: 'अपने-आप'
|
rtlTable |
टेबल के कॉलम के क्रम को बदलकर दाईं से बाईं ओर लिखी जाने वाली भाषाओं (जैसे अरेबिक या हिब्रू) के लिए बुनियादी सहायता जोड़ता है, ताकि कॉलम शून्य सबसे दाईं ओर कॉलम हो और आखिरी कॉलम सबसे बाईं ओर वाला कॉलम हो. इससे, मौजूदा डेटा में मौजूद कॉलम के इंडेक्स पर असर नहीं पड़ता. यह सिर्फ़ इंडेक्स पर असर पड़ता है. इस विकल्प के साथ, पूरी तरह से दो दिशाओं वाली (BiDi) भाषा में दिखाने की सुविधा, टेबल विज़ुअलाइज़ेशन के साथ काम नहीं करती. अगर पेजिंग विकल्प (पेज विकल्प का इस्तेमाल करके) चालू किया जाता है या टेबल में स्क्रोल बार हैं, क्योंकि आपने ज़रूरी टेबल आकार से कम ऊंचाई और चौड़ाई वाले विकल्प दिए हैं, तो इस विकल्प को नज़रअंदाज़ कर दिया जाएगा. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
स्क्रोललेफ़्टस्टार्ट पोज़िशन |
अगर टेबल में हॉरिज़ॉन्टल स्क्रोल बार है, तो पिक्सल में, हॉरिज़ॉन्टल स्क्रोलिंग पोज़िशन सेट करता है. इसकी वजह यह है कि आपने चौड़ाई की प्रॉपर्टी सेट कर दी है. टेबल के सबसे बाईं ओर मौजूद कॉलम के हिसाब से, स्क्रोल करने पर कई पिक्सल दिखेंगे. टाइप: नंबर
डिफ़ॉल्ट: 0
|
ShowRowNumber |
अगर इस वैल्यू को 'सही है' पर सेट किया जाता है, तो टेबल के पहले कॉलम में पंक्ति की संख्या दिखती है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
क्रम से लगाएं |
जब उपयोगकर्ता किसी कॉलम के शीर्षक पर क्लिक करता है, तब कॉलम को क्रम से लगाने का तरीका क्या है. अगर क्रम से लगाने की सुविधा चालू है, तो SortAscending और SortColumn प्रॉपर्टी भी सेट करें. इनमें से कोई एक स्ट्रिंग वैल्यू चुनें:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'चालू करें'
|
बढ़ते क्रम में लगाएं |
क्रम में वह क्रम जिसमें शुरुआती कॉलम को क्रम से लगाया गया है. बढ़ते क्रम में सही, घटते क्रम में
गलत. अगर टाइप: बूलियन
डिफ़ॉल्ट: true
|
क्रम से लगाने का कॉलम |
डेटा टेबल में किसी कॉलम का इंडेक्स, जिससे टेबल को शुरुआत में क्रम से लगाया जाता है. कॉलम को एक छोटे से ऐरो की मदद से, क्रम से लगाने का क्रम दिखाया जाएगा. टाइप: नंबर
डिफ़ॉल्ट: -1
|
आरंभ पेज |
दिखाया जाने वाला पहला टेबल पेज. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब टाइप: नंबर
डिफ़ॉल्ट: 0
|
width |
विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की चौड़ाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, '100 पिक्सल', '80em', '60'. अगर कोई इकाई तय नहीं की जाती है, तो यह माना जाता है कि संख्या पिक्सल है. अगर वैल्यू तय नहीं की गई है, तो टेबल में टेबल को फ़िट करने के लिए, ब्राउज़र अपने-आप चौड़ाई में बदलाव कर देगा. अगर टेबल की चौड़ाई को ज़रूरत से कम पर सेट किया जाता है, तो टेबल को हॉरिज़ॉन्टल स्क्रोल बार दिखेगा. अगर इसे '100%' पर सेट किया जाता है, तो टेबल कंटेनर के एलिमेंट के दायरे को ज़्यादा से ज़्यादा बढ़ा देगी. टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
तरीके
तरीका | |
---|---|
draw(data, options) |
टेबल ड्रॉ करता है. सामान लौटाने का टाइप: कोई नहीं
|
getSelection() |
स्टैंडर्ड getSelection लागू करना. चुने गए एलिमेंट, पंक्ति वाले सभी एलिमेंट हैं. चुनी गई एक से ज़्यादा पंक्तियां दिख सकती हैं. चुने गए ऑब्जेक्ट में लाइन, ओरिजनल डेटा टेबल के बारे में बताती है, भले ही उपयोगकर्ता इंटरैक्शन (क्रम से लगाना, पेजिंग वगैरह) किसी भी तरह से हो. ध्यान दें कि चुने गए टॉगल पर: किसी सेल पर पहली बार क्लिक करने से उस पर क्लिक हो जाता है; सेल पर दोबारा क्लिक करने से यह आइटम चुन लिया जाता है. इससे, चुने गए इवेंट की जानकारी मिलती है. हालांकि, चुने गए ऑब्जेक्ट में कोई आइटम नहीं चुना जाता है. लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
|
getSortInfo() |
क्रम से लगाई गई टेबल की मौजूदा क्रम की स्थिति के बारे में जानकारी पाने के लिए इस तरीके को कॉल करें. आम तौर पर, उपयोगकर्ता ऐसा करता है जिसने पंक्तियों को किसी खास कॉलम के मुताबिक क्रम से लगाने के लिए कॉलम के शीर्षक पर क्लिक किया है. अगर आपने क्रम से लगाने का विकल्प बंद कर दिया है, तो यह तरीका काम नहीं करेगा. अगर आपने कोड में डेटा को क्रम से नहीं लगाया है या उपयोगकर्ता ने कोड चुनकर डेटा को क्रम से नहीं लगाया है, तो क्रम से लगाने के लिए डिफ़ॉल्ट वैल्यू दिखेगी. सामान लौटाने का तरीका: इस ऑब्जेक्ट के साथ कोई ऑब्जेक्ट:
|
setSelection(selection) |
स्टैंडर्ड
सामान लौटाने का टाइप: कोई नहीं
|
clearChart() |
चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है. सामान लौटाने का टाइप: कोई नहीं
|
इवेंट
नाम | |
---|---|
चुनें |
स्टैंडर्ड चुनने वाला इवेंट, लेकिन सिर्फ़ पूरी पंक्तियां चुनी जा सकती हैं. प्रॉपर्टी: कोई नहीं
|
पेज |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी पेज के नेविगेशन बटन पर क्लिक करते हैं. प्रॉपर्टी:
page : संख्या. उस पेज का इंडेक्स जिस पर जाना है. |
क्रम से लगाएं |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी कॉलम हेडर पर क्लिक करते हैं और क्रम से लगाने का विकल्प 'बंद' नहीं होता. प्रॉपर्टी: नीचे दी गई प्रॉपर्टी के साथ ऑब्जेक्ट:
|
तैयार |
चार्ट, मेथड कॉल के लिए तैयार है. अगर आपको ड्रॉ करने के बाद चार्ट और कॉल करने के तरीकों से इंटरैक्ट करना है, तो ड्रॉ के तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट के चालू होने के बाद ही उन्हें कॉल करना चाहिए. प्रॉपर्टी: कोई नहीं
|
फ़ॉर्मैट
ध्यान दें: टेबल विज़ुअलाइज़ेशन में ऐसे फ़ॉर्मैटर ऑब्जेक्ट का सेट होता है जिन्हें सामान्य फ़ॉर्मैटर की जगह लागू किया गया है. इनका इस्तेमाल इसी तरीके से किया जाता है. हालांकि, इनका इस्तेमाल किसी भी विज़ुअलाइज़ेशन में किया जा सकता है.
नीचे दी गई टेबल, लेगसी टेबल फ़ॉर्मैटर और उसके बराबर जेनरिक फ़ॉर्मैटर को दिखाती है. आपको नया कोड लिखते समय जेनरिक फ़ॉर्मैटर का इस्तेमाल करना चाहिए.
टेबल फ़ॉर्मैट करने वाला टूल | |
---|---|
टेबल का ऐरो फ़ॉर्मैट | google.visualization.ArrowFormat |
टेबल बार फ़ॉर्मैट | google.visualization.BarFormat |
टेबल के रंग का फ़ॉर्मैट | google.visualization.ColorFormat |
टेबलतारीख फ़ॉर्मैट | google.विज़ुअलाइज़ेशन.तारीख का फ़ॉर्मैट |
टेबल नंबर फ़ॉर्मैट | google.visualization.NumberFormat |
टेबल पैटर्न फ़ॉर्मैट | google.visualization.PatternFormat |
अहम जानकारी: फ़ॉर्मैट करने वाले लोग अक्सर अपने टेक्स्ट को फ़ॉर्मैट करने के लिए एचटीएमएल का इस्तेमाल करते हैं. इसलिए, आपको allowHtml
विकल्प को true
पर सेट करना चाहिए.
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस किया जाता है और रेंडर किया जाता है. किसी भी सर्वर पर डेटा नहीं भेजा जाता.