विज़ुअलाइज़ेशन: एरिया चार्ट (इमेज)

अहम जानकारी: Google के चार्ट टूल के इमेज चार्ट वाले हिस्से को 20 अप्रैल, 2012 से आधिकारिक तौर पर हटा दिया गया था. यह हमारी समर्थन रोकने की नीति के मुताबिक काम करता रहेगा.

  1. खास जानकारी
  2. उदाहरण
  3. लोड हो रहा है
  4. डेटा फ़ॉर्मैट
  5. कॉन्फ़िगरेशन के विकल्प
  6. तरीके
  7. इवेंट
  8. डेटा नीति

खास जानकारी

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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "imageareachart" है 

  google.charts.load('current', {packages: ['imageareachart']});

विज़ुअलाइज़ेशन की कक्षा का नाम google.visualization.ImageAreaChart है 

  var visualization = new google.visualization.ImageAreaChart(container);

डेटा फ़ॉर्मैट

चार्ट में हर कॉलम एक लाइन को दिखाता है; हर एंट्री एक ही X ऐक्सिस पॉइंट पर Y ऐक्सिस की वैल्यू होती है और विज़ुअलाइज़ेशन उन्हें एक सीधी लाइन में जोड़ता है, फिर लाइन के नीचे वाले हिस्से में जानकारी भर देता है.

डेटा को कॉलम के आधार पर प्रोसेस किया जाता है. इसकी शुरुआत कॉलम से शुरू करके आगे बढ़ती है. पहले आपको सबसे ऊंची पंक्तियों को लिखना होगा, फिर नीचे की पंक्तियों को लिखना होता है, क्योंकि अगर आपने पहले निचली रेखा को पेंट किया है, तो सबसे ऊपर की लाइन पर पेंट होता है और निचली लाइनों को छिपा होता है. इसलिए, कॉलम 1 को कॉलम 2 से ज़्यादा पॉइंट बनाने की कोशिश करें, क्योंकि कॉलम 2 को कॉलम 3 से ज़्यादा रखना होगा. अगर बाएं कॉलम की तुलना में दाएं कॉलम पर एक या दो पॉइंट ऊंचे हैं, तो यह पूरी तरह से निचली लाइन को धुंधला कर सकता है. हालांकि, यह अब भी दिख सकता है.

पहले डेटा को छोड़कर, सभी डेटा न्यूमेरिक टाइप का होना चाहिए. इसमें संख्या या स्ट्रिंग शामिल हो सकती है. अगर पहला कॉलम एक स्ट्रिंग टाइप है, तो पहली कॉलम एंट्री X पर लेबल के तौर पर दिखेंगी. अगर पहला कॉलम नंबर है, तो X ऐक्सिस लेबल नहीं दिखाए जाएंगे. पहले कॉलम को छोड़कर, बाकी सभी कॉलम की संख्या होनी चाहिए. कॉलम की संख्या की कोई सीमा नहीं है.

कॉन्फ़िगरेशन के विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
बैकग्राउंड का रंग स्ट्रिंग '#FFFFFF' (सफ़ेद) चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के लिए बैकग्राउंड का रंग.
कलर श्रेणी<string> ऑटो इसका इस्तेमाल करके, हर डेटा सीरीज़ के लिए खास रंग तय किए जा सकते हैं. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में दिखाया जाता है. रंग i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है, अगर रंगों से ज़्यादा डेटा कॉलम हैं, तो उसे शुरुआती हिस्से में रैप किया जाता है. अगर सभी सीरीज़ के लिए एक ही रंग के वैरिएशन स्वीकार किए जाते हैं, तो color विकल्प का इस्तेमाल करें.
इवेंट चालू करें बूलियन false इससे चार्ट उपयोगकर्ता के ट्रिगर किए गए इवेंट, जैसे कि क्लिक या माउस को फेंकता है. सिर्फ़ कुछ खास तरह के चार्ट के लिए काम करता है. नीचे इवेंट देखें.
ऊंचाई संख्या कंटेनर की ऊंचाई चार्ट की ऊंचाई पिक्सल में.
लेजेंड स्ट्रिंग 'दाएं' लीजेंड की स्थिति और प्रकार. इनमें से कोई एक स्थिति हो सकती है:
  • 'right' - चार्ट के दाईं ओर.
  • 'left' - चार्ट के बाईं ओर.
  • 'ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'कोई नहीं' - कोई लेजेंड नहीं दिखाया गया है.
ज़्यादा से ज़्यादा संख्या स्वचालित Y अक्ष में दिखाया जाने वाला ज़्यादा से ज़्यादा मान.
मि संख्या स्वचालित Y ऐक्सिस पर दिखाया जाने वाला कम से कम मान.
कैटगरी के लेबल दिखाएं बूलियन true अगर 'गलत है' पर सेट किया जाता है, तो कैटगरी के लेबल (X अक्ष के लेबल) हटा दिए जाते हैं.
ShowValueLabel बूलियन true अगर इसे 'गलत है' पर सेट किया जाता है, तो वैल्यू के लेबल हटा दिए जाते हैं (Y ऐक्सिस लेबल).
शीर्षक स्ट्रिंग कोई शीर्षक नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
valueLabelInterval संख्या ऑटो वह अंतराल जहां वैल्यू ऐक्सिस के लेबल दिखाने हैं. उदाहरण के लिए, अगर min, 0, max 100, और valueLabelsInterval 20 है, तो चार्ट में ऐक्सिस लेबल 0, 20, 40, 60, 80 100 दिखेंगे.
width संख्या कंटेनर की चौड़ाई चार्ट की चौड़ाई पिक्सल में.

तरीके

तरीका रिटर्न टाइप जानकारी
draw(data, options) कोई नहीं चार्ट ड्रॉ करता है.

इवेंट

जेनेरिक इमेज चार्ट पर बताए गए इवेंट को सुनने के लिए रजिस्टर किया जा सकता है.

डेटा नीति

कृपया चार्ट एपीआई से जुड़ी नीति पढ़ें.