התאמה אישית של צירים

  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.
דיסקרטי / רציף סוג העמודה הראשונה דוגמה
נפרד string
מתמשך number
מתמשך תאריך

קנה מידה של ציר

ניתן להגדיר את קנה המידה של ציר באמצעות האפשרות scaleType. לדוגמה, כדי להגדיר את קנה המידה של הציר האנכי ליומני רישום, יש להשתמש באפשרות הבאה:

  vAxis: {
        scaleType: 'log'
  }

תרשים הקו הבא מציג את הצמיחה של אוכלוסיית העולם בסולם לינארי (רגיל) ובקנה מידה לוגריתמי.

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