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

  1. סקירה כללית
  2. הסבר על המונח
  3. דיסקרטי לעומת רציף
  4. קנה מידה של ציר
  5. פורמטים של מספרים

סקירה כללית

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

כשיוצרים תרשים עם צירים, אפשר להתאים אישית חלק מהתכונות שלהם:

  • דיסקרטי לעומת רציף
  • כיוון - ניתן להתאים אישית את הכיוון באמצעות האפשרות hAxis/vAxis.direction.
  • מיקום וסגנון של תוויות - ניתן להתאים אישית את המיקום והסגנון של תוויות באמצעות האפשרויות hAxis/vAxis.textPosition ו-hAxis/vAxis.textStyle.
  • טקסט וסגנון של כותרת ציר - ניתן להתאים אישית את הטקסט והסגנון של כותרת הציר באמצעות האפשרויות hAxis/vAxis.title ו-hAxis/vAxis.titleTextStyle.
  • סולם ציר - אפשר להגדיר את קנה המידה של הציר לקנה מידה לוגריתמי (log) באמצעות האפשרויות hAxis/vAxis.logScale או hAxis/vAxis.scaleType.
  • לרשימה מלאה של אפשרויות ההגדרה של הצירים, עיינו באפשרויות 'ציר' ו'ציר' במסמכי התיעוד של התרשים הספציפי.

הסבר על המונח

ציר ראשי/ציר משני:

  • הציר הראשי הוא הציר לאורך הכיוון הטבעי של התרשים. זהו הציר האופקי, עבור תרשימים של קו, שטח, עמודות, שילוב, שטח מדורג ופמוט. בתרשים עמודות מדובר בתרשים האנכי. בתרשימי פיזור ובתרשימי עוגה אין ציר ראשי.
  • הציר הקטין הוא הציר השני.

ציר בדיד/רציף:

  • ציר נפרד מכיל מספר סופי של ערכים המרווחים באופן שווה, שנקרא 'קטגוריות'.
  • לציר רציף יש מספר אינסופי של ערכים אפשריים.

דיסקרטי לעומת רציף

הציר הראשי של תרשים יכול להיות בדיד או רציף. כשמשתמשים בציר נפרד, נקודות הנתונים של כל סדרה מחולקות באופן שווה לאורך הציר, בהתאם לאינדקס השורות שלהן. כשמשתמשים בציר רציף, נקודות הנתונים ממוקמות בהתאם לערך הדומיין שלהן.

גם התיוג שונה. בציר נפרד, שמות הקטגוריות (שמצוינים בעמודת הדומיין של הנתונים) משמשים כתוויות. בציר רציף, התוויות נוצרות באופן אוטומטי: בתרשים מוצגים קווי רשת במרווחים שווים, כאשר לכל קו רשת יש תווית בהתאם לערך שהוא מייצג.

הצירים הבאים הם תמיד רציפים:

  • שני הצירים של תרשימי בועות.
  • הציר המשני.

בתרשימים מסוג קו, שטח, עמודות אופקיות, עמודות ופמוטים (ובתרשימים משולבים שכוללים רק סדרות כאלה), אפשר לשלוט בסוג הציר הראשי:

  • כדי ליצור ציר נפרד, צריך להגדיר את סוג עמודת הנתונים בתור string.
  • עבור ציר רציף, צריך להגדיר את סוג עמודת הנתונים לאחת מהאפשרויות הבאות: number, date, datetime או timeofday.
דיסקרטי / רציף סוג העמודה הראשונה דוגמה
בדיד string
רציף number
רציף date

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

אפשר להגדיר את הגודל של ציר באמצעות האפשרות 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>