अहम जानकारी: 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:["imagelinechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
लोड हो रहा है
google.charts.load
पैकेज का नाम "imagelinechart"
है.
google.charts.load('current', {packages: ['imagelinechart']});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.ImageLineChart
है.
var visualization = new google.visualization.ImageLineChart(container);
डेटा फ़ॉर्मैट
पहला स्तंभ एक स्ट्रिंग होना चाहिए और उसमें श्रेणी लेबल होना चाहिए. इसके बाद भी कितने ही कॉलम आ सकते हैं, सभी कॉलम अंकों में होने चाहिए. हर कॉलम को एक अलग लाइन के तौर पर दिखाया जाता है.
कॉन्फ़िगरेशन के विकल्प
नाम | टाइप | डिफ़ॉल्ट | जानकारी |
---|---|---|---|
बैकग्राउंड का रंग | स्ट्रिंग | '#FFFFFF' (सफ़ेद) | चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के लिए बैकग्राउंड का रंग. |
कलर | श्रेणी<string> | ऑटो | इसका इस्तेमाल करके, हर डेटा सीरीज़ के लिए खास रंग तय किए जा सकते हैं. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में दिखाया जाता है.
रंग i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है,
अगर रंगों से ज़्यादा डेटा कॉलम हैं, तो
उसे शुरुआती हिस्से में रैप किया जाता है. अगर सभी सीरीज़ के लिए
एक ही रंग के वैरिएशन स्वीकार किए जाते हैं, तो
color विकल्प का इस्तेमाल करें. |
इवेंट चालू करें | बूलियन | false | इससे चार्ट उपयोगकर्ता के ट्रिगर किए गए इवेंट, जैसे कि क्लिक या माउस को फेंकता है. सिर्फ़ कुछ खास तरह के चार्ट के लिए काम करता है. नीचे इवेंट देखें. |
ऊंचाई | संख्या | कंटेनर की ऊंचाई | चार्ट की ऊंचाई पिक्सल में. |
लेजेंड | स्ट्रिंग | 'दाएं' | लीजेंड की स्थिति और प्रकार. इनमें से कोई एक स्थिति हो सकती है:
|
ज़्यादा से ज़्यादा | संख्या | स्वचालित | Y अक्ष में दिखाया जाने वाला ज़्यादा से ज़्यादा मान. |
मि | संख्या | स्वचालित | Y ऐक्सिस पर दिखाया जाने वाला कम से कम मान. |
AxisLines दिखाएं | बूलियन | true | अगर गलत पर सेट किया जाता है, तो ऐक्सिस लाइनें और लेबल भी हट जाते हैं. |
कैटगरी के लेबल दिखाएं | बूलियन | ShowAxisLines की तरह | अगर 'गलत है' पर सेट किया जाता है, तो कैटगरी के लेबल (X अक्ष के लेबल) हटा दिए जाते हैं. |
ShowValueLabel | बूलियन | ShowAxisLines की तरह | अगर इसे 'गलत है' पर सेट किया जाता है, तो वैल्यू के लेबल हटा दिए जाते हैं (Y ऐक्सिस लेबल). |
शीर्षक | स्ट्रिंग | कोई शीर्षक नहीं | चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट. |
valueLabelInterval | संख्या | ऑटो | वह अंतराल जहां वैल्यू ऐक्सिस के लेबल दिखाने हैं. उदाहरण के लिए, अगर min , 0, max 100, और valueLabelsInterval 20 है, तो चार्ट में ऐक्सिस लेबल 0, 20, 40, 60, 80 100 दिखेंगे. |
width | संख्या | कंटेनर की चौड़ाई | चार्ट की चौड़ाई पिक्सल में. |
तरीके
तरीका | रिटर्न टाइप | जानकारी |
---|---|---|
draw(data, options) |
कोई नहीं | चार्ट ड्रॉ करता है. |
इवेंट
जेनरिक इमेज चार्ट पेज पर बताए गए इवेंट सुनने के लिए, रजिस्टर किया जा सकता है.
डेटा नीति
कृपया चार्ट एपीआई से जुड़ी नीति पढ़ें.