תרשימי עמודות

סקירה כללית

תרשימי העמודות של Google מעובדים בדפדפן באמצעות SVG או VML, בהתאם לדפדפן של המשתמש. כמו בכל תרשימים של Google, תרשימי עמודות מציגים הסברים קצרים כשהמשתמש מעביר את העכבר מעל הנתונים. לגרסה אנכית של התרשים הזה, ראו את תרשים העמודות.

דוגמאות

עמודות צביעה

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

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

יש שלוש דרכים שונות לבחירת הצבעים, וטבלת הנתונים שלנו מציגה את כולם: ערכי RGB, שמות צבעים באנגלית והצהרה דמוית CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

סגנונות סרגלים

תפקיד הסגנון מאפשר לשלוט בכמה היבטים של מראה הסרגל באמצעות הצהרות דמויות CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

לא מומלץ לשלב סגנונות בצורה חופשית מדי בתוך התרשים – לבחור סגנון ולהישאר איתו. אבל כדי להדגים את כל מאפייני הסגנון, הנה דוגמה:

בשתי העמודות הראשונות יש ערך ספציפי ב-color (הראשון עם שם באנגלית, השני עם ערך RGB). לא נבחרה האפשרות opacity, ולכן נעשה שימוש בברירת המחדל של 1.0 (אטום מלא) ולכן הסרגל השני מסתיר את קו הרשת מאחוריו. בעמודה השלישית נעשה שימוש ב-opacity של 0.2 כדי לחשוף את קו הרשת. בעמודה הרביעית נעשה שימוש בשלושה מאפייני סגנון: stroke-color ו-stroke-width כדי לשרטט את הגבול, ו-fill-color כדי לציין את צבע המלבן שבתוך הדף. בעמודה השמאלית ביותר נעשה שימוש גם ב-stroke-opacity וב-fill-opacity כדי לבחור שקיפות לגבול ולמילוי:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

סרגלי תוויות

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

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

בטבלת הנתונים אנחנו מגדירים עמודה חדשה עם { role: 'annotation' } כדי לכלול את תוויות העמודות:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

המשתמשים יכולים להעביר את העכבר מעל העמודות כדי לראות את ערכי הנתונים, אבל כדאי לכלול אותם בעמודות עצמן:

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

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

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

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

ואז אפשר להתקשר אליו באמצעות calc: getValueAt.bind(undefined, 1).

אם התווית גדולה מדי ולא מתאימה במלואה לעמודה, היא תוצג בחוץ:

תרשימי עמודות אופקיים מוערם

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

כדי ליצור תרשים עמודות אופקי מוערם, מגדירים את האפשרות isStacked ל-true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

בתרשימי עמודות אופקיים יש גם תמיכה בערימה של 100%, כך שהגודל של ערימות הרכיבים בכל ערך דומיין משתנה כך שהם מסתכמים ב-100%. האפשרויות במקרה הזה הן isStacked: 'percent', שמגדירה כל ערך כאחוז של 100%, ו-isStacked: 'relative', שמעצבת כל ערך כשבר של 1. יש גם אפשרות isStacked: 'absolute', שמקבילה מבחינה פונקציונלית ל-isStacked: true.

שימו לב שבתרשים המוערם 100% משמאל, ערכי התיבות מבוססים על הסולם היחסי של 0-1 כשברים של 1, אבל ערכי הצירים מוצגים כאחוזים. הסיבה לכך היא שסימונים בציר האחוז הם תוצאה של החלת הפורמט '#.##%' על הערכים היחסיים של סולם 0-1. כשמשתמשים בפונקציה isStacked: 'percent', חשוב לציין סימונים כלשהם באמצעות הסולם היחסי של 0-1.

מוערם
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100% מוערם
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

יצירת תרשימי עמודות של Material

בשנת 2014, Google הודיעה על הנחיות שנועדו לתמוך במראה ובתחושה משותפים בכל הנכסים והאפליקציות שלה (כמו אפליקציות ל-Android) שפועלות בפלטפורמות של Google. אנחנו קוראים למאמץ הזה עיצוב Material. נציע גרסאות "Material" לכל התרשימים העיקריים שלנו; אתם מוזמנים להשתמש בהן אם הן נראות לכם.

תהליך היצירה של תרשים עמודות מהותי דומה לתהליך היצירה של תרשים עמודות אופקי 'קלאסי'. טוענים את GoogleVisual API (למרות שעם החבילה 'bar' במקום החבילה 'corechart'), מגדירים את טבלת הנתונים ואז יוצרים אובייקט (אבל במחלקה google.charts.Bar במקום ב-google.visualization.BarChart).

הערה: Material Charts לא פועלים בגרסאות ישנות של Internet Explorer. (IE8 וגרסאות קודמות לא תומכות ב-SVG, מה שמחייב Material Charts).

ב-Material Bar Charts יש שיפורים קטנים רבים בהשוואה לתרשימי עמודות קלאסיים, כולל לוח צבעים משופר, פינות מעוגלות, עיצוב תוויות ברור יותר, מרווחי ברירת מחדל קצרים יותר בין סדרות, קווי רשת וכותרות רכים יותר (והוספת כתוביות).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

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

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

chart.draw(data, options);

...בטקסט הבא:

chart.draw(data, google.charts.Bar.convertOptions(options));

השימוש ב-google.charts.Bar.convertOptions() מאפשר לנצל תכונות מסוימות, כמו האפשרויות הקבועות מראש של hAxis/vAxis.format.

תרשימי Dual-X

הערה: צירים מסוג Dual-X זמינים רק לתרשימי Material (כלומר, כאלה עם החבילה bar).

לפעמים רוצים להציג שתי סדרות בתרשים עמודות, עם שני צירי x עצמאיים: ציר עליון לסדרה אחת וציר תחתון לסדרה אחרת:

שימו לב שלא רק שני צירי ה-x שלנו מתויגים באופן שונה (מנתחים) לעומת 'גודל לכאורה', אלא גם סולמות וקווי רשת נפרדים. אם אתם רוצים להתאים אישית את ההתנהגות הזו, תוכלו להשתמש באפשרויות hAxis.gridlines.

בקוד הבא, האפשרויות axes ו-series מציינות יחד את מראה ה-X של התרשים. האפשרות series מציינת באיזה צירים להשתמש בכל אחד מהצירים ('distance' ו-'brightness'; הם לא צריכים להיות קשורים לשמות העמודות שבטבלת הנתונים). האפשרות axes הופכת את התרשים הזה לתרשים כפול X, ומציבים את הציר 'apparent magnitude' בחלק העליון ואת הציר 'parsecs' למטה. 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

מצעדי ה-X המובילים

הערה: צירי Top-X זמינים רק לתרשימי חומרים (כלומר, עם חבילה bar).

