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

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

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

खास जानकारी

ऐसा बार चार्ट जिसे Google Charts 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:["imagebarchart"]});
      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.ImageBarChart(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 के पैकेज का नाम "imagebarchart" है 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

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

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

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

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

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

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

तरीके

तरीका रिटर्न टाइप ब्यौरा
draw(data, options) कुछ नहीं चार्ट बनाता है.

इवेंट

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

डेटा नीति

कृपया Chart API को लॉग करने की नीति देखें.