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

बहिष्कृत किया गया

इस विज़ुअलाइज़ेशन को नए वर्शन से बदल दिया गया है. इसके बजाय, कृपया इसका इस्तेमाल करें. आसानी से माइग्रेट करने के लिए, कृपया प्रॉडक्ट की जानकारी वाला पेज देखें.

खास जानकारी

SVG या VML का इस्तेमाल करके, ब्राउज़र में रेंडर किया जाने वाला एरिया चार्ट. पॉइंट पर क्लिक करने पर सलाह दिखाता है. लेजेंड एंट्री पर क्लिक करने पर, लाइनें ऐनिमेट होती हैं.

इसके ज़रिए: Google

उदाहरण

विज़ुअलाइज़ेशन प्लेग्राउंड में इसे खुद कोड करें

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

लोड हो रहा है

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

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

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

पहला कॉलम एक स्ट्रिंग होना चाहिए और इसमें कैटगरी का लेबल होना चाहिए. इसके बाद कितने भी कॉलम हो सकते हैं. सभी कॉलम संख्या में होने चाहिए. हर कॉलम को एक अलग लाइन के तौर पर दिखाया जाता है.

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

नाम टाइप डिफ़ॉल्ट ब्यौरा
axisColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग ऐक्सिस का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
axisBackgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग ऐक्सिस के बैकग्राउंड के चारों ओर बॉर्डर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
axisFontSize नंबर स्वचालित चार्ट के ऐक्सिस टेक्स्ट का फ़ॉन्ट साइज़, पिक्सल में.
backgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के मुख्य हिस्से के लिए बैकग्राउंड का रंग. इनमें से कोई एक विकल्प हो सकता है:
  • एचटीएमएल के साथ काम करने वाली रंग की स्ट्रिंग, जैसे कि 'लाल' या '#00cc00'
  • stroke fill और strokeSize प्रॉपर्टी वाला एक ऑब्जेक्ट. stroke और fill एक रंग वाली स्ट्रिंग होनी चाहिए. स्ट्रोकSize एक संख्या है. उदाहरण के लिए: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. स्ट्रोक के बिना, सिर्फ़ 'फ़िल' सुविधा का इस्तेमाल करने के लिए, stroke:null, strokeSize: 0 का इस्तेमाल करें.
borderColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट एलिमेंट के चारों ओर बॉर्डर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
कलर स्ट्रिंग का कलेक्शन डिफ़ॉल्ट रंग चार्ट के एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन. हर एलिमेंट एक ऐसी स्ट्रिंग है जो एचटीएमएल के साथ काम करती है. उदाहरण के लिए, 'लाल' या '#00cc00'.
enableTooltip boolean सही अगर इसे 'सही है' पर सेट किया जाता है, तो टूलटिप तब दिखती हैं, जब उपयोगकर्ता किसी डेटा पॉइंट पर क्लिक करता है.
focusBorderColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के एलिमेंट के चारों ओर मौजूद बॉर्डर, जो फ़ोकस में है (माउस की ओर इशारा करता है). संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
ऊंचाई नंबर कंटेनर की ऊंचाई पिक्सल में चार्ट की ऊंचाई.
isStacked boolean false अगर नीति को 'सही है' पर सेट किया जाता है, तो लाइन की वैल्यू स्टैक हो जाती हैं.
लेजेंड स्ट्रिंग 'राइट' लेजेंड की जगह और टाइप. इनमें से कोई एक स्थिति हो सकती है:
  • 'दाईं ओर' - चार्ट की दाईं ओर.
  • 'बायां' - चार्ट के बाईं ओर.
  • 'सबसे ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
legendBackgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के लेजेंड एरिया के लिए बैकग्राउंड का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
legendFontSize नंबर स्वचालित लेजेंड के फ़ॉन्ट का साइज़, पिक्सल में.
legendTextColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग लेजेंड के टेक्स्ट का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
lineSize नंबर 2 पिक्सल में लाइन की चौड़ाई. सभी लाइनों को छिपाने और सिर्फ़ पॉइंट दिखाने के लिए, शून्य का इस्तेमाल करें.
logScale boolean false अगर सही है, तो मुख्य ऐक्सिस को लॉगारिद्मिक तरीके से स्केल किया जाना चाहिए.
ज़्यादा से ज़्यादा नंबर स्वचालित सबसे ऊंची Y ऐक्सिस ग्रिड लाइन के बारे में जानकारी देता है. असल ग्रिड लाइन, दो वैल्यू में से बड़ी होगी: विकल्प की सबसे बड़ी वैल्यू या सबसे ज़्यादा डेटा की वैल्यू, जिसे अगले ग्रिड मार्क तक राउंड अप कर दिया जाता है.
कम से कम नंबर स्वचालित सबसे नीचे वाली Y ऐक्सिस ग्रिड लाइन के बारे में जानकारी देता है. असल ग्रिड लाइन, दो वैल्यू में से एक होगी: कम से कम विकल्प की वैल्यू या सबसे कम डेटा की वैल्यू, जो कि नीचे के ग्रिड मार्क के नीचे दिखेगी.
pointSize नंबर 3 पिक्सल में दिखाए गए पॉइंट का साइज़. सभी बिंदुओं को छिपाने के लिए शून्य का उपयोग करें.
reverseAxis boolean false अगर नीति को 'सही है' पर सेट किया जाता है, तो दाईं से बाईं ओर कैटगरी बनाई जाएगी. डिफ़ॉल्ट रूप से दाएँ-से-दाएं खींचना होता है.
showCategories boolean सही अगर सही है, तो कैटगरी के लेबल दिखाएगा. अगर गलत है, तो ऐसा नहीं होगा.
title स्ट्रिंग कोई टाइटल नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
titleX स्ट्रिंग कोई टाइटल नहीं हॉरिज़ॉन्टल ऐक्सिस के नीचे दिखाया जाने वाला टेक्स्ट.
titleY स्ट्रिंग कोई टाइटल नहीं वर्टिकल ऐक्सिस की मदद से दिखाया जाने वाला टेक्स्ट.
titleColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के टाइटल का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
titleFontSize नंबर स्वचालित चार्ट के टाइटल के लिए फ़ॉन्ट का साइज़, पिक्सल में.

tooltipFontSize		 नंबर 11 टूलटिप टेक्स्ट का फ़ॉन्ट साइज़. यह संख्या कम हो सकती है. ऐसा तब होता है, जब टूलटिप बताए गए फ़ॉन्ट में टेक्स्ट को होल्ड करने के लिए बहुत छोटा हो.
tooltipHeight
 नंबर 60 टूलटिप की ऊंचाई, पिक्सल में. टूलटिप की ऊंचाई तय है. यह टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ में फ़िट होने के लिए, कभी बड़ी या छोटी नहीं होगी. हालांकि, चार्ट की ऊंचाई 1/3 से ज़्यादा होने पर उसे काट दिया जाएगा.
tooltipWidth नंबर 120 टूलटिप की चौड़ाई, पिक्सल में. टूलटिप की चौड़ाई पहले से तय होती है. यह टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ में फ़िट होने के लिए, कभी भी छोटी या बड़ी नहीं होगी. हालांकि, चार्ट की चौड़ाई से ज़्यादा साइज़ की कोई भी वैल्यू अपने-आप कट जाएगी.
चौड़ाई नंबर कंटेनर की चौड़ाई पिक्सल में चार्ट की चौड़ाई.

तरीके

तरीका रिटर्न टाइप ब्यौरा
draw(data, options) कुछ नहीं चार्ट बनाता है.
getSelection() चुने गए एलिमेंट की कलेक्शन स्टैंडर्ड getSelection() लागू करना. चुने गए एलिमेंट में कॉलम और सेल एलिमेंट हैं. उपयोगकर्ता एक बार में सिर्फ़ एक कॉलम या सेल चुन सकता है.
setSelection() कुछ नहीं स्टैंडर्ड setSelection() को लागू किया जाता है, लेकिन इसमें सिर्फ़ एक एलिमेंट चुना जा सकता है. चुनी गई हर एंट्री को कॉलम या चुनी गई सेल के तौर पर देखता है. ध्यान दें कि लेबल कॉलम नहीं चुना जा सकता.

इवेंट

नाम ब्यौरा प्रॉपर्टी
onmouseover तब ट्रिगर होता है, जब उपयोगकर्ता किसी पॉइंट पर माउस करता है और उससे जुड़ी सेल की पंक्ति और कॉलम इंडेक्स में पास होता है. पंक्ति, कॉलम
onmouseout तब ट्रिगर होता है, जब उपयोगकर्ता किसी पॉइंट से दूर होता है और उससे जुड़ी सेल की पंक्ति और कॉलम इंडेक्स में पास होता है. पंक्ति, कॉलम
ready यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, सिर्फ़ ड्रॉ करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट के सक्रिय होने के बाद ही उन्हें कॉल करना चाहिए कोई नहीं
select यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी पॉइंट या लेजेंड पर क्लिक करता है. जब कोई पॉइंट चुना जाता है, तो डेटा टेबल में उससे जुड़ी सेल चुनी जाती है; जब कोई लेजेंड चुना जाता है, तो डेटा टेबल में उससे जुड़ा कॉलम चुना जाता है. चुनी गई जानकारी के बारे में जानने के लिए, getSelection() पर कॉल करें. कोई नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.