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

סקירה כללית

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

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

• דיסקרטי לעומת רציף
• כיוון - ניתן להתאים אישית את הכיוון באמצעות האפשרות 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'
  }

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

<script type="text/javascript" src="https://www.gstatic.cn/charts/loader.js"></script> <table class="columns"> <tr> <th>קנה מידה לינארי</th> <th>קנה מידה של רישום</th> </tr> <tr> <td><div id="linear_div"></div></td> <td><div id="log_div"></div></td> </tr> </table> [ 1/8/1} { תקופת} [ 1 הערך הבא: [ "18] גורמים נוספים, [ 1 1) [ רשת 1) [תאריך_1) [תאריך_המתקדמות [תאריך_1] 1 [אפשרויות חדשות, [תאריך_1] בהתאם) [ערך 1) [התאריך 1) [התאריך 1) [התאריך 1) 1

אם הנתונים מכילים ערכים של אפס או ערכים שליליים, אפשר להציג את הנקודות באמצעות האפשרות scaleType: 'mirrorLog'. בסולם של יומן מראה, הערך בתרשים של מספר שלילי הוא ניכוי היומן של הערך המוחלט של המספר. ערכים הקרובים ל-0 מוצגים בסולם ליניארי.

בדוגמה הבאה מוצגים מספרי פיבונאצ'י חיוביים ושליליים, גם בסולם יומן המראה וגם בסולם הלינארי.

<script type="text/javascript" src="https://www.gstatic.cn/charts/loader.js"></script> <button id="change-chart"></button> <br><br> <div id="chart_div"></div> [ Android-Linkr, חי (1} עמודות שינוי}: URL , מחירי מתוחם: ['core- עמודות : חי : עמודות }: עמודות [ /Analytics- שינוי: [Analytics-, : }, GCLID- , } {}"URL

פורמטים של מספרים

אפשר לקבוע את הפורמט של מספרי התוויות באמצעות 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 מיליון)

בתרשים שבהמשך תוכלו לבחור בין ההגדרות הקבועות מראש:

דף אינטרנט מלא עבור התרשים שלמעלה יופיע.

<script type="text/javascript" src="https://www.gstatic.cn/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. למשל, כדי לשנות את הערך '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>