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

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

खास जानकारी

एक पाई चार्ट जिसे SVG या VML का इस्तेमाल करके, ब्राउज़र में रेंडर किया जाता है. स्लाइस पर माउस घुमाते समय टूलटिप दिखती है.

उदाहरण

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

3D पाई चार्ट बनाना

अगर आप is3D विकल्प को true पर सेट करते हैं, तो आपका पाई चार्ट उसे तीन डाइमेंशन की तरह दिखाया जाएगा:

is3D डिफ़ॉल्ट रूप से false होता है, इसलिए यहां इसे true पर सेट किया गया है:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

डोनट चार्ट बनाना

डोनट चार्ट एक पाई चार्ट है. इसमें चार्ट के बीच में छेद होता है. pieHole विकल्प का इस्तेमाल करके डोनट चार्ट बनाए जा सकते हैं:

pieHole विकल्प को 0 और 1 के बीच की संख्या पर सेट करना चाहिए, जो छेद और चार्ट के रेडि या का अनुपात है. ज़्यादातर चार्ट में 0.4 और 0.6 के बीच की संख्याएं सबसे अच्छी दिखेंगी. 1 के बराबर या ज़्यादा वैल्यू को अनदेखा कर दिया जाएगा और 0 की वैल्यू आपके पाइहोल को पूरी तरह से बंद कर देगी.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

आपके पास pieHole और is3D के विकल्पों को जोड़ने का विकल्प नहीं है. अगर ऐसा किया जाता है, तो pieHole को अनदेखा कर दिया जाएगा.

ध्यान दें कि Google चार्ट, लेबल को स्लाइस के जितना हो सके उतना करीब रखने की कोशिश करता है. अगर आपके पास सिर्फ़ एक स्लाइस वाला डोनट चार्ट है, तो स्लाइस के बीच में डोनट का छेद हो सकता है. उस स्थिति में, लेबल का रंग बदलें:

विकल्प

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

पूरा एचटीएमएल

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

पाई चार्ट को घुमाना

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

