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

  1. खास जानकारी
  2. शब्दावली
  3. अलग बनाम लगातार
  4. ऐक्सिस स्केल
  5. नंबर फ़ॉर्मैट

खास जानकारी

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

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

  • अलग बनाम लगातार
  • दिशा - 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'
  }

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

पर क्लिक करें.

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

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

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

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

ऊपर दिए गए चार्ट का पूरा वेब पेज इस तरह है.

<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 कोड लाइब्रेरी लोड करते समय भाषा कोड तय करके, स्ट्रिंग को दूसरी भाषाओं में स्थानीय भाषा में बदला जा सकता है. उदाहरण के लिए, "80 लाख" को रशियन "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>