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

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

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

  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:["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);

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

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

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

नाम टाइप डिफ़ॉल्ट ब्यौरा
backgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के मुख्य हिस्से के लिए बैकग्राउंड का रंग. इनमें से कोई एक विकल्प:
  • एचटीएमएल के साथ काम करने वाली रंग वाली स्ट्रिंग, जैसे कि 'लाल' या '#00cc00', या
  • इन प्रॉपर्टी के साथ n ऑब्जेक्ट की जानकारी:
    • stroke - एचटीएमएल वाले रंग की स्ट्रिंग, जो चार्ट के बॉर्डर के रंग की जानकारी देती है.
    • fill - चार्ट के बैकग्राउंड के रंग की जानकारी देने वाली एचटीएमएल रंग की स्ट्रिंग.
    • strokeSize - चार्ट के बॉर्डर की मोटाई को पिक्सल में बताने वाली संख्या. कोई बॉर्डर न होने के लिए, इसे 0 पर सेट किया जा सकता है.
      उदाहरण: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
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 अगर नीति को 'सही है' पर सेट किया जाता है, तो तीन डाइमेंशन वाला चार्ट दिखता है.
लेजेंड स्ट्रिंग 'राइट' लेजेंड की जगह और टाइप. इनमें से कोई एक स्थिति हो सकती है:
  • 'दाईं ओर' - चार्ट की दाईं ओर.
  • 'बायां' - चार्ट के बाईं ओर.
  • 'सबसे ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'लेबल' - स्लाइस के पास वाले लेबल.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
legendBackgroundColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के लेजेंड एरिया के लिए बैकग्राउंड का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
legendFontSize नंबर स्वचालित लेजेंड के फ़ॉन्ट का साइज़, पिक्सल में.
legendTextColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग लेजेंड के टेक्स्ट का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
pieJoinAngle नंबर 0 इस ऐंगल से कम होने वाला कोई भी स्लाइस, "अन्य" लेबल वाले सामान्य स्लाइस में जोड़ दिया जाएगा.
pieMinimalAngle नंबर 0

इस ऐंगल से छोटी कोई भी स्लाइस, पाई चार्ट में नहीं बनाई जाएगी (हालांकि, इसे अब भी लेजेंड एंट्री मिलेगी). बचे हुए स्लाइस, तय अनुपात में पाई को भरने के लिए बड़ा हो जाएंगे. ध्यान दें: ऐसा करने से, साफ़ तौर पर दिखने वाली वैल्यू में फ़र्क़ आ सकता है. खास तौर पर तब, जब यह संख्या बड़ी हो, क्योंकि पाई में से मात्रा को हटाया जा रहा है.

स्लाइस के साइज़ का हिसाब लगाने के लिए, piejoinAngle से छोटे पहले कोण "अन्य" स्लाइस से जोड़े जाते हैं. इसके बाद, pie MinimalAngle से बड़े सभी स्लाइस बनाए जाते हैं
title स्ट्रिंग कोई टाइटल नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
titleColor स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के टाइटल का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन विकल्प में हो सकती हैं.
titleFontSize नंबर स्वचालित चार्ट के टाइटल के लिए फ़ॉन्ट का साइज़, पिक्सल में.

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

तरीके

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

इवेंट

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

यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी स्लाइस या लेजेंड पर क्लिक करता है. कोई स्लाइस चुनने पर, डेटा टेबल में उससे जुड़ी सेल को चुना जाता है; जब कोई लेजेंड चुना जाता है, तो डेटा टेबल में उससे जुड़ा कॉलम चुना जाता है. चुना गया विकल्प जानने के लिए, getSelection() पर कॉल करें.

ध्यान दें: स्लाइस पर क्लिक करने से सेल चुनने और उससे चुने हुए का निशान हटाने के बीच टॉगल नहीं होता. स्लाइस पर क्लिक करने से वह हमेशा चुन लिया जाता है. दूसरी ओर, लेजेंड की एंट्री पर क्लिक करने से, पंक्ति को चुनने और उससे चुने हुए का निशान हटाने के बीच टॉगल होता है.

कोई नहीं

डेटा नीति

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