इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

बहिष्कृत

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

खास जानकारी
उदाहरण
लोड हो रहा है
डेटा फ़ॉर्मैट
कॉन्फ़िगरेशन के विकल्प
तरीके
इवेंट
डेटा नीति

खास जानकारी

एक पाई चार्ट जिसे 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:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

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

लोड हो रहा है

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

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

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

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

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

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

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

नाम	टाइप	डिफ़ॉल्ट	जानकारी
बैकग्राउंड का रंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	चार्ट के मुख्य हिस्से का बैकग्राउंड कलर. इनमें से कोई एक विकल्प: एचटीएमएल वाली रंग की स्ट्रिंग, जैसे कि 'लाल' या '#00cc00', or इन प्रॉपर्टी वाले n ऑब्जेक्ट का ब्यौरा: `stroke` - चार्ट के बॉर्डर रंग की जानकारी देने वाली एचटीएमएल कलर स्ट्रिंग. `fill` - चार्ट के बैकग्राउंड कलर की जानकारी देने वाली एचटीएमएल कलर स्ट्रिंग. `strokeSize` - चार्ट के बॉर्डर की मोटाई को बताने वाली संख्या. किसी बॉर्डर के लिए, इसे 0 पर सेट किया जा सकता है. उदाहरण: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`.
बॉर्डर का रंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	चार्ट एलिमेंट के चारों ओर बॉर्डर. संभावित वैल्यू, 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'}]}`
चालू करें टूलटिप	बूलियन	true	अगर इस नीति को 'सही है' पर सेट किया जाता है, तो उपयोगकर्ता के स्लाइस पर क्लिक करने से टूलटिप दिखती हैं.
फ़ोकसबॉर्डररंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	चार्ट के उन एलिमेंट के चारों ओर बॉर्डर जो फ़ोकस में हैं (माउस से बताए गए). संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
ऊंचाई	संख्या	कंटेनर की ऊंचाई	चार्ट की ऊंचाई पिक्सल में.
is3D	बूलियन	false	अगर इसे 'सही है' पर सेट किया जाता है, तो तीन डाइमेंशन वाला चार्ट दिखता है.
लेजेंड	स्ट्रिंग	'दाएं'	लीजेंड की स्थिति और प्रकार. इनमें से कोई एक स्थिति हो सकती है: 'right' - चार्ट के दाईं ओर. 'left' - चार्ट के बाईं ओर. 'ऊपर' - चार्ट के ऊपर. 'सबसे नीचे' - चार्ट के नीचे. 'लेबल' - स्लाइस के पास लेबल. 'कोई नहीं' - कोई लेजेंड नहीं दिखाया गया है.
लेजेंडबैकग्राउंडरंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	चार्ट के लेजेंड एरिया का बैकग्राउंड कलर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
लेजेंड फ़ॉन्ट का साइज़	संख्या	स्वचालित	लेजेंड फ़ॉन्ट का साइज़, पिक्सल में.
लेजेंडटेक्स्ट का रंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	लेजेंड के टेक्स्ट का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
पाई जॉइनऐंगल	संख्या	0	इस कोण से कम किसी भी स्लाइस को "अन्य" लेबल वाले सामान्य स्लाइस में जोड़ दिया जाएगा.
पाईमिनिममंगल	संख्या	0	पाई के चार्ट में, इस ऐंगल से छोटे किसी भी स्लाइस को नहीं बनाया जाएगा (हालांकि, अब भी इसे लेजेंड एंट्री में शामिल किया जाएगा). पाई को तय अनुपात में भरने के लिए, बाकी के स्लाइस बड़े किए जाएंगे. ध्यान दें: यह, साफ़ तौर पर वैल्यू को डिस्टॉर्ट कर सकता है. खास तौर पर, जब यह संख्या बड़ी हो, क्योंकि पाई से एक संख्या हटाई जा रही हो. स्लाइस के साइज़ का हिसाब लगाने के लिए, piejoinAngle से छोटे कोणों को "अन्य" स्लाइस में जोड़ा जाता है. इसके बाद, pie MinimalAngle से बड़े सभी स्लाइस बनाए जाते हैं
शीर्षक	स्ट्रिंग	कोई शीर्षक नहीं	चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
शीर्षक का रंग	स्ट्रिंग या ऑब्जेक्ट	डिफ़ॉल्ट रंग	चार्ट के शीर्षक का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
शीर्षक फ़ॉन्ट का आकार	संख्या	स्वचालित	चार्ट के शीर्षक के लिए फ़ॉन्ट का साइज़, पिक्सल में.
टूलटिपसलाह का साइज़	संख्या	11	टूलटिप टेक्स्ट के फ़ॉन्ट का साइज़. अगर टूलटिप बहुत छोटा है, तो टेक्स्ट को तय किए गए फ़ॉन्ट में रखने से इसमें कमी आ सकती है.
टूलटिप की ऊंचाई	संख्या	60	टूलटिप की ऊंचाई, पिक्सल में. टूलटिप की ऊंचाई तय कर दी गई है. यह कभी भी बड़ी या छोटी नहीं होगी, ताकि टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ के मुताबिक फ़िट हो सके. हालांकि, चार्ट की ऊंचाई 1/3 से ज़्यादा होनी चाहिए.
टूलटिप	संख्या	120	टूलटिप की चौड़ाई, पिक्सल में. टूलटिप की चौड़ाई तय कर दी गई है. यह कभी भी बड़ी या छोटी नहीं होगी, ताकि टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ के मुताबिक फ़िट हो सके. हालांकि, चार्ट की चौड़ाई से ज़्यादा डेटा को काट दिया जाएगा.
width	संख्या	कंटेनर की चौड़ाई	चार्ट की चौड़ाई पिक्सल में.

तरीके

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

इवेंट

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

डेटा नीति

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