यहां, हमने pieStartAngle: 100 को विकल्प के साथ चार्ट को घड़ी की दिशा में 100 डिग्री घुमाया. (इसलिए यह खास इसलिए चुना गया है क्योंकि इससे स्लाइस में "इटैलियन" लेबल फ़िट हो जाता है.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

स्लाइस एक्सप्लोर करना

आप slices विकल्प की offset प्रॉपर्टी से पाई के बाकी हिस्सों को अलग कर सकते हैं:

किसी स्लाइस को अलग करने के लिए, slices ऑब्जेक्ट बनाएं और सही स्लाइस नंबर 0 और 1 के बीच offset असाइन करें. नीचे, हमने 4 (गुजराती), 12 (मराठी), 14 (ओरिया), और 15 (पंजाबी) को क्रम में और बड़े ऑफ़सेट दिए हैं:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

स्लाइस हटाना

किसी स्लाइस को छोड़ने के लिए, रंग को 'transparent' में बदलें:

हमने चार्ट को 135 डिग्री घुमाने के लिए pieStartAngle का, स्लाइस से टेक्स्ट हटाने के लिए pieSliceText और टूलटिप को बंद करने के लिए tooltip.trigger का इस्तेमाल किया:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

स्लाइस दिखाई देने की सीमा

आप पाई स्लाइस को अलग-अलग रेंडर करने के लिए, थ्रेशोल्ड के तौर पर कोई वैल्यू सेट कर सकते हैं. यह वैल्यू, चार्ट के एक हिस्से से मेल खाती है (जिसका पूरा चार्ट, वैल्यू 1 है). अगर थ्रेशोल्ड को प्रतिशत के रूप में सेट करना है, तो अपनी पसंद के प्रतिशत को 100 से भाग दें (20% थ्रेशोल्ड के लिए, वैल्यू 0.2 होगी).

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

इस थ्रेशोल्ड से छोटे किसी भी स्लाइस को एक "अन्य" स्लाइस में जोड़ दिया जाएगा और उसमें सभी स्लाइस का थ्रेशोल्ड, थ्रेशोल्ड से नीचे होगा.

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

लोड हो रहा है

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

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

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

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

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

पंक्तियां: टेबल की हर पंक्ति में एक स्लाइस दिखती है.

कॉलम:

	कॉलम 0	स्तंभ 1	...	कॉलम N (ज़रूरी नहीं)
मकसद:	स्लाइस लेबल	स्लाइस वैल्यू	...	वैकल्पिक भूमिकाएं
डेटा टाइप:	स्ट्रिंग	संख्या	...
भूमिका:	डोमेन	डेटा	...
कॉलम की भूमिकाएं:	कोई नहीं	कोई नहीं	...	टूलटिप

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

नाम
बैकग्राउंड का रंग	चार्ट के मुख्य हिस्से का बैकग्राउंड कलर. एचटीएमएल रंग की कोई सामान्य स्ट्रिंग हो सकती है. उदाहरण के लिए: `'red'` या `'#00cc00'`. इसके अलावा, यह भी हो सकता है कि यहां बताई गई प्रॉपर्टी वाला कोई ऑब्जेक्ट हो. टाइप: स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट: 'सफ़ेद'
बैकग्राउंड का रंग	चार्ट के बॉर्डर का रंग, एचटीएमएल कलर स्ट्रिंग के तौर पर. टाइप: स्ट्रिंग डिफ़ॉल्ट: '#666'
पृष्ठभूमिरंग.स्ट्रोकचौड़ाई	बॉर्डर की चौड़ाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: 0
बैकग्राउंड का रंग भरें	चार्ट, एचटीएमएल कलर स्ट्रिंग के तौर पर रंग भरता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'सफ़ेद'
चार्टक्षेत्र	सदस्यों के साथ एक ऑब्जेक्ट, जो चार्ट एरिया (जहां कि चार्ट खुद बनाया जाता है) के प्लेसमेंट और साइज़ को कॉन्फ़िगर करने के लिए इस्तेमाल किया जा सकता है. हालांकि, ऐक्सिस और लेजेंड को शामिल नहीं किया जा सकता. इसके लिए दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं: कोई संख्या या कोई संख्या और उसके बाद %. साधारण संख्या किसी मान को पिक्सल में दिखाती है और संख्या के बाद % होता है. उदाहरण: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
चार्टएरिया.बैकग्राउंड का रंग	चार्ट एरिया बैकग्राउंड का रंग. स्ट्रिंग का इस्तेमाल करने पर, यह हेक्स स्ट्रिंग हो सकती है (उदाहरण के लिए, '#fdc') या अंग्रेज़ी रंग का नाम. जब किसी ऑब्जेक्ट का इस्तेमाल किया जाता है, तो ये प्रॉपर्टी दी जा सकती हैं: `stroke`: रंग, हेक्स स्ट्रिंग या अंग्रेज़ी रंग के नाम के तौर पर दिया जाता है. `strokeWidth`: दिए जाने पर, दी गई चौड़ाई के चार्ट एरिया (और `stroke` रंग के साथ) के चारों ओर एक बॉर्डर बनाता है. टाइप: स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट: 'सफ़ेद'
चार्टएरिया	चार्ट को बाएं बॉर्डर से कितनी दूर बनाना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट को ऊपर की सीमा से कितना दूर बनाना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट एरिया की चौड़ाई. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरीयल ऊंचाई	चार्ट एरिया की ऊंचाई. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
कलर	चार्ट एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग की श्रेणी, जहां हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग होता है, उदाहरण के लिए: `colors:['red','#004411']`. टाइप: स्ट्रिंग की कैटगरी डिफ़ॉल्ट: डिफ़ॉल्ट रंग
इंटरैक्शन की सुविधा चालू करें	चार्ट, उपयोगकर्ता-आधारित इवेंट दिखाता है या उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देता है. अगर गलत है, तो चार्ट 'चुनें' या दूसरे इंटरैक्शन-आधारित इवेंट नहीं करेगा (लेकिन तैयार या गड़बड़ी वाले इवेंट को कराएगा), और उपयोगकर्ता के इनपुट के आधार पर होवर टेक्स्ट या दूसरे तरीके से नहीं दिखाएगा. टाइप: बूलियन डिफ़ॉल्ट: true
फ़ॉन्ट का साइज़	चार्ट में मौजूद सभी टेक्स्ट का डिफ़ॉल्ट फ़ॉन्ट साइज़, पिक्सल में. इसे खास चार्ट एलिमेंट की प्रॉपर्टी का इस्तेमाल करके बदला जा सकता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
फ़ॉन्ट का नाम	चार्ट के सभी टेक्स्ट के लिए, डिफ़ॉल्ट फ़ॉन्ट फ़ेस. इसे खास चार्ट एलिमेंट की प्रॉपर्टी का इस्तेमाल करके बदला जा सकता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: '{8/}'
फ़ोर्सआईफ़्रेम	चार्ट को इनलाइन फ़्रेम के अंदर दिखाता है. (ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है; सभी IE8 चार्ट को i-frame में बनाया गया है.) टाइप: बूलियन डिफ़ॉल्ट: गलत
ऊंचाई	चार्ट की ऊंचाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
is3D	अगर सही है, तो तीन डाइमेंशन वाला चार्ट दिखता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
लेजेंड	लेजेंड के अलग-अलग पहलुओं को कॉन्फ़िगर करने वाला एक ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
लेजेंड.संरेखण	लेजेंड का अलाइनमेंट. इनमें से कोई एक हो सकता है: 'शुरू करें' - लेजेंड के लिए असाइन किए गए इलाके की शुरुआत के हिसाब से अलाइन किया गया. 'center' - लीजेंड के लिए आवंटित क्षेत्र में केंद्रित. 'end' - लीजेंड के लिए आबंटित क्षेत्र के अंत में संरेखित. शुरू करने, बीच में, और खत्म होने से यह तय होता है कि लेजेंड- स्टाइल, वर्टिकल या हॉरिज़ॉन्टल है. उदाहरण के लिए, 'दाएं' लेजेंड में, 'शुरू' और 'आखिर', क्रम में सबसे ऊपर और सबसे नीचे होते हैं; 'ऊपर' लेजेंड के लिए, 'शुरू' और 'आखिर', जगह के बाईं और दाईं ओर होंगे. डिफ़ॉल्ट वैल्यू, लेजेंड की जगह पर निर्भर करती है. 'निचले' लेजेंड के लिए, डिफ़ॉल्ट रूप से 'center' होता है और दूसरा लेजेंड 'start' होता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: अपने-आप
लेजेंड.स्थिति	लेजेंड की जगह. इनमें से कोई एक हो सकता है: 'नीचे' - चार्ट के नीचे लेजेंड दिखाता है. 'लेबल' - स्लाइस को उनके डेटा मान से जोड़ने वाली लाइनें बनाता है. 'बायां' - चार्ट के बाईं ओर लेजेंड दिखाता है. 'कोई नहीं' - कोई लेजेंड नहीं. 'दाएं' - चार्ट के लेजेंड को दाईं ओर दिखाता है. 'top' - चार्ट के ऊपर लेजेंड दिखाता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'दाएं'
लेजेंड.ज़्यादा से ज़्यादा लाइनें	लेजेंड में लाइनों की ज़्यादा से ज़्यादा संख्या. अपने लेजेंड में लाइन जोड़ने के लिए, इसे ऐसी संख्या पर सेट करें जो एक से ज़्यादा हो. ध्यान दें: रेंडर की गई लाइनों की असल संख्या को तय करने के लिए, जिस लॉजिक का इस्तेमाल किया गया है वह अब भी फ़्लक्स है. यह विकल्प अभी सिर्फ़ तभी काम करता है, जब लेजेंड.पोज़िशन 'सबसे ऊपर' हो. टाइप: नंबर डिफ़ॉल्ट: 1
लेजेंड.टेक्स्टस्टाइल	ऐसा ऑब्जेक्ट जो लेजेंड टेक्स्ट की स्टाइल बताता है. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: `'red'` या `'#00cc00'`. `fontName` और `fontSize` भी देखें. टाइप: ऑब्जेक्ट डिफ़ॉल्ट: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
पाईहोल	अगर 0 और 1 के बीच कोई डोनट चार्ट है, तो यह दिखाया जाता है. चार्ट के दायरे में `number` के बराबर छेद है. टाइप: नंबर डिफ़ॉल्ट: 0
पाईस्लाइसबॉर्डरकलर	स्लाइस के बॉर्डर का रंग. यह सिर्फ़ तब लागू होता है, जब चार्ट दो डाइमेंशन वाला होता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'सफ़ेद'
पाईस्लाइस टेक्स्ट	स्लाइस पर दिखाए गए टेक्स्ट का कॉन्टेंट. इनमें से कोई एक हो सकता है: 'प्रतिशत' - कुल में से स्लाइस आकार का प्रतिशत. 'वैल्यू' - स्लाइस का क्वांटिटेटिव मान. 'लेबल' - स्लाइस का नाम. 'कोई नहीं' - कोई टेक्स्ट नहीं दिखाया जाता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'प्रतिशत'
पाईस्लाइसटेक्स्टस्टाइल	स्लाइस टेक्स्ट की स्टाइल बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: {color: <string>, fontName: <string>, fontSize: <number>} `color` कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: `'red'` या `'#00cc00'`. `fontName` और `fontSize` भी देखें. टाइप: ऑब्जेक्ट डिफ़ॉल्ट: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
पाई स्टार्ट ऐंगल	वह कोण, जो डिग्री में है. इसके बाद, चार्ट को घुमाएं. `0` का डिफ़ॉल्ट हिस्सा, पहले स्लाइस के सबसे बाएं किनारे को सीधे ऊपर की ओर संकेत करेगा. टाइप: नंबर डिफ़ॉल्ट: `0`
रिवरकैटगरी श्रेणियां	सही होने पर, स्लाइस को घड़ी की उल्टी दिशा में खींचता है. डिफ़ॉल्ट रूप से, घड़ी की दिशा में ड्रॉ किया जाता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
पाईरेसिड्यूस्लाइसकलर	कॉम्बिनेशन स्लाइस का रंग, जिसमें स्लाइस की दिखने की सीमा से नीचे के सभी स्लाइस होते हैं. टाइप: स्ट्रिंग डिफ़ॉल्ट: '#ccc'
पाईरेसिड्यूस्लाइसलेबल	कॉम्बिनेशन स्लाइस का एक लेबल जिसमें स्लाइस की दिखने की सीमा से नीचे की सभी स्लाइस शामिल होती हैं. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'अन्य'
स्लाइस	ऑब्जेक्ट की कलेक्शन, जिसमें पाई में मौजूद मिलते-जुलते स्लाइस का फ़ॉर्मैट बताया गया है. किसी स्लाइस के लिए डिफ़ॉल्ट मान का इस्तेमाल करने के लिए, एक खाली ऑब्जेक्ट (उदाहरण के लिए, `{}` अगर कोई स्लाइस या वैल्यू नहीं दी गई है, तो ग्लोबल वैल्यू का इस्तेमाल किया जाएगा. हर ऑब्जेक्ट नीचे दी गई प्रॉपर्टी के साथ काम करता है: `color` - इस स्लाइस के लिए इस्तेमाल किया जाने वाला रंग. मान्य एचटीएमएल कलर स्ट्रिंग बताएं. `offset` - स्लाइस को पाई से बाकी हिस्से से अलग करने के लिए, 0.0 (बिलकुल नहीं) को 1.0 (पाई का दायरा) पर सेट करें. `textStyle` - इस स्लाइस के लिए ग्लोबल `pieSliceTextStyle` को बदल देता है. आपके पास ऑब्जेक्ट के कलेक्शन के लिए एक क्रम तय करने का विकल्प होता है. इनमें से हर एक ऑब्जेक्ट, दिए गए क्रम में स्लाइस पर लागू होता है या फिर आपके पास एक ऐसा ऑब्जेक्ट तय करने का विकल्प होता है जिसमें हर बच्चे के पास संख्या वाली एक कुंजी होती है. इससे पता चलता है कि वह कौनसी जगह पर लागू होती है. उदाहरण के लिए, नीचे दी गई दो सूचनाएं एक जैसी हैं. इनमें पहली स्लाइस को 'काला' और चौथे को लाल के तौर पर बताया गया है: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} टाइप: ऑब्जेक्ट की कैटगरी या नेस्टेड ऑब्जेक्ट वाली ऑब्जेक्ट डिफ़ॉल्ट: {}
स्लाइस दृश्यता सीमा	पाई का फ़्रैक्शनल मान, जिसके नीचे कोई हिस्सा अलग-अलग नहीं दिखेगा. इस सीमा को पार नहीं करने वाले सभी स्लाइस को एक "अन्य" स्लाइस में जोड़ दिया जाएगा, जिसका साइज़ उनके सभी साइज़ का योग होगा. डिफ़ॉल्ट रूप से, स्क्रीन का कोई भी हिस्सा {0/} डिग्री से कम का नहीं होना चाहिए. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 टाइप: नंबर डिफ़ॉल्ट: आधी डिग्री (.5/360 या 1/720 या .0014)
शीर्षक	चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट. टाइप: स्ट्रिंग डिफ़ॉल्ट: कोई शीर्षक नहीं
शीर्षक टेक्स्ट स्टाइल	शीर्षक टेक्स्ट की शैली बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: `'red'` या `'#00cc00'`. `fontName` और `fontSize` भी देखें. टाइप: ऑब्जेक्ट डिफ़ॉल्ट: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
टूलटिप	कई टूलटिप एलिमेंट को कॉन्फ़िगर करने के लिए, ऑब्जेक्ट वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी तय करने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {textStyle: {color: '#FF0000'}, showColorCode: true} टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
टूलटिप.ध्यान न दें	अगर इसे `true` पर सेट किया जाता है, तो चार्ट के ड्रॉइंग को चार्ट के बाउंड की सीमा के बाहर फ़्लो करने की अनुमति मिलती है. ध्यान दें: यह सिर्फ़ एचटीएमएल टूलटिप पर लागू होता है. अगर इसे SVG टूलटिप के साथ चालू किया जाता है, तो चार्ट की सीमाओं के बाहर मौजूद किसी भी ओवरफ़्लो को काट दिया जाएगा. ज़्यादा जानकारी के लिए, टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना देखें. टाइप: बूलियन डिफ़ॉल्ट: गलत
टूलटिप	अगर इस नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल-रेंडर किया गया (SVG-रेंडरिंग के बजाय) टूलटिप का इस्तेमाल करें. ज़्यादा जानकारी के लिए, टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना देखें. ध्यान दें: टूलटिप कॉलम डेटा भूमिका के ज़रिए, एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करता. टाइप: बूलियन डिफ़ॉल्ट: गलत
टूलटिप	सही होने पर, टूलटिप में स्लाइस की जानकारी के बगल में रंगीन स्क्वेयर दिखाएं. टाइप: बूलियन डिफ़ॉल्ट: गलत
टूलटिप	पाई पाई के स्लाइस पर माउस घुमाते समय दिखने वाली जानकारी. ये वैल्यू इस्तेमाल की जा सकती हैं: 'दोनों' - [डिफ़ॉल्ट] स्लाइस का पूरा मान और पूरे का प्रतिशत दिखाएं. 'वैल्यू' - सिर्फ़ स्लाइस का पूरा मान दिखाता है. 'प्रतिशत' - स्लाइस द्वारा केवल पूरे प्रतिनिधित्व का प्रतिशत दिखाएं. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'दोनों'
टूलटिप	टूलटिप टेक्स्ट की स्टाइल के बारे में बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: `'red'` या `'#00cc00'`. `fontName` और `fontSize` भी देखें. टाइप: ऑब्जेक्ट डिफ़ॉल्ट: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
टूलटिप	जिस उपयोगकर्ता इंटरैक्शन की वजह से टूलटिप दिखता है: 'फ़ोकस' - जब उपयोगकर्ता एलिमेंट पर कर्सर घुमाता है, तो टूलटिप दिखता है. 'कोई नहीं' - टूलटिप नहीं दिखाया जाएगा. 'चुना हुआ' - जब उपयोगकर्ता एलिमेंट चुनता है, तो टूलटिप दिखता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'फ़ोकस'
width	चार्ट की चौड़ाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
`draw(data, options)`	चार्ट ड्रॉ करता है. चार्ट में, `ready`इवेंट के चालू होने के बाद ही दूसरे तरीके से कॉल किए जा सकते हैं. `Extended description`. सामान लौटाने का टाइप: कोई नहीं
`getAction(actionID)`	अनुरोध की गई `actionID` के साथ टूलटिप कार्रवाई ऑब्जेक्ट दिखाता है. सामान लौटाने का टाइप: ऑब्जेक्ट
`getBoundingBox(id)`	चार्ट एलिमेंट की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाले ऑब्जेक्ट को दिखाता है `id`. `id` के फ़ॉर्मैट को अभी तक दस्तावेज़ में शामिल नहीं किया गया है (ये इवेंट हैंडलर की रिटर्न वैल्यू हैं), लेकिन यहां कुछ उदाहरण दिए गए हैं: `var cli = chart.getChartLayoutInterface();` चार्ट एरिया की ऊंचाई `cli.getBoundingBox('chartarea').height` किसी बार या कॉलम चार्ट की पहली सीरीज़ में तीसरे बार की चौड़ाई `cli.getBoundingBox('bar#0#2').width` पाई चार्ट की पांचवीं खूंटी (वेज) वाला बॉक्स `cli.getBoundingBox('slice#4')` किसी वर्टिकल (उदाहरण, कॉलम) चार्ट के चार्ट डेटा के चारों ओर मौजूद बॉक्स: `cli.getBoundingBox('vAxis#0#gridline')` हॉरिज़ॉन्टल (उदाहरण के लिए, बार) चार्ट के चार्ट डेटा के चारों ओर मौजूद बॉक्स: `cli.getBoundingBox('hAxis#0#gridline')` वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getChartAreaBoundingBox()`	चार्ट कॉन्टेंट के बाएं, ऊपर, चौड़ाई, और ऊंचाई वाले ऑब्जेक्ट को दिखाता है (यानी, लेबल और लेजेंड को छोड़कर): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getChartLayoutInterface()`	ऑब्जेक्ट को चार्ट के ऑनस्क्रीन प्लेसमेंट और उसके एलिमेंट के बारे में जानकारी देता है. दिए गए ऑब्जेक्ट पर, इन तरीकों को कॉल किया जा सकता है: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getHAxisValue(xPosition, optional_axis_index)`	`xPosition` पर मौजूद हॉरिज़ॉन्टल डेटा वैल्यू दिखाता है, जो चार्ट कंटेनर के बाएं किनारे से पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकती है. उदाहरण: `chart.getChartLayoutInterface().getHAxisValue(400)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getImageURI()`	चार्ट को चित्र यूआरआई के रूप में क्रमांकित करता है. इसे चार्ट बनाने के बाद कॉल करें. PNG चार्ट प्रिंट करना देखें. सामान लौटाने का टाइप: स्ट्रिंग
`getSelection()`	चुनी गई चार्ट इकाइयों की श्रेणी दिखाता है. चुनिंदा इकाइयां, स्लाइस और लेजेंड एंट्री हैं. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई को चुना जा सकता है. `Extended description` . लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
`getVAxisValue(yPosition, optional_axis_index)`	वर्टिकल डेटा वैल्यू `yPosition` पर दिखाता है. यह चार्ट कंटेनर के सबसे ऊपरी किनारे से नीचे की ओर, पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकती है. उदाहरण: `chart.getChartLayoutInterface().getVAxisValue(300)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getXLocation(dataValue, optional_axis_index)`	चार्ट के कंटेनर के बाएं किनारे के मुकाबले `dataValue` का पिक्सल x-कोऑर्डिनेट दिखाता है. उदाहरण: `chart.getChartLayoutInterface().getXLocation(400)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getYLocation(dataValue, optional_axis_index)`	चार्ट के कंटेनर के ऊपरी किनारे की तुलना में `dataValue` का पिक्सल y-कोऑर्डिनेट दिखाता है. उदाहरण: `chart.getChartLayoutInterface().getYLocation(300)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`removeAction(actionID)`	अनुरोध किए गए `actionID` से टूलटिप कार्रवाई को हटा देता है. सामान लौटाने का टाइप: `none`
`setAction(action)`	जब उपयोगकर्ता कार्रवाई के टेक्स्ट पर क्लिक करता है, तो होने वाली कार्रवाई के लिए एक टूलटिप सेट करता है. `setAction` का तरीका, ऑब्जेक्ट को उसके कार्रवाई पैरामीटर के तौर पर लेता है. इस ऑब्जेक्ट में तीन प्रॉपर्टी होनी चाहिए: `id`— सेट की जा रही कार्रवाई का आईडी `text`, वह टेक्स्ट जिसे कार्रवाई के लिए टूलटिप में दिखना चाहिए और `action` वह फ़ंक्शन जो उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर चलता है. चार्ट के `draw()` तरीके को कॉल करने से पहले, सभी और सभी टूलटिप कार्रवाइयां सेट कर दी जानी चाहिए. ज़्यादा जानकारी. सामान लौटाने का टाइप: `none`
`setSelection()`	चार्ट की दी गई इकाइयों को चुनें. पहले चुने गए को रद्द करता है. चुनिंदा इकाइयां, स्लाइस और लेजेंड एंट्री हैं. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई को चुना जा सकता है. `Extended description` . सामान लौटाने का टाइप: कोई नहीं
`clearChart()`	चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है. सामान लौटाने का टाइप: कोई नहीं

इवेंट

इन इवेंट को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, बुनियादी इंटरैक्शन, इवेंट मैनेज करना, और इवेंट सक्रिय करना देखें.

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

डेटा नीति

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