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

अहम जानकारी: 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:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

लोड हो रहा है

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

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

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

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

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

दो कॉलम. पहला कॉलम एक स्ट्रिंग होना चाहिए और इसमें स्लाइस लेबल होना चाहिए. दूसरा कॉलम कोई संख्या होनी चाहिए और उसमें स्लाइस की वैल्यू होनी चाहिए.

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

विज़ुअलाइज़ेशन के draw() तरीके में पास किए गए विकल्प ऑब्जेक्ट के हिस्से के तौर पर, इन विकल्पों के बारे में बताया जा सकता है.

नाम टाइप डिफ़ॉल्ट ब्यौरा
backgroundColor स्ट्रिंग '#FFFFFF' (सफ़ेद) चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के बैकग्राउंड का रंग.
रंग स्ट्रिंग ऑटो सभी सीरीज़ में इस्तेमाल करने के लिए, बेस रंग तय करता है. हर सीरीज़ में तय किए गए रंग का ग्रेड दिया जाएगा. कलर, Chart API के कलर फ़ॉर्मैट में बताए जाते हैं. अगर colors दिया गया है, तो इस पर ध्यान नहीं दिया जाता.
कलर कलेक्शन<string> ऑटो हर डेटा सीरीज़ को खास रंग असाइन करने के लिए इसका इस्तेमाल करें. कलर, चार्ट एपीआई कलर फ़ॉर्मैट में बताए जाते हैं. अगर कलर से ज़्यादा डेटा कॉलम हैं, तो कलर i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है. यह शुरुआत तक रैप करता है. अगर एक ही रंग के वैरिएशन सभी सीरीज़ के लिए सही हैं, तो color विकल्प का इस्तेमाल करें.
enableEvents boolean false इसकी वजह से, उपयोगकर्ता से ट्रिगर होने वाले इवेंट, जैसे कि क्लिक या माउस ओवर फेंकते हैं. इसका इस्तेमाल सिर्फ़ चुनिंदा चार्ट टाइप के लिए किया जा सकता है. नीचे इवेंट देखें.
ऊंचाई नंबर कंटेनर की ऊंचाई पिक्सल में चार्ट की ऊंचाई.
आईएस3डी boolean false अगर नीति को 'सही है' पर सेट किया जाता है, तो तीन डाइमेंशन वाला चार्ट दिखता है.
लेबल स्ट्रिंग 'कोई नहीं'

हर स्लाइस के लिए, क्या लेबल दिखाना है. इनमें से कोई वैल्यू चुनें:

  • 'कोई भी नहीं' - कोई लेबल नहीं.
  • 'value' - स्लाइस के मान का इस्तेमाल लेबल के तौर पर करें.
  • 'नाम' - स्लाइस के नाम (कॉलम का नाम) का इस्तेमाल करें.
लेजेंड स्ट्रिंग 'राइट' चार्ट पर लेजेंड की जगह. इनमें से किसी एक वैल्यू को चुनें: 'top', 'bottom', 'left', 'right', 'none'.
title स्ट्रिंग कोई टाइटल नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
चौड़ाई नंबर कंटेनर की चौड़ाई पिक्सल में चार्ट की चौड़ाई.

तरीके

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

इवेंट

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

डेटा नीति

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