تخصيص المحاور

نظرة عامة

ويتم غالبًا عرض السمات في البيانات على المحاور، أفقيًا وعموديًا. وهذا ما ينطبق على: مخطط المنطقة والمخطط الشريطي والرسم البياني للشموع والرسم البياني العمودي والرسم البياني المختلط والرسم البياني الخطي والرسم البياني المساحي المدرّج والرسم البياني المبعثر.

عند إنشاء رسم بياني باستخدام المحاور، يمكنك تخصيص بعض خصائصها:

  • المنفصلة مقابل المستمرة
  • الاتجاه - يمكنك تخصيص الاتجاه باستخدام الخيار 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'
  }

يوضح الرسم البياني الخطي التالي نمو سكان العالم في كل من المقياس الخطي (القياسي) والمقياس اللوغاريتمي.

إذا كانت بياناتك تحتوي على قيم صفرية أو سالبة، يمكنك تخطيط النقاط باستخدام الخيار scaleType: 'mirrorLog'. في مقياس اللوغارتم المطابق، تكون القيمة المرسومة لعدد سالب مطروحًا منه سجل القيمة المطلقة للرقم. يتم رسم القيم القريبة من 0 على مقياس خطي.

يوضّح المثال التالي أرقام فيبوناتشي الموجبة والسالبة رسمًا بيانيًا لمقياس اللوغاريتم المرآة والمقياس الخطي.

تنسيقات الأرقام

يمكنك التحكّم في تنسيق أرقام التصنيفات باستخدام hAxis.format وvAxis.format. على سبيل المثال، يعرض {hAxis: { format:'#,###%'} } القيم "1,000%" و"750%" و "50%" للقيم 10 و7.5 و0.5. يمكنك أيضًا توفير أي من الإعدادات المسبقة التالية:

  • {format: 'none'}: يعرض أرقامًا بدون تنسيق (مثل 8000000)
  • {format: 'decimal'}: تعرض الأرقام مع فواصل الآلاف (مثل 8,000,000)
  • {format: 'scientific'}: يعرض الأرقام بالترميز العلمي (مثل 8e6)
  • {format: 'currency'}: يعرض الأرقام بالعملة المحلية (مثل، 8,000,000.00 دولار)
  • {format: 'percent'}: يعرض الأرقام كنسب مئوية (مثل 800,000,000%)
  • {format: 'short'}: يعرض الأرقام المختصرة (مثل 8 مليون)
  • {format: 'long'}: يعرض الأرقام ككلمات كاملة (مثل 8 مليون)

في المخطط أدناه، يمكنك الاختيار من بين الإعدادات المسبقة:

في ما يلي صفحة ويب كاملة للرسم البياني أعلاه.

<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>