אם רוצים לשים את התוויות והכותרת של ציר ה-X בחלק העליון של התרשים ולא בחלק התחתון, אפשר לעשות זאת בתרשימי Material באמצעות האפשרות axes.x:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

בטעינה

שם החבילה של google.charts.load הוא "corechart". שם הכיתה של התצוגה החזותית הוא google.visualization.BarChart. 

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.BarChart(container);

ב-Material Bar Charts, שם החבילה google.charts.load הוא "bar". שם המחלקה של התצוגה החזותית הוא google.charts.Bar. 

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

פורמט נתונים

שורות: כל שורה בטבלה מייצגת קבוצה של עמודות.

עמודות:

  עמודה 0 עמודה 1 ... עמודה N
מטרה:
  • תוויות לקבוצה של ציר ה-Y (הבחנה)
  • ערכים בציר ה-Y (רציף)
ערכי עמודה 1 בקבוצה הזו ... עמודות N בקבוצה הזו
סוג הנתונים:
  • מחרוזת (discrete)
  • מספר, תאריך, תאריך ושעה או
    timeofday (רציף)
number ... number
תפקיד: דומיין נתונים ... נתונים
תפקידים אופציונליים של עמודות: ...

 

אפשרויות הגדרה

שם
animation.duration

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

סוג: מספר
ברירת מחדל: 0
animation.easing

פונקציית ההתאמה לצפייה שמוחלת על האנימציה. אלו האפשרויות הזמינות:

  • 'לינארי' - מהירות קבועה.
  • 'in' – התאמה קלה – הפעלה איטית והגברת מהירות.
  • 'out' – עשיית סדר – מתחילים מהר ומאטים.
  • 'inAndOut' – להיכנס ולצאת בקלות – מתחילים לאט, מגבירים ואז מאטים.
סוג: מחרוזת
ברירת מחדל: 'לינארי'
animation.startup

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

סוג: בוליאני
ברירת מחדל – False
annotations.alwaysOutside

בתרשימים עמודות ו עמודות, אם הערך מוגדר ל-true, כל ההערות צריכות להגיע מחוץ לעמודה/העמודה.

סוג: בוליאני
ברירת מחדל: false
annotations.datum
בתרשימים שתומכים בהערות, האובייקט annotations.datum מאפשר לשנות את הבחירה של Google Charts בהערות שצוינו ברכיבי נתונים נפרדים (למשל, הערכים שמוצגים בכל עמודה בתרשים עמודות). אפשר לקבוע את הצבע באמצעות annotations.datum.stem.color, את אורך הקנה באמצעות annotations.datum.stem.length ואת הסגנון באמצעות annotations.datum.style.
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור', האורך הוא 12; הסגנון הוא 'נקודה'.
annotations.domain
בתרשימים שתומכים בהערות, האובייקט annotations.domain מאפשר לבטל את הבחירה של Google Charts בהערות שצוינו בדומיין (הציר הראשי בתרשים, למשל ציר ה-X בתרשים קו אופייני). אפשר לקבוע את הצבע באמצעות annotations.domain.stem.color, את אורך הקנה באמצעות annotations.domain.stem.length ואת הסגנון באמצעות annotations.domain.style.
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור', האורך הוא 5, הסגנון הוא 'נקודה'.
annotations.boxStyle

בתרשימים שתומכים בהערות, האובייקט annotations.boxStyle קובע את מראה התיבות שמסביב להערות: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

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

Type: object (סוג אובייקט)
ברירת מחדל: null
annotations.highContrast
בתרשימים שתומכים בהערות, הערך הבוליאני annotations.highContrast מאפשר לבטל את הבחירה של Google Charts בצבע ההערה. כברירת מחדל, הערך annotations.highContrast הוא True, וכתוצאה מכך בתרשימים בוחרים צבע הערות עם ניגודיות טובה: צבעים בהירים על רקעים כהים וצבעים כהים על רקע בהיר. אם תגדירו את annotations.highContrast כ-False ולא תציינו את צבע ההערה שלכם, ב-Google Charts ייעשה שימוש בצבע ברירת המחדל של הסדרה עבור ההערה:
סוג: בוליאני
ברירת מחדל: True
annotations.stem
בתרשימים שתומכים בהערות, האובייקט annotations.stem מאפשר לשנות את הבחירה של Google Charts לסגנון הגזע. אפשר לקבוע את הצבע באמצעות annotations.stem.color ואת אורך הקנה באמצעות annotations.stem.length. שימו לב שהאפשרות של אורך שרשרת לא משפיעה על הערות עם סגנון 'line': בהערות עם 'line', אורך השורש תמיד זהה לטקסט. בהערות דומיין של 'line', השורש מתפרש על פני כל התרשים.
Type: object (סוג אובייקט)
ברירת מחדל: הצבע הוא 'שחור'. האורך הוא 5 להערות דומיין ו-12 להערות פרטים.
annotations.style
בתרשימים שתומכים בהערות, האפשרות annotations.style מאפשרת לשנות את בחירת סוג ההערה ב-Google Charts. הוא יכול להיות 'line' או 'point'.
סוג: מחרוזת
ברירת מחדל: 'point'
annotations.textStyle
בתרשימים שתומכים בהערות, האובייקט annotations.textStyle קובע את מראה הטקסט של ההערה: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

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

Type: object (סוג אובייקט)
ברירת מחדל: null
axisTitlesPosition

המיקום של כותרות הצירים בהשוואה לאזור התרשים. ערכים נתמכים:

  • in - ציירו את כותרות הצירים בתוך אזור התרשים.
  • חוץ - משרטטים את כותרות הצירים מחוץ לשטח התרשים.
  • ללא - השמטת כותרות הצירים.
סוג: מחרוזת
ברירת מחדל: 'out'
backgroundColor

צבע הרקע של האזור הראשי בתרשים. יכולה להיות מחרוזת צבע פשוטה של HTML, לדוגמה: 'red' או '#00cc00', או אובייקט עם המאפיינים הבאים.

סוג: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
backgroundColor.stroke

הצבע של גבול התרשים, כמחרוזת של צבע HTML.

סוג: מחרוזת
ברירת מחדל: '#666'
backgroundColor.strokeWidth

רוחב הגבול, בפיקסלים.

סוג: מספר
ברירת מחדל: 0
backgroundColor.fill

צבע המילוי של התרשים, כמחרוזת של צבע HTML.

סוג: מחרוזת
ברירת מחדל: 'לבן'
bar.groupWidth
הרוחב של קבוצת עמודות, שמצוין באחד מהפורמטים הבאים:
  • פיקסלים (למשל 50).
  • אחוז מהרוחב הזמין לכל קבוצה (למשל, '20%'), כאשר '100%' פירושו שאין רווח בין הקבוצות.
סוג: מספר או מחרוזת
ברירת מחדל: יחס הזהב, בערך '61.8%'.
עמודות

