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

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

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

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

खास जानकारी

वर्टिकल बार चार्ट, जो 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:["columnchart"]});
      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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

लोड हो रहा है

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

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

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

  var visualization = new google.visualization.ColumnChart(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 कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
कलर स्ट्रिंग या ऑब्जेक्ट का कलेक्शन डिफ़ॉल्ट रंग

रंगों का कलेक्शन, जिसमें हर एलिमेंट एक सीरीज़ का रंग बताता है. आपको हर सीरीज़ के लिए एक अरे एलिमेंट तय करना चाहिए.

  • अगर is3D=false है, तो यह एचटीएमएल कलर का कलेक्शन है. उदाहरण: रंग:['#00FF00','orange']
  • अगर is3D=true, तो यह एचटीएमएल के रंगों या इस तरह के ऑब्जेक्ट का कलेक्शन होता है: {color:face_color, darker:shade_color}, जहां color एलिमेंट के चेहरे का रंग होता है और darker शेड का रंग होता है. हालांकि, अगर किसी 3D ऑब्जेक्ट के लिए एचटीएमएल का रंग तय किया जाता है, तो फ़ेस और शेड का रंग एक जैसा होगा. साथ ही, 3D इफ़ेक्ट कम हो जाएगा. उदाहरण: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean सही अगर इसे 'सही है' पर सेट किया जाता है, तो जब उपयोगकर्ता किसी कॉलम पर क्लिक करता है, तब टूलटिप दिखती हैं.
focusBorderColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के एलिमेंट के चारों ओर मौजूद बॉर्डर, जो फ़ोकस में है (माउस की ओर इशारा करता है). संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
ऊंचाई नंबर कंटेनर की ऊंचाई पिक्सल में चार्ट की ऊंचाई.
आईएस3डी boolean false अगर नीति को 'सही है' पर सेट किया जाता है, तो थ्री-डाइमेंशन वाला बदलाव दिखता है.
isStacked boolean false अगर नीति को 'सही है' पर सेट किया जाता है, तो लाइन की वैल्यू स्टैक हो जाती हैं.
लेजेंड स्ट्रिंग 'राइट' लेजेंड की जगह और टाइप. इनमें से कोई एक स्थिति हो सकती है:
  • 'दाईं ओर' - चार्ट की दाईं ओर.
  • 'बायां' - चार्ट के बाईं ओर.
  • 'सबसे ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
legendBackgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के लेजेंड एरिया के लिए बैकग्राउंड का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
legendFontSize नंबर स्वचालित लेजेंड के फ़ॉन्ट का साइज़, पिक्सल में.
legendTextColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग लेजेंड की टेक्स्ट एंट्री का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
logScale boolean false अगर सही है, तो मुख्य ऐक्सिस को लॉगारिद्मिक तरीके से स्केल किया जाना चाहिए.
ज़्यादा से ज़्यादा नंबर स्वचालित सबसे ऊंची Y ऐक्सिस ग्रिड लाइन के बारे में जानकारी देता है. असल ग्रिड लाइन, दो वैल्यू में से बड़ी होगी: विकल्प की सबसे बड़ी वैल्यू या सबसे ज़्यादा डेटा की वैल्यू, जिसे अगले ग्रिड मार्क तक राउंड अप कर दिया जाता है.
कम से कम नंबर स्वचालित सबसे नीचे वाली Y ऐक्सिस ग्रिड लाइन के बारे में जानकारी देता है. असल ग्रिड लाइन में दो वैल्यू सबसे कम होंगी: कम से कम विकल्प की वैल्यू या सबसे कम डेटा की वैल्यू, जो ग्रिड के अगले निशान तक राउंड ऑफ़ होती है .
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() पर कॉल करें. कोई नहीं

डेटा नीति

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