এই পৃষ্ঠাটি 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 ।

বিচ্ছিন্ন / অবিচ্ছিন্ন	প্রথম কলামের ধরন	উদাহরণ
বিচ্ছিন্ন	স্ট্রিং
একটানা	সংখ্যা
একটানা	তারিখ

অক্ষ স্কেল

আপনি স্কেল scaleType বিকল্পটি ব্যবহার করে একটি অক্ষের স্কেল সেট করতে পারেন। উদাহরণস্বরূপ, লগ স্কেলে উল্লম্ব অক্ষের স্কেল সেট করতে, নিম্নলিখিত বিকল্পটি ব্যবহার করুন:

  vAxis: {
        scaleType: 'log'
  }

নিম্নলিখিত লাইন চার্টটি রৈখিক (স্ট্যান্ডার্ড) স্কেল এবং লগ স্কেলে বিশ্বের জনসংখ্যার বৃদ্ধি দেখায়।

<span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Log Scale Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <table class="columns"> <tr> <th>Linear Scale</th> <th>Log Scale</th> </tr> <tr> <td><div id="linear_div"></div></td> <td><div id="log_div"></div></td> </tr> </table> google.charts.load('current', {'packages':['corechart', 'line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Population'); data.addRows([ [new Date(1400, 1, 1), 374], [new Date(1500, 1, 1), 460], [new Date(1600, 1, 1), 579], [new Date(1700, 1, 1), 679], [new Date(1750, 1, 1), 770], [new Date(1800, 1, 1), 954], [new Date(1850, 1, 1), 1241], [new Date(1900, 1, 1), 1633], [new Date(1910, 1, 1), 1750], [new Date(1920, 1, 1), 1860], [new Date(1930, 1, 1), 2070], [new Date(1940, 1, 1), 2300], [new Date(1950, 1, 1), 2558], [new Date(1951, 1, 1), 2595], [new Date(1952, 1, 1), 2637], [new Date(1953, 1, 1), 2682], [new Date(1954, 1, 1), 2730], [new Date(1955, 1, 1), 2782], [new Date(1956, 1, 1), 2835], [new Date(1957, 1, 1), 2891], [new Date(1958, 1, 1), 2948], [new Date(1959, 1, 1), 3001], [new Date(1960, 1, 1), 3043], [new Date(1961, 1, 1), 3084], [new Date(1962, 1, 1), 3140], [new Date(1963, 1, 1), 3210], [new Date(1964, 1, 1), 3281], [new Date(1965, 1, 1), 3350], [new Date(1966, 1, 1), 3421], [new Date(1967, 1, 1), 3490], [new Date(1968, 1, 1), 3562], [new Date(1969, 1, 1), 3637], [new Date(1970, 1, 1), 3713], [new Date(1971, 1, 1), 3790], [new Date(1972, 1, 1), 3867], [new Date(1973, 1, 1), 3942], [new Date(1974, 1, 1), 4017], [new Date(1975, 1, 1), 4089], [new Date(1976, 1, 1), 4160], [new Date(1977, 1, 1), 4232], [new Date(1978, 1, 1), 4304], [new Date(1979, 1, 1), 4379], [new Date(1980, 1, 1), 4451], [new Date(1981, 1, 1), 4534], [new Date(1982, 1, 1), 4615], [new Date(1983, 1, 1), 4696], [new Date(1984, 1, 1), 4775], [new Date(1985, 1, 1), 4856], [new Date(1986, 1, 1), 4941], [new Date(1987, 1, 1), 5027], [new Date(1988, 1, 1), 5115], [new Date(1989, 1, 1), 5201], [new Date(1990, 1, 1), 5289], [new Date(1991, 1, 1), 5372], [new Date(1992, 1, 1), 5456], [new Date(1993, 1, 1), 5538], [new Date(1994, 1, 1), 5619], [new Date(1995, 1, 1), 5699], [new Date(1996, 1, 1), 5779], [new Date(1997, 1, 1), 5858], [new Date(1998, 1, 1), 5935], [new Date(1999, 1, 1), 6012], [new Date(2000, 1, 1), 6089], [new Date(2001, 1, 1), 6165], [new Date(2002, 1, 1), 6242], [new Date(2003, 1, 1), 6319], [new Date(2004, 1, 1), 6396], [new Date(2005, 1, 1), 6473], [new Date(2006, 1, 1), 6551], [new Date(2007, 1, 1), 6630], [new Date(2008, 1, 1), 6709], [new Date(2009, 1, 1), 6788] ]); var linearOptions = { title: 'World Population Since 1400 AD in Linear Scale', legend: 'none', width: 450, height: 500, hAxis: { title: 'Date' }, vAxis: { title: 'Population (millions)', ticks: [0, 1000, 2000, 4000, 6000] } }; var logOptions = { title: 'World Population Since 1400 AD in Log Scale', legend: 'none', width: 450, height: 500, hAxis: { title: 'Date' }, vAxis: { title: 'Population (millions)', scaleType: 'log', ticks: [0, 1000, 2000, 4000, 6000] } }; var linearChart = new google.visualization.LineChart(document.getElementById('linear_div')); linearChart.draw(data, linearOptions); var logChart = new google.visualization.LineChart(document.getElementById('log_div')); logChart.draw(data, logOptions); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of Log Scale.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

যদি আপনার ডেটাতে শূন্য বা ঋণাত্মক মান থাকে, আপনি scaleType: 'mirrorLog' বিকল্পটি ব্যবহার করে পয়েন্টগুলি প্লট করতে পারেন। মিরর লগ স্কেলে, একটি ঋণাত্মক সংখ্যার প্লট করা মান হল সংখ্যাটির পরম মানের লগ বিয়োগ। 0 এর কাছাকাছি মান একটি রৈখিক স্কেলে প্লট করা হয়।

নিম্নলিখিত উদাহরণটি ধনাত্মক এবং ঋণাত্মক ফিবোনাচি সংখ্যাগুলিকে আয়না লগ স্কেল এবং রৈখিক স্কেলে প্লট করা দেখায়।

<span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Mirror Log Scale Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart"></button> <br><br> <div id="chart_div"></div> google.charts.load('current', {'packages':['corechart', 'line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Index'); data.addColumn('number', 'Fibonacci Number'); data.addRows([ [-16, -987], [-15, 610], [-14, -377], [-13, 233], [-12, -144], [-11, 89], [-10, -55], [-9, 34], [-8, -21], [-7, 13], [-6, -8], [-5, 5], [-4, -3], [-3, 2], [-2, -1], [-1, 1], [0, 0], [1, 1], [2, 1], [3, 2], [4, 3], [5, 5], [6, 8], [7, 13], [8, 21], [9, 34], [10, 55], [11, 89], [12, 144], [13, 233], [14, 377], [15, 610], [16, 987] ]); var linearOptions = { title: 'Fibonacci Numbers in Linear Scale', legend: 'none', pointSize: 5, width: 900, height: 500, hAxis: { gridlines: { count: -1 } }, vAxis: { ticks: [-1000, -500, 0, 500, 1000] } }; var mirrorLogOptions = { title: 'Fibonacci Numbers in Mirror Log Scale', legend: 'none', pointSize: 5, width: 900, height: 500, hAxis: { gridlines: { count: -1 } }, vAxis: { scaleType: 'mirrorLog', ticks: [-1000, -250, -50, -10, 0, 10, 50, 250, 1000] } }; function drawLinearChart() { var linearChart = new google.visualization.LineChart(chartDiv); linearChart.draw(data, linearOptions); button.innerText = 'Change to Mirror Log Scale'; button.onclick = drawMirrorLogChart; } function drawMirrorLogChart() { var mirrorLogChart = new google.visualization.LineChart(chartDiv); mirrorLogChart.draw(data, mirrorLogOptions); button.innerText = 'Change to Linear Scale'; button.onclick = drawLinearChart; } drawMirrorLogChart(); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of Mirror Log Scale.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

সংখ্যা বিন্যাস

আপনি hAxis.format এবং vAxis.format দিয়ে লেবেল নম্বরের বিন্যাস নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, {hAxis: { format:'#,###%'} } 10, 7.5 এবং 0.5 মানগুলির জন্য "1,000%", "750%", এবং "50%" মানগুলি প্রদর্শন করে। এছাড়াও আপনি নিম্নলিখিত যে কোনো প্রিসেট সরবরাহ করতে পারেন:

{format: 'none'} : কোন ফরম্যাটিং ছাড়াই সংখ্যা প্রদর্শন করে (যেমন, 8000000)
{format: 'decimal'} : হাজার হাজার বিভাজক সহ সংখ্যা প্রদর্শন করে (যেমন, 8,000,000)
{format: 'scientific'} : বৈজ্ঞানিক স্বরলিপিতে সংখ্যা প্রদর্শন করে (যেমন, 8e6)
{format: 'currency'} : স্থানীয় মুদ্রায় সংখ্যা প্রদর্শন করে (যেমন, $8,000,000.00)
{format: 'percent'} : সংখ্যাগুলিকে শতাংশ হিসাবে প্রদর্শন করে (যেমন, 800,000,000%)
{format: 'short'} : সংক্ষিপ্ত সংখ্যা প্রদর্শন করে (যেমন, 8M)
{format: 'long'} : সংখ্যাগুলিকে পূর্ণ শব্দ হিসাবে প্রদর্শন করে (যেমন, 8 মিলিয়ন)

নীচের চার্টে, আপনি প্রিসেটগুলির মধ্যে নির্বাচন করতে পারেন:

উপরের চার্টের জন্য একটি সম্পূর্ণ ওয়েব পৃষ্ঠা অনুসরণ করা হয়েছে।

<span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Number Format Presets Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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"> 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); }; };<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='A demonstration of the number format presets.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

<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 বিন্যাস, যা 8,000,000 কে "8 মিলিয়ন" হিসাবে রেন্ডার করবে, আপনি যখন Google চার্ট লাইব্রেরি লোড করবেন তখন একটি ভাষা কোড নির্দিষ্ট করে স্ট্রিংগুলিকে অন্য ভাষায় স্থানীয়করণ করতে পারেন। উদাহরণস্বরূপ, পরিবর্তন করতে "8 মিলিয়ন" রাশিয়ান ভাষায় "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>