האם העמודות בתרשים עמודות של Material הן אנכיות או אופקיות. האפשרות הזו לא משפיעה על תרשימי עמודות קלאסיים או על תרשימי עמודות אנכיים קלאסיים.

סוג: ' Pixel' או 'vertical'
ברירת מחדל: 'vertical'
chartArea

אובייקט עם חברים להגדרת המיקום והגודל של האזור בתרשים (שבו התרשים עצמו משורטט, לא כולל צירים ומקראים). יש שני פורמטים נתמכים: מספר או מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים, ומספר ואחריו % הוא אחוז. דוגמה: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object (סוג אובייקט)
ברירת מחדל: null
chartArea.backgroundColor
צבע רקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, '#fdc') או שם של צבע באנגלית. כשמשתמשים באובייקט, אפשר לספק את המאפיינים הבאים:
  • stroke: הצבע, מסופק כמחרוזת הקסדצימלית או כשם של צבע באנגלית.
  • strokeWidth: אם צוין, משרטט גבול מסביב לאזור של הרוחב הנתון בתרשים (ובצבע stroke).
סוג: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
chartArea.left

המרחק מהגבול השמאלי לשרטוט התרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
chartArea.top

המרחק מהגבול העליון לשרטוט התרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
chartArea.width

רוחב שטח התרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
chartArea.height

גובה השטח של התרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
chart.subtitle

בתרשימי חומרה, האפשרות הזו מציינת את כותרת המשנה. אפשר להציג כתוביות רק ב-Material Charts.

סוג: מחרוזת
ברירת מחדל: null
chart.title

בתרשימי Material, האפשרות הזו מציינת את שם הפריט.

סוג: מחרוזת
ברירת מחדל: null
צבעים

הצבעים של הרכיבים בתרשים. מערך מחרוזות, כאשר כל רכיב הוא מחרוזת של צבע HTML, לדוגמה: colors:['red','#004411'].

סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
dataOpacity

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

סוג: מספר
ברירת מחדל: 1.0
enableInteractivity

האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמשים? אם הערך הוא False, התרשים לא יציג אירועים מסוג 'בחירה' או אירועים אחרים המבוססים על אינטראקציה (אלא יגרום להצגה של אירועי שגיאה או אירועים מוכנים) ולא יציג טקסט מרחף או שינוי אחר בהתאם לקלט של המשתמשים.

סוג: בוליאני
ברירת מחדל: True
explorer, אקספלורר

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

התכונה הזו ניסיונית ועשויה להשתנות בגרסאות עתידיות.

הערה: הסייר פועל רק עם צירים רציפים (כמו מספרים או תאריכים).

Type: object (סוג אובייקט)
ברירת מחדל: null
explorer.actions

הכלי Google Charts Explorer תומך בשלוש פעולות:

  • dragToPan: אפשר לגרור את התרשים כדי להזיז אותו בצורה אופקית ואנכית. כדי להזיז רק לאורך הציר האופקי, משתמשים ב-explorer: { axis: 'horizontal' }. באופן דומה לציר האנכי.
  • dragToZoom: התנהגות ברירת המחדל של הסייר היא להגדיל או להקטין את התצוגה כשהמשתמש גולל. אם נעשה שימוש ב-explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, גרירה של אזור מלבני מגדילה את האזור הזה. מומלץ להשתמש ב-rightClickToReset בכל פעם שמשתמשים ב-dragToZoom. אפשר לעיין ב-explorer.maxZoomIn, explorer.maxZoomOut ו-explorer.zoomDelta להתאמה אישית של מרחק התצוגה.
  • rightClickToReset: לחיצה ימנית על התרשים מחזירה אותו לרמת ההזזה והזום המקוריים.
סוג: מערך של מחרוזות
ברירת מחדל: ['dragToPan', 'rightClickToReset']
explorer.axis

כברירת מחדל, משתמשים יכולים להזיז גם אופקי וגם אנכי כשמשתמשים באפשרות explorer. אם רוצים שהמשתמשים יזיזו רק את התצוגה לרוחב, צריך להשתמש ב-explorer: { axis: 'horizontal' }. באופן דומה, explorer: { axis: 'vertical' } מאפשר הזזה אנכית בלבד.

סוג: מחרוזת
ברירת מחדל: הזזה אופקית וגם אנכית
explorer.keepInBounds

כברירת מחדל, המשתמשים יכולים להזיז את המפה לכל מקום, בלי קשר למיקום של הנתונים. כדי לוודא שהמשתמשים לא יזיזו את התצוגה אל מעבר לתרשים המקורי, צריך להשתמש ב-explorer: { keepInBounds: true }.

סוג: בוליאני
ברירת מחדל: false
explorer.maxZoomIn

המספר המקסימלי שבו החוקר יכול להגדיל את התצוגה. כברירת מחדל, המשתמשים יוכלו להתקרב מספיק כדי שיראו רק 25% מהתצוגה המקורית. הגדרה של explorer: { maxZoomIn: .5 } תאפשר למשתמשים להגדיל את התצוגה רק מספיק כדי לראות מחצית מהתצוגה המקורית.

סוג: מספר
ברירת מחדל: 0.25
explorer.maxZoomOut

המספר המקסימלי שבו הסייר יכול להקטין את התצוגה. כברירת מחדל, המשתמשים יוכלו להתרחק מספיק כך שהתרשים ימלא רק 1/4 מהשטח הזמין. הגדרה של explorer: { maxZoomOut: 8 } תאפשר למשתמשים להתרחק מספיק כך שהתרשים ימלא רק 1/8 מהשטח הזמין.

סוג: מספר
ברירת מחדל: 4
explorer.zoomDelta

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

סוג: מספר
ברירת מחדל: 1.5
focusTarget

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

  • 'datum' – התמקדות בנקודה על הגרף. תואם לתא בטבלת הנתונים.
  • 'category' – התמקדות בקיבוץ של כל נקודות הנתונים לאורך הציר הראשי. תואם לשורה בטבלת הנתונים.

בקטע FocusTarget 'category', ההסבר הקצר מציג את כל ערכי הקטגוריות. האפשרות הזו יכולה להיות שימושית להשוואת ערכים של סדרות שונות.

סוג: מחרוזת
ברירת מחדל: 'datum'
fontSize

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

סוג: מספר
ברירת מחדל: אוטומטי
fontName

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

סוג: מחרוזת
ברירת מחדל: 'CPRA'
forceIFrame

משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames).

סוג: בוליאני
ברירת מחדל: false
hAxes

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

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

series:{1:{targetAxisIndex:1}}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'}}}

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

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
סוג: מערך של אובייקט או אובייקט עם אובייקטים צאצאים
ברירת מחדל: null
hAxis

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.baseline

