अहम जानकारी: Google के चार्ट टूल के इमेज चार्ट वाले हिस्से को 20 अप्रैल, 2012 से आधिकारिक तौर पर हटा दिया गया था. यह हमारी समर्थन रोकने की नीति के मुताबिक काम करता रहेगा.
खास जानकारी
Google चार्ट API का इस्तेमाल करके इमेज के साथ रेंडर की गई एक या एक से ज़्यादा स्पार्कलाइन. इमेज, एचटीएमएल टेबल में रखी होती हैं.
उदाहरण
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
लोड हो रहा है
google.charts.load
पैकेज का नाम "imagesparkline"
है.
google.charts.load("current", {packages: ["imagesparkline"]});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.ImageSparkLine
है.
var visualization = new google.visualization.ImageSparkLine(container);
डेटा फ़ॉर्मैट
कॉलम की संख्या. सभी कॉलम में संख्याएं होनी चाहिए. हर कॉलम को एक ही स्पार्कलाइन के तौर पर दिखाया जाता है.
कॉन्फ़िगरेशन के विकल्प
नाम | टाइप | डिफ़ॉल्ट | जानकारी |
---|---|---|---|
रंग | स्ट्रिंग | सभी चार्ट में इस्तेमाल करने के लिए रंग की जानकारी देता है.
#rrggbb फ़ॉर्मैट में एक स्ट्रिंग. उदाहरण के लिए: '#00cc00'.
इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब colors विकल्प के बारे में जानकारी न दी गई हो. |
|
कलर | स्ट्रिंग का कलेक्शन | डिफ़ॉल्ट रंग | डेटा कॉलम के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग की श्रेणी जहां हर एलिमेंट #rrggbb फ़ॉर्मैट में एक स्ट्रिंग है. उदाहरण के लिए: '#00cc00'. रंग i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है. अगर रंगों की संख्या, कॉलम की संख्या से कम है, तो रंग चुनने की सुविधा रैप हो जाएगी. |
भरें | बूलियन | false | सही होने पर, लाइन के नीचे का हिस्सा रंग में भर जाएगा. |
ऊंचाई | संख्या | कंटेनर की ऊंचाई | इमेज की ऊंचाई, पिक्सल में. |
लेबल पोज़िशन | स्ट्रिंग | कोई नहीं | लेबल की स्थिति. 'कुछ नहीं', 'बायां', 'दायां' |
ज़्यादा से ज़्यादा | संख्याओं का अरे | हर स्पार्कलाइन का ज़्यादा से ज़्यादा डेटा मान | हर स्पार्कलाइन के डेटा वैल्यू की रेंज के लिए सबसे बड़ी वैल्यू. श्रेणी का इंडेक्स, DataTable में मौजूद कॉलम के इंडेक्स से मेल खाना चाहिए. अगर सभी वैल्यू शून्य हैं, तो यह सीरीज़ की ज़्यादा से ज़्यादा वैल्यू होगी. |
मि | संख्याओं का अरे | हर स्पार्कलाइन का कम से कम डेटा मान | हर स्पार्कलाइन के डेटा वैल्यू रेंज के लिए सबसे कम वैल्यू. श्रेणी का इंडेक्स, DataTable में मौजूद कॉलम के इंडेक्स से मेल खाना चाहिए. अगर सभी वैल्यू शून्य हैं, तो यह सीरीज़ में कम से कम वैल्यू होगी. |
AxisLines दिखाएं | बूलियन | true | सही होने पर, ऐक्सिस लाइनें दिखाई जाती हैं. अगर गलत है, तो वे नहीं हैं और showValueLabel का डिफ़ॉल्ट विकल्प गलत है. |
ShowValueLabel | बूलियन | सही है, सिवाय उस स्थिति के जब showAxisLines गलत हो. | सही होने पर, वैल्यू ऐक्सिस लेबल दिखाए जाते हैं. |
शीर्षक | स्ट्रिंग का कलेक्शन | कोई भी शीर्षक नहीं दिखाया गया है | हर स्पार्कलाइन के लिए इस्तेमाल किए जाने वाले शीर्षक. |
width | संख्या | कंटेनर की चौड़ाई | चार्ट की चौड़ाई, पिक्सल में. |
लेआउट | स्ट्रिंग | 'वी' | वर्टिकल या हॉरिज़ॉन्टल लेआउट: वर्टिकल के लिए 'v', हॉरिज़ॉन्टल के लिए 'h'. |
तरीके
तरीका | रिटर्न टाइप | जानकारी |
---|---|---|
draw(data, options) |
कोई नहीं | चार्ट ड्रॉ करता है. |
getSelection() |
चुने गए एलिमेंट की कैटगरी | चुने हुए चार्ट के इंडेक्स को ऑब्जेक्ट के कलेक्शन के तौर पर दिखाता है. हर ऑब्जेक्ट में एक कॉलम प्रॉपर्टी होती है. इसमें, चुनी गई स्पार्कलाइन की कॉलम संख्या होती है. चुने गए एक से ज़्यादा कॉलम दिखाए जा सकते हैं. |
setSelection(selection) |
कोई नहीं | बताई गई स्पार्कलाइन को चुनता है और किसी ऐसी स्पार्कलाइन को नहीं चुनता है जो तय नहीं है. चुनना, ऑब्जेक्ट की एक श्रेणी है जिसमें हर एक के साथ अंकों में बनी column प्रॉपर्टी होती है. यह चुनी गई स्पार्कलाइन का इंडेक्स होता है. ज़्यादा जानकारी के लिए setSelection() देखें. |
इवेंट
नाम | जानकारी | प्रॉपर्टी |
---|---|---|
चुनें | स्टैंडर्ड चुना गया इवेंट. | कभी नहीं |
डेटा नीति
कृपया चार्ट एपीआई से जुड़ी नीति पढ़ें.