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

ऐक्सिस को पसंद के मुताबिक बनाना

खास जानकारी
शब्दावली
अलग-अलग बिड बनाम लगातार वैल्यू
ऐक्सिस स्केल
नंबर फ़ॉर्मैट

खास जानकारी

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

ऐक्सिस की मदद से चार्ट बनाते समय, उनकी कुछ प्रॉपर्टी को पसंद के मुताबिक बनाया जा सकता है:

अलग-अलग बिड बनाम लगातार वैल्यू
दिशा - आप hAxis/vAxis.direction विकल्प का इस्तेमाल करके दिशा को अपनी पसंद के मुताबिक बना सकते हैं.
लेबल की पोज़िशन और स्टाइल - आपके पास hAxis/vAxis.textPosition और hAxis/vAxis.textStyle विकल्पों का इस्तेमाल करके, लेबल की पोज़िशन और स्टाइल को अपनी पसंद के मुताबिक बनाने का विकल्प होता है.
ऐक्सिस टाइटल का टेक्स्ट और स्टाइल - आपके पास hAxis/vAxis.title और hAxis/vAxis.titleTextStyle विकल्पों का इस्तेमाल करके, ऐक्सिस के टाइटल का टेक्स्ट और स्टाइल को पसंद के मुताबिक बनाने का विकल्प होता है.
ऐक्सिस का स्केल - hAxis/vAxis.logScale या hAxis/vAxis.ScaleType विकल्पों का इस्तेमाल करके, किसी ऐक्सिस को लॉगारिद्मिक (लॉग) स्केल पर सेट किया जा सकता है.
ऐक्सिस कॉन्फ़िगरेशन के विकल्पों की पूरी सूची देखने के लिए, अपने चार्ट के दस्तावेज़ में hAxis और vAxis विकल्प देखें.

शब्दावली

मेजर/माइनर ऐक्सिस:

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

डिस्क्रीट/कंटिन्यूअस ऐक्सिस:

अलग-अलग ऐक्सिस में, समान दूरी वाली वैल्यू की संख्या सीमित होती है. इन्हें कैटगरी कहा जाता है.
लगातार ऐक्सिस में संभावित वैल्यू की संख्या अनगिनत होती है.

अलग-अलग विज्ञापन फ़ॉर्मैट बनाम लगातार विज्ञापन

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

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

ये ऐक्सिस हमेशा एक जैसे होते हैं:

बबल चार्ट के दोनों ऐक्सिस.
माइनर ऐक्सिस.

लाइन, एरिया, बार, कॉलम, और कैंडलस्टिक चार्ट (और सिर्फ़ ऐसी सीरीज़ वाले कॉम्बो चार्ट) में, मुख्य ऐक्सिस के टाइप को कंट्रोल किया जा सकता है:

अलग ऐक्सिस के लिए, डेटा कॉलम टाइप को string पर सेट करें.
निरंतर ऐक्सिस के लिए, डेटा कॉलम के टाइप को इनमें से किसी एक पर सेट करें: number, date, datetime या timeofday.

डिस्क्रीट / कंटिन्यूअस	पहले कॉलम का टाइप	उदाहरण
अलग-अलग	स्ट्रिंग
लगातार	नंबर
लगातार	date

ऐक्सिस स्केल

scaleType विकल्प का इस्तेमाल करके, ऐक्सिस का स्केल सेट किया जा सकता है. उदाहरण के लिए, लॉग स्केल पर वर्टिकल ऐक्सिस का स्केल सेट करने के लिए, नीचे दिए गए विकल्प का इस्तेमाल करें:

  vAxis: {
        scaleType: 'log'
  }

नीचे दिया गया लाइन चार्ट, लीनियर (स्टैंडर्ड) और लॉग स्केल, दोनों में दुनिया की जनसंख्या में हुई बढ़ोतरी को दिखाता है.

अगर आपके डेटा में शून्य या नेगेटिव वैल्यू हैं, तो scaleType: 'mirrorLog' विकल्प का इस्तेमाल करके पॉइंट प्लॉट किए जा सकते हैं. मिरर लॉग स्केल में, नेगेटिव नंबर की प्लॉट की गई वैल्यू में, उस संख्या के निरपेक्ष मान के लॉग को घटाना होता है. 0 के करीब की वैल्यू को लीनियर स्केल पर दिखाया जाता है.

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

नंबर फ़ॉर्मैट

hAxis.format और vAxis.format की मदद से, लेबल नंबर की फ़ॉर्मैटिंग को कंट्रोल किया जा सकता है. उदाहरण के लिए, {hAxis: { format:'#,###%'} }, 10, 7.5, और 0.5 वैल्यू के लिए "1,000%", "750%", और "50%" वैल्यू दिखाता है. इनमें से कोई भी प्रीसेट सेट किया जा सकता है:

{format: 'none'}: बिना किसी फ़ॉर्मैट के नंबर दिखाता है (जैसे, 80,00,000)
{format: 'decimal'}: यह हज़ार की संख्या को अलग करने वाले सेपरेटर वाली संख्याओं को दिखाता है (जैसे, 80,00,000)
{format: 'scientific'}: यह संख्याओं को वैज्ञानिक नोटेशन में दिखाता है (जैसे, 8e6)
{format: 'currency'}: स्थानीय मुद्रा में नंबर दिखाता है (जैसे, 80,00,000.00 डॉलर)
{format: 'percent'}: संख्याओं को प्रतिशत के रूप में दिखाता है (उदाहरण के लिए, 80,00,00,000%)
{format: 'short'}: छोटे किए गए नंबर दिखाता है (जैसे, 80 लाख)
{format: 'long'}: संख्याओं को पूरे शब्दों के तौर पर दिखाता है (जैसे, 80 लाख)

नीचे दिए गए चार्ट में, प्रीसेट में से कोई भी चुना जा सकता है:

ऊपर दिए गए चार्ट के लिए एक पूरा वेब पेज दिखाई देगा.

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

function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };

<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(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

टेक्स्ट (उदाहरण के लिए, long फ़ॉर्मैट, जिसमें 80,00,000 को "80 लाख" के रूप में रेंडर किया जाता है) का इस्तेमाल करते समय, 'Google चार्ट लाइब्रेरी' को लोड करते समय भाषा कोड तय करके स्ट्रिंग को दूसरी भाषाओं में स्थानीय भाषा में बदला जा सकता है. उदाहरण के लिए, "8000 करोड़" को रूस में "8 милиона" करने के लिए, लाइब्रेरी को इस तरह कॉल करें:

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