ערך הבסיס של הציר האופקי.

סוג: מספר
ברירת מחדל: אוטומטי
hAxis.baselineColor

הצבע של קו הבסיס של הציר האופקי. הוא יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'.

סוג: מספר
ברירת מחדל: 'שחור'
hAxis.direction

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

סוג: 1 או 1-
ברירת מחדל: 1
hAxis.format

מחרוזת עיצוב לתוויות של צירים מספריים. זו קבוצת משנה של קבוצת דפוסי ה-ICU . לדוגמה, {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 מיליון)

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

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

סוג: מחרוזת
ברירת מחדל: אוטומטי
hAxis.gridlines

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

{color: '#333', minSpacing: 20}
Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.gridlines.color

הצבע של קווי הרשת האופקיים בתוך שטח התרשים. מציינים מחרוזת חוקית של צבע HTML.

סוג: מחרוזת
ברירת מחדל: '#CCC'
hAxis.gridlines.count

המספר המשוער של קווי רשת אופקיים בתוך אזור התרשים. אם מציינים מספר חיובי ל-gridlines.count, הוא ישמש לחישוב minSpacing בין קווי הרשת. תוכלו לציין את הערך 1 כדי לשרטט רק קו רשת אחד, או 0 כדי לא לשרטט קווי רשת. מציינים 1-, שהוא ברירת המחדל, כדי לחשב אוטומטית את מספר קווי הרשת על סמך אפשרויות אחרות.

סוג: מספר
ברירת המחדל: 1-
hAxis.gridlines.units

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

הפורמט הכללי הוא:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

מידע נוסף זמין בקטע תאריכים ושעות.

Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.minorGridlines

אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האופקי, בדומה לאפשרות hAxis.gridlines.

Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.minorGridlines.color

הצבע של קווי הרשת המשניים האופקיים בתוך שטח התרשים. מציינים מחרוזת חוקית של צבע HTML.

סוג: מחרוזת
ברירת מחדל: שילוב של צבעי קו הרשת ורקע
hAxis.minorGridlines.count

האפשרות minorGridlines.count הוצאה משימוש ברובה, חוץ מהבדל אחד: כדי להשבית קווי רשת משניים, מגדירים את הספירה ל-0. מספר קווי הרשת המשניים תלוי עכשיו רק במרווח בין קווי הרשת הראשיים (ראו hAxis.gridlines.interval) וברווח המינימלי שנדרש (ראו hAxis.minorGridlines.minSpacing).

סוג: מספר
ברירת מחדל:1
hAxis.minorGridlines.units

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

הפורמט הכללי הוא:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

מידע נוסף זמין בקטע תאריכים ושעות.

Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.logScale

המאפיין hAxis שהופך את הציר האופקי לסולם לוגריתמי (צריך שכל הערכים יהיו חיוביים). יש להגדיר את הערך True אם הערך הוא 'כן'.

סוג: בוליאני
ברירת מחדל: false
hAxis.scaleType

המאפיין hAxis שהופך את הציר האופקי לקנה מידה לוגריתמי. יכול להיות אחת מהאפשרויות הבאות:

  • null - לא מתבצעת קנה מידה לוגריתמי.
  • 'log' - קנה מידה לוגריתמי. לא מוצגים ערכים שליליים וערכי אפס. האפשרות הזו זהה להגדרה hAxis: { logscale: true }.
  • 'mirrorLog' - קנה מידה לוגריתמי שבו מוצגים ערכים שליליים וערכים של אפס. הערך בתרשים של מספר שלילי הוא מספר שלילי של היומן של הערך המוחלט. ערכים הקרובים ל-0 מוצגים בסולם ליניארי.
סוג: מחרוזת
ברירת מחדל: null
hAxis.textStyle

אובייקט שמציין את סגנון הטקסט של הציר האופקי. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

מיקום הטקסט של הציר האופקי, ביחס לשטח התרשים. ערכים נתמכים: 'out', 'in', 'none'.

סוג: מחרוזת
ברירת מחדל: 'out'
hAxis.ticks

מחליפה את הסימנים הנובעים מציר ה-X שנוצרו באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך סימון תקין (כמו מספר, תאריך, תאריך ושעה או שעה ביום), או אובייקט. אם מדובר באובייקט, צריך להיות לו המאפיין v בשביל ערך הסימון, ומאפיין f אופציונלי שמכיל את המחרוזת המילולית שיוצג כתווית.

התצוגה המקדימה תורחב אוטומטית כך שתכלול את סימני המינימום והמקסימום, אלא אם מציינים viewWindow.min או viewWindow.max לשינוי.

דוגמאות:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
hAxis.title

מאפיין hAxis שמציין את הכותרת של הציר האופקי.

סוג: מחרוזת
ברירת מחדל: null
hAxis.titleTextStyle

אובייקט שמציין את סגנון הטקסט של כותרת הציר האופקי. זהו הפורמט של האובייקט: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

מעביר את הערך המקסימלי של הציר האופקי לערך שצוין. ברוב התרשימים הערך יהיה ימינה. המערכת תתעלם מערך זה אם הוא מוגדר לערך הקטן מערך ה-x המקסימלי של הנתונים. המאפיין hAxis.viewWindow.max מבטל את המאפיין הזה.

סוג: מספר
ברירת מחדל: אוטומטי
hAxis.minValue

מעביר את הערך המינימלי של הציר האופקי לערך שצוין. ברוב התרשימים הוא יופנה שמאלה. המערכת תתעלם ממנו אם מוגדר ערך שגדול מערך ה-x המינימלי של הנתונים. המאפיין hAxis.viewWindow.min מבטל את המאפיין הזה.

סוג: מספר
ברירת מחדל: אוטומטי
hAxis.viewWindowMode

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

  • 'pretty' – שינוי גודל הערכים האופקיים כך שערכי הנתונים המקסימליים והמינימליים יעובדו מעט בתוך האזור השמאלי והימני של אזור התרשים. התצוגה 'חלון' מורחבת לקו הרשת הראשי הקרוב ביותר למספרים, או לקו הרשת המשני הקרוב ביותר לתאריכים ושעות.
  • 'maximized' – שינוי הגודל של הערכים האופקיים כך שערכי הנתונים המקסימליים והמינימליים נוגעים משמאל וימינה של אזור התרשים. כתוצאה מכך, המערכת תתעלם מ-haxis.viewWindow.min ומ-haxis.viewWindow.max.
  • 'explicit' – אפשרות שהוצאה משימוש כדי לציין את ערכי קנה המידה השמאלי והימני של שטח התרשים. (תכונות שהוצאו משימוש כי הן מיותרות ב-haxis.viewWindow.min וב-haxis.viewWindow.max.) ערכי נתונים שמחוץ לערכים האלה ייחתכו. צריך לציין אובייקט hAxis.viewWindow שמתאר את ערכי המקסימום והמינימום להצגה.
