سفارشی کردن محورها

  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، مقیاس یک محور را روی مقیاس لگاریتمی (log) تنظیم کنید.
  • برای فهرست کاملی از گزینه‌های پیکربندی محور، به گزینه‌های hAxis و vAxis در اسناد نمودار خاص خود نگاه کنید.

واژه شناسی

محور اصلی/فرعی:

  • محور اصلی ، محور در امتداد جهت طبیعی نمودار است. برای نمودارهای خط، ناحیه، ستون، ترکیب، منطقه پله ای و نمودار شمعی، این محور افقی است. برای نمودار میله ای، نمودار عمودی است. نمودارهای پراکنده و دایره ای محور اصلی ندارند.
  • محور فرعی ، محور دیگر است.

محور گسسته/پیوسته:

  • یک محور گسسته دارای تعداد محدودی از مقادیر با فاصله مساوی است که به آنها دسته می گویند.
  • یک محور پیوسته دارای بی نهایت مقدار ممکن است.

گسسته در مقابل پیوسته

محور اصلی نمودار می تواند گسسته یا پیوسته باشد. هنگام استفاده از یک محور مجزا، نقاط داده هر سری با توجه به شاخص ردیف آنها به طور مساوی در سراسر محور قرار می گیرند. هنگام استفاده از یک محور پیوسته، نقاط داده بر اساس مقدار دامنه خود قرار می گیرند.

برچسب گذاری نیز متفاوت است. در یک محور گسسته، از نام دسته ها (مشخص شده در ستون دامنه داده ها) به عنوان برچسب استفاده می شود. در یک محور پیوسته، برچسب‌ها به طور خودکار تولید می‌شوند: نمودار خطوط شبکه با فاصله یکسان را نشان می‌دهد، جایی که هر خط شبکه با توجه به مقداری که نشان می‌دهد برچسب‌گذاری می‌شود.

محورهای زیر همیشه پیوسته هستند:

  • هر دو محور نمودارهای حبابی.
  • محور فرعی.

در نمودارهای خط، مساحت، میله، ستون و شمعدان (و نمودارهای ترکیبی که فقط شامل چنین سری‌هایی هستند)، می‌توانید نوع محور اصلی را کنترل کنید:

  • برای یک محور مجزا، نوع ستون داده را روی string تنظیم کنید.
  • برای یک محور پیوسته، نوع ستون داده را روی یکی از موارد زیر تنظیم کنید: number ، date ، datetime یا timeofday .
گسسته / پیوسته نوع ستون اول مثال
گسسته رشته
مداوم عدد
مداوم تاریخ

مقیاس محوری

با استفاده از گزینه scaleType می توانید مقیاس یک محور را تنظیم کنید. به عنوان مثال، برای تنظیم مقیاس محور عمودی به مقیاس ورود، از گزینه زیر استفاده کنید:

  vAxis: {
        scaleType: 'log'
  }

نمودار خطی زیر رشد جمعیت جهان را در دو مقیاس خطی (استاندارد) و مقیاس لگاریتی نشان می دهد.

<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); } <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); }

اگر داده های شما حاوی مقادیر صفر یا منفی است، می توانید با استفاده از گزینه scaleType: 'mirrorLog' نقاط را رسم کنید. در مقیاس لاگ آینه، مقدار رسم شده یک عدد منفی منهای ورود به سیستم قدر مطلق عدد است. مقادیر نزدیک به 0 در مقیاس خطی رسم می شوند.

مثال زیر اعداد فیبوناچی مثبت و منفی را نشان می دهد که هم در مقیاس آینه ای و هم در مقیاس خطی رسم شده اند.

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

فرمت های اعداد

می توانید قالب بندی شماره برچسب ها را با hAxis.format و vAxis.format کنترل کنید. برای مثال، {hAxis: { format:'#,###%'} } مقادیر "1000%"، "750%" و "50%" را برای مقادیر 10، 7.5 و 0.5 نمایش می دهد. شما همچنین می توانید هر یک از پیش تنظیم های زیر را ارائه دهید:

  • {format: 'none'} : اعداد را بدون قالب بندی نمایش می دهد (به عنوان مثال، 8000000)
  • {format: 'decimal'} : اعداد را با هزاران جداکننده نمایش می دهد (مثلاً 8,000,000)
  • {format: 'scientific'} : اعداد را به صورت نماد علمی نمایش می دهد (مثلاً 8e6)
  • {format: 'currency'} : اعداد را به واحد پول محلی نمایش می دهد (مثلاً 8,000,000 دلار)
  • {format: 'percent'} : اعداد را به صورت درصد نمایش می دهد (به عنوان مثال، 800,000,000%)
  • {format: 'short'} : نمایش اعداد مختصر (مثلاً 8M)
  • {format: 'long'} : اعداد را به صورت کلمات کامل نمایش می دهد (مثلاً 8 میلیون)

در نمودار زیر، می توانید از بین پیش تنظیم ها انتخاب کنید:

یک صفحه وب کامل برای نمودار بالا در زیر آمده است.

<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); }; }; <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); }; };

<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 Charts، رشته ها را به زبان های دیگر بومی سازی کنید. به عنوان مثال، برای تغییر "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>