खास जानकारी
क्रम से लगाई जा सकने वाली और पेज किए जा सकने वाली टेबल. टेबल सेल को फ़ॉर्मैट स्ट्रिंग का इस्तेमाल करके या सीधे तौर पर एचटीएमएल वैल्यू के तौर पर डालकर, फ़ॉर्मैट किया जा सकता है. संख्या वाली वैल्यू दाईं ओर अलाइन होती हैं. बूलियन वैल्यू को सही के निशान के तौर पर दिखाया जाता है. उपयोगकर्ता, कीबोर्ड या माउस की मदद से एक पंक्ति चुन सकते हैं. उपयोगकर्ता कॉलम हेडर पर क्लिक करके पंक्तियों को क्रम में लगा सकते हैं. जब उपयोगकर्ता स्क्रोल करता है, तब हेडर वाली पंक्ति ठीक नहीं होती. टेबल, उपयोगकर्ता के इंटरैक्शन से जुड़े कई इवेंट ट्रिगर करती है.
उदाहरण
<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 को संबंधित एचटीएमएल टेबल में बदल दिया जाता है, जिसमें DataTable की हर पंक्ति/कॉलम को एचटीएमएल टेबल की हर पंक्ति/कॉलम में बदल दिया जाता है. हर कॉलम में एक ही तरह का डेटा होना चाहिए. साथ ही, सभी स्टैंडर्ड विज़ुअलाइज़ेशन डेटा टाइप काम करने चाहिए, जैसे कि स्ट्रिंग, बूलियन, संख्या वगैरह.
कस्टम प्रॉपर्टी
DataTable
के setProperty()
तरीके का इस्तेमाल करके, डेटा टेबल के एलिमेंट में
इन कस्टम प्रॉपर्टी को असाइन किया जा सकता है.
प्रॉपर्टी का नाम | इस पर लागू होती है | ब्यौरा |
---|---|---|
className | सेल | किसी एक सेल को असाइन करने के लिए स्ट्रिंग क्लास का नाम. अलग-अलग सेल को सीएसएस स्टाइल असाइन करने के लिए, इसका इस्तेमाल करें. |
स्टाइल | सेल | सेल में इनलाइन असाइन करने के लिए स्टाइल स्ट्रिंग. ऐसा करने से, उस सेल पर लागू सीएसएस क्लास स्टाइल बदल जाएंगी. यह सुविधा ठीक से काम करे, इसके लिए आपकोallowhtml=true
प्रॉपर्टी को सेट करना होगा. उदाहरण: 'border: 1px solid green;' . |
उदाहरण
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
allowHtml |
अगर इसे 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाली सेल की फ़ॉर्मैट की गई वैल्यू को एचटीएमएल के तौर पर रेंडर किया जाएगा. अगर नीति को 'गलत है' पर सेट किया जाता है, तो ज़्यादातर कस्टम फ़ॉर्मैटर ठीक से काम नहीं करेंगे. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
alternatingRowStyle |
यह तय करता है कि पंक्ति या कॉलम के लिए अलग-अलग रंग की स्टाइल, विषम और सम पंक्तियों के लिए असाइन की जाएगी या नहीं. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
cssClassNames |
एक ऐसा ऑब्जेक्ट जिसमें हर प्रॉपर्टी का नाम, किसी टेबल एलिमेंट के बारे में बताता है. प्रॉपर्टी की वैल्यू एक स्ट्रिंग होती है. इससे उस टेबल एलिमेंट को असाइन की जाने वाली क्लास तय होती है. अपनी टेबल के खास एलिमेंट को कस्टम सीएसएस असाइन करने के लिए, इस प्रॉपर्टी का इस्तेमाल करें. इस प्रॉपर्टी का इस्तेमाल करने के लिए, कोई ऑब्जेक्ट असाइन करें. इसमें प्रॉपर्टी के नाम से टेबल एलिमेंट के बारे में पता चलता है और प्रॉपर्टी की वैल्यू एक स्ट्रिंग होती है. इसमें, उस एलिमेंट को असाइन की जाने वाली क्लास का नाम होता है. इसके बाद, आपको उस क्लास के लिए अपने पेज पर एक सीएसएस स्टाइल तय करना होगा. प्रॉपर्टी के ये नाम इस्तेमाल किए जा सकते हैं:
उदाहरण:
ध्यान दें: सीएसएस में, कुछ एलिमेंट दूसरे एलिमेंट को बदल देते हैं. उदाहरण के लिए, अगर Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
firstRowNumber |
dataटेबल में पहली लाइन की लाइन की संख्या. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब showRowNumber सही हो. टाइप: नंबर
डिफ़ॉल्ट: 1
|
frozenColumns |
बाईं ओर से फ़्रीज़ किए जाने वाले कॉलम की संख्या. बचे हुए कॉलम को हॉरिज़ॉन्टल स्क्रोल करने पर,
ये कॉलम अपनी जगह पर बने रहेंगे. अगर टाइप: नंबर
डिफ़ॉल्ट: शून्य
|
ऊंचाई |
विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की ऊंचाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है (उदाहरण के लिए, '100 पिक्सल', '80em', '60'). अगर कोई यूनिट तय नहीं की जाती है, तो संख्या को पिक्सल माना जाता है. अगर इस बारे में जानकारी नहीं दी गई है, तो ब्राउज़र, टेबल में फ़िट करने के लिए अपने-आप ऊंचाई को अडजस्ट करेगा. इस प्रोसेस के दौरान इसे जितना हो सके उतना छोटा किया जाएगा. अगर ऊंचाई से कम पर सेट किया गया है, तो टेबल में एक वर्टिकल स्क्रोल बार जोड़ा जाएगा (हेडर लाइन भी फ़्रीज़ कर दी गई होगी). अगर इसे '100%' पर सेट किया जाता है, तो टेबल कंटेनर एलिमेंट में ज़्यादा से ज़्यादा बड़ी हो जाएगी. Type: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
पेज |
डेटा को पेजिंग करने की सुविधा चालू करने का तरीका क्या है और अगर है, तो कैसे. इनमें से कोई एक स्ट्रिंग वैल्यू चुनें:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'बंद करें'
|
pageSize |
पेज विकल्प के साथ पेजिंग चालू होने पर, हर पेज में पंक्तियों की संख्या. टाइप: नंबर
डिफ़ॉल्ट: 10
|
pagingButtons |
पेजिंग बटन के लिए एक खास विकल्प सेट करता है. ये विकल्प उपलब्ध हैं:
Type: स्ट्रिंग या संख्या
डिफ़ॉल्ट: 'अपने-आप'
|
rtlTable |
टेबल के कॉलम के क्रम को उलटा करके, दाईं से बाईं ओर मौजूद भाषाओं (जैसे, अरबी या हिब्रू) के लिए बुनियादी सुविधा जोड़ी जाती है. इससे, कॉलम शून्य सबसे दाईं ओर का कॉलम और सबसे बाईं ओर वाला कॉलम होता है. इसका असर, दिए गए डेटा में कॉलम के इंडेक्स पर नहीं पड़ता. इसका असर सिर्फ़ डिसप्ले के क्रम पर पड़ता है. यह विकल्प होने पर भी टेबल विज़ुअलाइज़ेशन में दो-तरफ़ा (BiDi) भाषा का डिसप्ले नहीं दिखता. अगर पेजिंग (पेज के विकल्प का इस्तेमाल करके) की सुविधा चालू की जाती है या टेबल में स्क्रोल बार हैं, तो इस विकल्प को अनदेखा कर दिया जाएगा. इसकी वजह यह है कि आपने लंबाई और चौड़ाई के विकल्प को टेबल के साइज़ से छोटा बताया है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
scrollLeftStartPosition |
अगर टेबल में हॉरिज़ॉन्टल स्क्रोल बार हैं, तो यह हॉरिज़ॉन्टल स्क्रोलिंग पोज़िशन को पिक्सल में सेट करता है, क्योंकि आपने चौड़ाई वाली प्रॉपर्टी सेट की है. टेबल में स्क्रोल करने पर, सबसे बाईं ओर के कॉलम से बहुत ज़्यादा पिक्सल स्क्रोल हो जाएंगे. टाइप: नंबर
डिफ़ॉल्ट: 0
|
showRowNumber |
अगर इसे 'सही है' पर सेट किया जाता है, तो लाइन की संख्या को टेबल के पहले कॉलम के तौर पर दिखाया जाता है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
क्रम से लगाएं |
अगर उपयोगकर्ता कॉलम के हेडिंग पर क्लिक करता है, तो कॉलम को क्रम से लगाने के लिए यह तरीका अपनाएं. अगर क्रम से लगाने की सुविधा चालू है, तो क्रम में लगाने और क्रम से लगाने वाली कॉलम की प्रॉपर्टी को भी सेट करने के बारे में सोचें. इनमें से किसी एक स्ट्रिंग वैल्यू को चुनें:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'चालू करें'
|
sortAscending |
वह क्रम जिसमें शुरुआती क्रम में लगाए गए कॉलम को क्रम से लगाया जाता है. बढ़ते क्रम के लिए सही, घटते क्रम में लगाने के लिए गलत. अगर टाइप: बूलियन
डिफ़ॉल्ट: सही
|
sortColumn |
डेटा टेबल में किसी कॉलम का इंडेक्स, जिसके हिसाब से टेबल को शुरुआत में क्रम में लगाया जाता है. इस कॉलम पर एक छोटा ऐरो दिखेगा, जो कि क्रम से लगाने का तरीका दिखाता है. टाइप: नंबर
डिफ़ॉल्ट: -1
|
startPage |
दिखाया जाने वाला पहला टेबल पेज. सिर्फ़ तब इस्तेमाल किया जाता है, जब टाइप: नंबर
डिफ़ॉल्ट: 0
|
चौड़ाई |
विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की चौड़ाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है (उदाहरण के लिए, '100 पिक्सल', '80em', '60'). अगर कोई यूनिट तय नहीं की जाती है, तो संख्या को पिक्सल माना जाता है. अगर इस बारे में जानकारी नहीं दी गई है, तो ब्राउज़र, टेबल में फ़िट करने के लिए चौड़ाई को अपने-आप अडजस्ट करेगा. प्रोसेस के दौरान इसे जितना हो सके उतना छोटा किया जाएगा. अगर चौड़ाई को ज़रूरत से कम पर सेट किया जाता है, तो टेबल में एक हॉरिज़ॉन्टल स्क्रोल बार जुड़ जाएगा. अगर टेबल को '100%' पर सेट किया जाता है, तो कंटेनर एलिमेंट में जितना हो सके उतना बड़ा हो जाएगा. Type: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
|
तरीके
तरीका | |
---|---|
draw(data, options) |
टेबल बनाता है. सामान लौटाने का तरीका: कोई नहीं
|
getSelection() |
मानक getSelection लागू करना. चुनने के लिए मौजूद सभी एलिमेंट, पंक्ति में मौजूद सभी एलिमेंट हैं. चुनी गई एक से ज़्यादा पंक्तियां दिख सकती हैं. चुने गए ऑब्जेक्ट में मौजूद लाइन के इंडेक्स, ओरिजनल डेटा टेबल को रेफ़र करते हैं, भले ही उपयोगकर्ता किसी भी इंटरैक्शन (क्रम से लगाएं, पेजिंग कर रहा हो वगैरह) से मेल खाता हो. ध्यान दें कि चुने गए(चुने गए) टॉगल: पहली बार किसी सेल पर क्लिक करने से वह चुन लिया जाता है; सेल पर फिर से क्लिक करने से वह चुने हुए से हट जाती है. इस वजह से, एक इवेंट बन जाता है, लेकिन फिर से हासिल किए गए चुने गए ऑब्जेक्ट में कोई आइटम नहीं चुना गया होता. रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
|
getSortInfo() |
किसी टेबल को क्रम से लगाने की मौजूदा स्थिति के बारे में जानकारी पाने के लिए, इस तरीके का इस्तेमाल करें. आम तौर पर, उपयोगकर्ता ऐसा कर सकते हैं, जो पंक्तियों को किसी कॉलम के मुताबिक क्रम से लगाने के लिए, कॉलम के शीर्षक पर क्लिक करता हो. अगर आपने क्रम से लगाने की सुविधा बंद कर दी है, तो यह तरीका काम नहीं करेगा. अगर आपने कोड में डेटा को क्रम से नहीं लगाया है या उपयोगकर्ता ने कोड को चुनकर डेटा को क्रम से नहीं लगाया है, तो क्रम से लगाने की डिफ़ॉल्ट वैल्यू दिखेंगी. रिटर्न टाइप: इन प्रॉपर्टी वाला एक ऑब्जेक्ट:
|
setSelection(selection) |
स्टैंडर्ड
सामान लौटाने का तरीका: कोई नहीं
|
clearChart() |
चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है. सामान लौटाने का तरीका: कोई नहीं
|
इवेंट
नाम | |
---|---|
चुनें |
स्टैंडर्ड इवेंट चुनें, लेकिन सिर्फ़ पूरी पंक्तियां चुनी जा सकती हैं. प्रॉपर्टी: कोई नहीं
|
पेज |
तब ट्रिगर होता है, जब उपयोगकर्ता पेज नेविगेशन बटन पर क्लिक करते हैं. प्रॉपर्टी:
page : संख्या. उस पेज का इंडेक्स जिस पर जाना है. |
क्रम से लगाएं |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी कॉलम हेडर पर क्लिक करते हैं और क्रम से लगाने का विकल्प 'बंद करें' नहीं होता. प्रॉपर्टी: इन प्रॉपर्टी वाला एक ऑब्जेक्ट:
|
तैयार |
यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट और कॉल के तरीकों के ड्रॉ करने के बाद इंटरैक्ट करना है, तो ड्रॉ करने के तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट करना होगा. साथ ही, इवेंट ट्रिगर होने के बाद ही उन्हें कॉल करना होगा. प्रॉपर्टी: कोई नहीं
|
फ़ॉर्मैटर
ध्यान दें: टेबल विज़ुअलाइज़ेशन में फ़ॉर्मैटर ऑब्जेक्ट का एक सेट होता है, जिन्हें सामान्य फ़ॉर्मैटर ने हटा दिया है. ये फ़ॉर्मैट उसी तरह काम करते हैं, लेकिन किसी भी विज़ुअलाइज़ेशन में उनका इस्तेमाल किया जा सकता है.
नीचे दी गई टेबल में, लेगसी टेबल फ़ॉर्मैटर और इससे मिलता-जुलता जेनरिक फ़ॉर्मैटर दिखाया गया है. नया कोड लिखते समय आपको सामान्य फ़ॉर्मैटर का इस्तेमाल करना चाहिए.
टेबल फ़ॉर्मैटर | |
---|---|
TableArrowFormat | google.visualization.ArrowFormat |
TableBarFormat | google.visualization.BarFormat |
TableColorFormat | google.visualization.ColorFormat |
TableDateFormat | google.visualization.DateFormat |
TableNumberFormat | google.visualization.NumberFormat |
TablePatternFormat | google.visualization.PatternFormat |
अहम जानकारी: फ़ॉर्मैटर, टेक्स्ट को फ़ॉर्मैट करने के लिए अक्सर एचटीएमएल का इस्तेमाल करते हैं. इसलिए, आपको
allowHtml
विकल्प को true
पर सेट करना चाहिए.
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.