סוג: מחרוזת
ברירת מחדל: זהה ל-'pretty', אבל haxis.viewWindow.min ו-haxis.viewWindow.max מקבלים עדיפות אם משתמשים בה.
hAxis.viewWindow

מציינת את טווח החיתוך של הציר האופקי.

Type: object (סוג אובייקט)
ברירת מחדל: null
hAxis.viewWindow.max

הערך המקסימלי של נתונים אופקיים שיש לעבד.

המערכת מתעלמת ממנו כאשר הערך של hAxis.viewWindowMode הוא 'יפה' או 'מקסימלי'.

סוג: מספר
ברירת מחדל: אוטומטי
hAxis.viewWindow.min

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

המערכת מתעלמת ממנו כאשר הערך של hAxis.viewWindowMode הוא 'יפה' או 'מקסימלי'.

סוג: מספר
ברירת מחדל: אוטומטי
גובה

גובה התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: גובה הרכיב שמכיל
isStacked

אם המדיניות מוגדרת כ-True, הרכיבים עויפים את הרכיבים לכל הסדרות בכל ערך דומיין. הערה: בתרשימים Column, Area ו-SteppedArea, Google Charts הופך את הסדר של פריטי המקרא להתאמה טובה יותר לערימה של רכיבי הסדרה (למשל, סדרה 0 תהיה הפריט האחרון במקרא). הפריט הזה לא רלוונטי לתרשימי עמודות.

האפשרות isStacked תומכת גם בערימה של 100%, שבה מתבצעת התאמה מחדש של ערימות הרכיבים בכל ערך דומיין לסכום של עד 100%.

האפשרויות עבור isStacked הן:

  • false — רכיבים לא יקובצו. זוהי ברירת המחדל.
  • true — מקבץ רכיבים לכל הסדרות בכל ערך דומיין.
  • 'percent' — מקבצים רכיבים לכל הסדרות בכל ערך דומיין ומשנה את קנה המידה שלהם כך שהם יסתכמו ב-100%, כשהערך של כל רכיב מחושב כאחוז של 100%.
  • 'relative' - מקבצי רכיבים לכל הסדרות בכל ערך דומיין, ומשנים את קנה המידה שלהם כך שסכום הערכים יהיה 1, כאשר הערך של כל רכיב מחושב כשבר של 1.
  • 'absolute' — פועלת כמו isStacked: true.

בערימה של 100%, הערך המחושב לכל רכיב יופיע בהסבר הקצר אחרי הערך בפועל.

כברירת מחדל, ערכי ציר היעד מחושבים על סמך סולם יחסי של 0-1 כשברים של 1 ל-'relative' ו-0-100% עבור 'percent' (הערה: כשמשתמשים באפשרות 'percent', ערכי הציר/הסימון מוצגים כאחוזים, אבל הערכים בפועל הם הערכים היחסיים של סולם מ-0-1. הסיבה לכך היא שסימני הציר באחוזים הם תוצאה של החלת הפורמט '#.##%' על הערכים היחסיים בסולם 0-1. כשמשתמשים ב-isStacked: 'percent', חשוב לציין סימונים או קווי רשת באמצעות הערכים היחסיים של סולם מ-0 עד 1. אפשר להתאים אישית את קווי הרשת או את הערכים ואת העיצוב באמצעות האפשרויות המתאימות של hAxis/vAxis.

סידור בערימה ב-100% תומך רק בערכי נתונים מסוג number, ובסיס הנתונים שלו צריך להיות אפס.

סוג: בוליאני/מחרוזת
ברירת מחדל: false
מקרא

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object (סוג אובייקט)
ברירת מחדל: null
legend.pageIndex

אינדקס הדפים הראשון שנבחר מבוסס אפס של המקרא.

סוג: מספר
ברירת מחדל: 0
legend.position

המיקום של המקרא. יכול להיות אחת מהאפשרויות הבאות:

  • 'bottom' – מתחת לתרשים.
  • 'left' - משמאל לתרשים, בתנאי שלא משויכת לציר השמאלי סדרה. לכן, אם ברצונך להשתמש במקרא שבצד ימין, השתמשו באפשרות targetAxisIndex: 1.
  • 'in' – בתוך התרשים, לפי הפינה הימנית העליונה.
  • 'ללא' – לא מוצג מקרא.
  • 'ימין' – מימין לתרשים. לא תואם לאפשרות vAxes.
  • 'ראש הדף' – מעל התרשים.
סוג: מחרוזת
ברירת מחדל: 'right'
legend.alignment

יישור המקרא. יכול להיות אחת מהאפשרויות הבאות:

  • 'start' - מיושר לתחילת האזור שהוקצה למקרא.
  • 'center' (מרכז) – במרכז האזור שהוקצה למקרא.
  • 'end' - מיושר לסוף השטח שהוקצה למקרא.

התחלה, מרכז וסיום יחסיים לסגנון – האנכי או האופקי – של המקרא. לדוגמה, במקרא 'ימין', 'התחלה' ו 'סוף' מופיעים בחלק העליון ובחלק התחתון, בהתאמה. במקרא 'ראש הדף', הערכים 'התחלה' ו-'end' מופיעים משמאל ו-ימין של האזור, בהתאמה.

ערך ברירת המחדל תלוי במיקום של המקרא. במקראים 'תחתונים', ברירת המחדל היא 'מרכז'. מקראים אחרים הם 'התחלה' כברירת מחדל.

סוג: מחרוזת
ברירת מחדל: אוטומטי
legend.textStyle

אובייקט שמציין את סגנון הטקסט של המקרא. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

אם הוא מוגדר כ-True, הסדרה תצייר מלמטה למעלה. ברירת המחדל היא לצייר מלמעלה למטה.

סוג: בוליאני
ברירת מחדל: false
כיוון

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

סוג: מחרוזת
ברירת המחדל: 'אופקי'
סדרה

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

  • annotations – אובייקט שצריך להחיל על הערות בסדרה הזו. אפשר להשתמש בו כדי לשלוט, למשל, ב-textStyle של הסדרה: 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    לרשימה מלאה יותר של האפשרויות שאפשר להתאים אישית, אפשר לעיין באפשרויות השונות של annotations.

  • color – הצבע שבו רוצים להשתמש בסדרה. צריך לציין מחרוזת חוקית של צבע HTML.
  • labelInLegend – תיאור הסדרה שתופיע במקרא של התרשים.
  • targetAxisIndex – לאיזה ציר להקצות את הסדרה, כאשר 0 הוא ציר ברירת המחדל ו-1 הוא הציר הנגדי. ערך ברירת המחדל הוא 0. מוגדר ל-1 כדי להגדיר תרשים שבו סדרות שונות מעובדות מול צירים שונים. לפחות סדרה אחת תוקצה לציר ברירת המחדל. אפשר להגדיר קנה מידה שונה לצירים שונים.
  • visibleInLegend – ערך בוליאני כאשר True פירושו שסדרה חייבת להיות רשומה במקרא, ו-FALSE פירושו שלא צריכה להיות לה ערך. ברירת המחדל היא True.

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

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
סוג: מערך של אובייקטים או אובייקטים עם אובייקטים בתצוגת עץ
ברירת מחדל: {}
עיצוב

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

  • 'maximized' – הגדלת השטח של התרשים ושרטוט של המקרא וכל התוויות בתוך האזור בתרשים. מגדיר את האפשרויות הבאות: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
סוג: מחרוזת
ברירת מחדל: null
title

טקסט להצגה מעל התרשים.

סוג: מחרוזת
ברירת מחדל: ללא שם
titlePosition

המיקום של כותרת התרשים, בהשוואה לאזור התרשים. ערכים נתמכים:

  • in - משרטטים את הכותרת בתוך אזור התרשים.
  • חוץ – משרטטים את הכותרת מחוץ לשטח התרשים.
  • none - השמטת את הכותרת.
סוג: מחרוזת
ברירת מחדל: 'out'
titleTextStyle

אובייקט שמציין את סגנון טקסט הכותרת. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
הסבר קצר

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: object (סוג אובייקט)
ברירת מחדל: null
tooltip.ignoreBounds

אם המדיניות מוגדרת לערך true, ההסברים הקצרים יכולים לזרום אל מחוץ לגבולות התרשים בכל הצדדים.

הערה: ההוראות האלה רלוונטיות רק להסברים קצרים ב-HTML. אם האפשרות הזו מופעלת עם הסברים קצרים ב-SVG, ייחתכו כל גלישת טקסט מחוץ לגבולות התרשים. למידע נוסף, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר.

סוג: בוליאני
ברירת מחדל: false
tooltip.isHtml

אם המדיניות מוגדרת כ-True, צריך להשתמש בהסבר קצר על עיבוד HTML (ולא ב-SVG). למידע נוסף, אפשר לקרוא את המאמר התאמה אישית של תוכן הסבר קצר.

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

סוג: בוליאני
ברירת מחדל: false
tooltip.showColorCode

אם הערך הוא True, יוצגו ריבועים צבעוניים לצד פרטי הסדרה בהסבר הקצר. ברירת המחדל היא True אם הערך של focusTarget מוגדר כ-'category', אחרת ברירת המחדל היא False.

סוג: בוליאני
ברירת מחדל: אוטומטי
tooltip.textStyle

אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

האינטראקציה של המשתמש שגורמת להצגת ההסבר הקצר:

  • 'focus' – ההסבר הקצר יוצג כשהמשתמש מעביר את העכבר מעל הרכיב.
  • 'ללא' – ההסבר הקצר לא יוצג.
  • 'בחירה' – ההסבר הקצר יוצג כשהמשתמש יבחר את הרכיב.
סוג: מחרוזת
ברירת מחדל: 'focus'
קווי מגמה

הצגת קווי מגמות בתרשימים שתומכים בהם. כברירת מחדל נעשה שימוש בקווי מגמה לינאריים , אבל אפשר להתאים אותם אישית באמצעות האפשרות trendlines.n.type.

קווי המגמה מפורטים לכל סדרה, כך שברוב המקרים האפשרויות ייראו כך: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Type: object (סוג אובייקט)
ברירת מחדל: null
trendlines.n.color

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

סוג: מחרוזת
ברירת מחדל: צבע ברירת המחדל של הסדרה
trendlines.n.degree

עבור קווי מגמה של type: 'polynomial', דרגת הפולינום (2 בשביל ריבועי, 3 למכפלה וכן הלאה). (רמת ברירת המחדל עשויה להשתנות מ-3 ל-2 בגרסה קרובה של Google Charts).

סוג: מספר
ברירת מחדל: 3
trendlines.n.labelInLegend

אם ההגדרה מוגדרת, קו המגמה יופיע במקרא בתור המחרוזת הזו.

סוג: מחרוזת
ברירת מחדל: null
trendlines.n.lineWidth

רוחב הקו של קו המגמה , בפיקסלים.

סוג: מספר
ברירת מחדל: 2
trendlines.n.opacity

השקיפות של קו המגמה , מ-0.0 (שקוף) ל-1.0 (אטום).

סוג: מספר
ברירת מחדל: 1.0
trendlines.n.pointSize

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

סוג: מספר
ברירת מחדל: 1
trendlines.n.pointsVisible

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

סוג: בוליאני
ברירת מחדל: True
trendlines.n.showR2

הגדרה שקובעת אם להציג את מקדם הקביעה במקרא או בהסבר הקצר של קו המגמה.

סוג: בוליאני
ברירת מחדל: false
trendlines.n.type

אם קווי המגמה הם 'linear' (ברירת המחדל), 'exponential' או 'polynomial'.

סוג: מחרוזת
ברירת מחדל: לינארי
trendlines.n.visibleInLegend

אם המשוואה קו מגמה מופיעה במקרא. (השם יופיע בהסבר הקצר של קו המגמה).

סוג: בוליאני
ברירת מחדל: false
vAxis

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.baseline

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

האפשרות הזו נתמכת רק בציר continuous.

סוג: מספר
ברירת מחדל: אוטומטי
vAxis.baselineColor

קובעים את הצבע של קו הבסיס של הציר האנכי. הוא יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'.

האפשרות הזו נתמכת רק בציר continuous.

סוג: מספר
ברירת מחדל: 'שחור'
vAxis.direction

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

סוג: 1 או 1-
ברירת מחדל: 1
vAxis.format

מחרוזת עיצוב לתוויות של מספרים או של ציר תאריך.

לתוויות של צירי המספרים, זוהי קבוצת משנה של הפורמט העשרוני קבוצת דפוסי ה-ICU . לדוגמה, {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 מיליון)

לתוויות של ציר התאריך, זו קבוצת משנה של עיצוב התאריכים שהוגדר דפוס ICU . לדוגמה, {format:'MMM d, y'} יציג את הערך "1 ביולי, 2011" עבור התאריך הראשון של יולי ב-2011.

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

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

האפשרות הזו נתמכת רק בציר continuous.

סוג: מחרוזת
ברירת מחדל: אוטומטי
vAxis.gridlines

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

{color: '#333', minSpacing: 20}

האפשרות הזו נתמכת רק בציר continuous.

Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.gridlines.color

הצבע של קווי הרשת האנכיים בתוך אזור התרשים. צריך לציין מחרוזת חוקית של צבע HTML.

סוג: מחרוזת
ברירת מחדל: '#CCC'
vAxis.gridlines.count

המספר המשוער של קווי רשת אופקיים בתוך אזור התרשים. אם מציינים מספר חיובי ל-gridlines.count, הוא ישמש לחישוב minSpacing בין קווי הרשת. תוכלו לציין את הערך 1 כדי לשרטט רק קו רשת אחד, או 0 כדי לא לשרטט קווי רשת. מציינים 1-, שהוא ברירת המחדל, כדי לחשב אוטומטית את מספר קווי הרשת על סמך אפשרויות אחרות.

סוג: מספר
ברירת המחדל: 1-
vAxis.gridlines.units

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

הפורמט הכללי הוא:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

מידע נוסף זמין בקטע תאריכים ושעות.

Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.minorGridlines

אובייקט עם חברים להגדרת קווי הרשת המשניים בציר האנכי, בדומה לאפשרות vAxis.gridlines.

האפשרות הזו נתמכת רק בציר continuous.

Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.minorGridlines.color

הצבע של קווי הרשת המשניים האנכיים בתוך אזור התרשים. מציינים מחרוזת חוקית של צבע HTML.

סוג: מחרוזת
ברירת מחדל: שילוב של צבעי קו הרשת ורקע
vAxis.minorGridlines.count

האפשרות MinGridlines.count הוצאה משימוש ברובה, חוץ מהבדל אחד: משביתים את קווי הרשת המשניים על ידי הגדרת הספירה ל-0. מספר קווי הרשת המשניים תלוי במרווח בין קווי הרשת הראשיים (ראו vAxis.gridlines.interval) ובשטח המינימלי הנדרש (ראו vAxis.minorGridlines.minSpacing).

סוג: מספר
ברירת מחדל: 1
vAxis.minorGridlines.units

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

הפורמט הכללי הוא:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

מידע נוסף זמין בקטע תאריכים ושעות.

Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.logScale

אם True, הציר האנכי הוא קנה מידה לוגריתמי. הערה: כל הערכים חייבים להיות חיוביים.

האפשרות הזו נתמכת רק בציר continuous.

סוג: בוליאני
ברירת מחדל: false
vAxis.scaleType

המאפיין vAxis שהופך את הציר האנכי לקנה מידה לוגריתמי. יכול להיות אחת מהאפשרויות הבאות:

  • null - לא מתבצעת קנה מידה לוגריתמי.
  • 'log' - קנה מידה לוגריתמי. לא מוצגים ערכים שליליים וערכי אפס. האפשרות הזו זהה להגדרה vAxis: { logscale: true }.
  • 'mirrorLog' - קנה מידה לוגריתמי שבו מוצגים ערכים שליליים וערכים של אפס. הערך בתרשים של מספר שלילי הוא מספר שלילי של היומן של הערך המוחלט. ערכים הקרובים ל-0 מוצגים בסולם ליניארי.
סוג: מחרוזת
ברירת מחדל: null
vAxis.textPosition

מיקום הטקסט של הציר האנכי, ביחס לשטח התרשים. ערכים נתמכים: 'out', 'in', 'none'.

סוג: מחרוזת
ברירת מחדל: 'out'
vAxis.textStyle

אובייקט שמציין את סגנון הטקסט של הציר האנכי. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

מחליפה את סימונים של ציר ה-Y שנוצרו באופן אוטומטי במערך שצוין. כל רכיב במערך צריך להיות ערך סימון תקין (כמו מספר, תאריך, תאריך ושעה או שעה ביום), או אובייקט. אם מדובר באובייקט, צריך להיות לו המאפיין v בשביל ערך הסימון, ומאפיין f אופציונלי שמכיל את המחרוזת המילולית שיוצג כתווית.

התצוגה המקדימה תורחב אוטומטית כך שתכלול את סימני המינימום והמקסימום, אלא אם מציינים viewWindow.min או viewWindow.max לשינוי.

דוגמאות:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

האפשרות הזו נתמכת רק בציר continuous.

סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
vAxis.title

מאפיין vAxis שמציין כותרת לציר האנכי.

סוג: מחרוזת
ברירת מחדל: ללא שם
vAxis.titleTextStyle

אובייקט שמציין את סגנון הטקסט של כותרת הציר האנכי. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

מעביר את הערך המקסימלי של הציר האנכי לערך שצוין. ברוב התרשימים הערך יהיה כלפי מעלה. המערכת תתעלם מערך זה אם מוגדר לערך הקטן מערך ה-y המקסימלי של הנתונים. המאפיין vAxis.viewWindow.max מבטל את המאפיין הזה.

האפשרות הזו נתמכת רק בציר continuous.

סוג: מספר
ברירת מחדל: אוטומטי
vAxis.minValue

מעביר את הערך המינימלי של הציר האנכי לערך שצוין. הוא יהיה ירידה ברוב התרשימים. המערכת תתעלם ממנו אם הערך הזה מוגדר לערך שגדול מערך ה-y המינימלי של הנתונים. המאפיין vAxis.viewWindow.min מבטל את המאפיין הזה.

האפשרות הזו נתמכת רק בציר continuous.

סוג: מספר
ברירת מחדל: null
vAxis.viewWindowMode

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

  • 'pretty' – שינוי קנה המידה של הערכים האנכיים כך שערכי הנתונים המקסימליים והמינימליים יעובדו מעט בתוך האזור התחתון והחלק העליון של התרשים. התצוגה 'חלון' מורחבת לקו הרשת הראשי הקרוב ביותר למספרים, או לקו הרשת המשני הקרוב ביותר לתאריכים ושעות.
  • 'maximized' – שינוי הגודל של הערכים האנכיים כך שערכי הנתונים המקסימליים והמינימליים נוגעים בחלק העליון והתחתון של אזור התרשים. כתוצאה מכך, המערכת תתעלם מ-vaxis.viewWindow.min ומ-vaxis.viewWindow.max.
  • 'explicit' – אפשרות שהוצאה משימוש, שמאפשרת לציין את הערכים של קנה המידה העליון והתחתון של שטח התרשים. (הוצאה משימוש כי היא מיותרת כשמשתמשים ב-vaxis.viewWindow.min וב-vaxis.viewWindow.max. ערכי נתונים שמחוץ לערכים האלה ייחתכו. צריך לציין אובייקט vAxis.viewWindow שמתאר את ערכי המקסימום והמינימום להצגה.

האפשרות הזו נתמכת רק בציר continuous.

סוג: מחרוזת
ברירת מחדל: זהה ל-'pretty', אבל vaxis.viewWindow.min ו-vaxis.viewWindow.max מקבלים עדיפות אם משתמשים בה.
vAxis.viewWindow

מציין את טווח החיתוך של הציר האנכי.

Type: object (סוג אובייקט)
ברירת מחדל: null
vAxis.viewWindow.max

  • לציר continuous:

    הערך המקסימלי של נתונים אנכיים שיש לעבד.

  • לציר discrete:

    אינדקס השורות המבוסס על אפס, שבו מסתיים חלון החיתוך. נקודות על הגרף באינדקס הזה ומעלה ייחתכו. בשילוב עם vAxis.viewWindowMode.min, הוא מגדיר טווח פתוח למחצה [min, max) שמציין את האינדקסים של הרכיב שיוצגו. במילים אחרות, כל אינדקס ש-min <= index < max יוצג.

המערכת מתעלמת ממנו כאשר הערך של vAxis.viewWindowMode הוא 'יפה' או 'מקסימלי'.

סוג: מספר
ברירת מחדל: אוטומטי
vAxis.viewWindow.min

  • לציר continuous:

    הערך המינימלי של נתונים אנכיים לעיבוד.

  • לציר discrete:

    אינדקס השורות המבוסס על אפס, שבו מתחיל חלון החיתוך. נקודות על הגרף במדדים נמוכים מהערך הזה ייחתכו. בשילוב עם vAxis.viewWindowMode.max, הוא מגדיר טווח פתוח למחצה [min, max) שמציין את האינדקסים של הרכיב שיוצגו. במילים אחרות, כל אינדקס ש-min <= index < max יוצג. המערכת מתעלמת ממנו כאשר הערך של vAxis.viewWindowMode הוא 'יפה' או 'מקסימלי'.

המערכת מתעלמת ממנו כאשר הערך של vAxis.viewWindowMode הוא 'יפה' או 'מקסימלי'.

סוג: מספר
ברירת מחדל: אוטומטי
רוחב

רוחב התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: רוחב הרכיב שמכיל

שיטות

שיטה
draw(data, options)

מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע ready מופעל. Extended description.

סוג החזרה: ללא
getAction(actionID)

הפונקציה מחזירה את אובייקט הפעולה של ההסבר הקצר עם actionID המבוקש.

Return Type (סוג החזרה): אובייקט
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

גובה השטח של התרשים
cli.getBoundingBox('chartarea').height
הרוחב של העמודה השלישית בסדרה הראשונה של תרשים עמודות או תרשים עמודות אנכי
cli.getBoundingBox('bar#0#2').width
תיבה תוחמת של מתקן התלייה החמישי בתרשים עוגה
cli.getBoundingBox('slice#4')
תיבת קישור של נתוני התרשים של תרשים אנכי (למשל, עמודה):
cli.getBoundingBox('vAxis#0#gridline')
תיבת קישור של נתוני התרשים של תרשים אופקי (למשל, עמודות):
cli.getBoundingBox('hAxis#0#gridline')

הערכים הם יחסיים למאגר התגים של התרשים. קוראים לפונקציה אחרי הצגת התרשים.

Return Type (סוג החזרה): אובייקט
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

הערכים הם יחסיים למאגר התגים של התרשים. קוראים לפונקציה אחרי הצגת התרשים.

Return Type (סוג החזרה): אובייקט
getChartLayoutInterface()

מחזירה אובייקט שמכיל מידע על המיקום של התרשים והרכיבים שלו.

אפשר לקרוא ל-methods הבאות באובייקט שמוחזר:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

קוראים לפונקציה אחרי הצגת התרשים.

Return Type (סוג החזרה): אובייקט
getHAxisValue(xPosition, optional_axis_index)

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

דוגמה: chart.getChartLayoutInterface().getHAxisValue(400)

קוראים לפונקציה אחרי הצגת התרשים.

סוג החזרה: מספר
getImageURI()

מחזירה את התרשים שעבר סריאליזציה ל-URI של תמונה.

קוראים לפונקציה אחרי הצגת התרשים.

ראו הדפסת תרשימי PNG.

סוג החזרה: מחרוזת
getSelection()

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

סוג החזרה: מערך של רכיבי בחירה
getVAxisValue(yPosition, optional_axis_index)

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

דוגמה: chart.getChartLayoutInterface().getVAxisValue(300)

קוראים לפונקציה אחרי הצגת התרשים.

סוג החזרה: מספר
getXLocation(dataValue, optional_axis_index)

הפונקציה מחזירה את קואורדינטת ה-x של dataValue ביחס לקצה השמאלי של הקונטיינר בתרשים.

דוגמה: chart.getChartLayoutInterface().getXLocation(400)

קוראים לפונקציה אחרי הצגת התרשים.

סוג החזרה: מספר
getYLocation(dataValue, optional_axis_index)

הפונקציה מחזירה את קואורדינטת ה-y של dataValue ביחס לקצה העליון של הקונטיינר בתרשים.

דוגמה: chart.getChartLayoutInterface().getYLocation(300)

קוראים לפונקציה אחרי הצגת התרשים.

סוג החזרה: מספר
removeAction(actionID)

הסרה של פעולת ההסבר הקצר עם ה-actionID המבוקש מהתרשים.

סוג החזרה: none
setAction(action)

הגדרת פעולת הסבר קצר שתבוצע כשהמשתמש ילחץ על הטקסט של הפעולה.

ה-method setAction מתייחסת לאובייקט כפרמטר הפעולה שלו. האובייקט הזה צריך לציין 3 מאפיינים: id – מזהה הפעולה שהוגדרה, text – הטקסט שצריך להופיע בהסבר הקצר על הפעולה ו-action – הפונקציה שצריכה לפעול כשמשתמש לוחץ על הטקסט של הפעולה.

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

סוג החזרה: none
setSelection()

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

סוג החזרה: ללא
clearChart()

ניקוי התרשים וכל המשאבים שהוקצו לו.

סוג החזרה: ללא

אירועים

מידע נוסף על אופן השימוש באירועים האלה זמין במאמרים אינטראקטיביות בסיסית, טיפול באירועים והפעלת אירועים.

שם
animationfinish

מופעל כשאנימציית המעבר מסתיימת.

מאפיינים:ללא
click

מופעל כשהמשתמש לוחץ על התרשים. יכול לשמש כדי לזהות מתי לוחצים על הכותרת, רכיבי הנתונים, רשומות המקרא, הצירים, קווי הרשת או התוויות.

נכסים: targetID
error

מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים.

מאפיינים: מזהה, הודעה
legendpagination

מופעל כשהמשתמש לוחץ על חיצי העימוד של המקרא. מחזיר את אינדקס הדפים הנוכחי המבוסס על אפס ואת מספר הדפים הכולל.

מאפיינים: currentPageIndex, total Pages
onmouseover

מופעל כשהמשתמש מעביר את העכבר מעל ישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null).

מאפיינים: שורה, עמודה
onmouseout

מופעל כשהמשתמש מזיז את העכבר מישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null).

מאפיינים: שורה, עמודה
ready

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

מאפיינים:ללא
select

מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר getSelection().

מאפיינים:ללא

המדיניות בנושא נתונים

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