תרשים קו

סקירה כללית

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

דוגמאות

עיקול הקווים

ניתן להחליק בין השורות על ידי הגדרת האפשרות curveType ל-function:

הקוד ליצירת התרשים מופיע למטה. חשוב לשים לב שהשימוש באפשרות curveType: function הוא: 

  <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(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

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

יצירת תרשימי קו חומרים

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

יצירת תרשים קו של חומר חדש דומה ליצירת תרשים קו "קלאסי". ממשק ה-API של Google Vision טעון (למרות חבילת החבילה 'line', ולא באמצעות החבילה של 'corechart'), מגדירים את טבלת הנתונים ואז יוצרים אובייקט (אבל לא את המחלקה google.charts.Line במקום google.visualization.LineChart).

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

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

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

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

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

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

chart.draw(data, options);

...באמצעות:

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

תרשימי Y

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

שימו לב: לא רק שני צירי y מסומנים בצורה שונה ("טמפ'" או "אור יום"), אלא לכל אחד מהם יש קנה מידה עצמאי וקווי רשת משלו. כדי לשנות את ההתנהגות הזו, יש להשתמש באפשרויות vAxis.gridlines ו-vAxis.viewWindow.

בקוד Material שלמטה, האפשרויות axes ו-series יחד מציינות את המראה הכפול של התרשים. האפשרות series מציינת באיזה ציר להשתמש עבור כל אחד מהם ('Temps' ו-'Daylight'. לא צריך להיות להם קשר לשמות העמודות בטבלת הנתונים). לאחר מכן, האפשרות axes הופכת את התרשים הזה לתרשים {0/}-Y, המציב את הציר 'Temps' משמאל ואת ציר 'Daylight' שבצד שמאל.

בקוד של הגרסה הקלאסית, יש כמה הבדלים קלים. במקום האפשרות axes, יש להשתמש באפשרות vAxes (או באפשרות hAxes בתרשימים שמתמקדים בכיוון אופקי). בנוסף, במקום להשתמש בשמות, כדאי להשתמש במספרי האינדקסים לתיאום סדרה עם ציר באמצעות האפשרות targetAxisIndex.

חומר
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
הגרסה הקלאסית
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };

מצעדי X

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

כדי שהתוויות והכותרת של ציר ה-X יופיעו בחלק העליון של התרשים במקום בחלק התחתון שלו, אפשר לעשות זאת בתרשימים מהותיים באמצעות האפשרות 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':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

בטעינה

google.charts.load שם החבילה הוא "corechart", ושם הסיווג של ההצגה הוא google.visualization.LineChart. 

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

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

בתרשים Material Line, שם החבילה של google.charts.load הוא "line", ושם הסיווג של התצוגה החזותית הוא google.charts.Line. 

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

  var visualization = new google.charts.Line(container);

פורמט נתונים

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

עמודות:

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

 

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

שם
יעד צבירה
איך בחירות מרובות של נתונים משולבות בהסברים קצרים:
  • 'category': קיבוץ הנתונים שנבחרו לפי x-value.
  • 'series': קיבוץ הנתונים שנבחרו לפי סדרות.
  • 'auto': אפשר לקבץ את הנתונים שנבחרו לפי x-value אם לכל הבחירות יש אותו x-value, ולפי סדרות אחרת.
  • 'none': הצגת הסבר קצר אחד בלבד לכל אפשרות.
הרבה פעמים משתמשים ב-aggregationTarget במקביל ל-selectionMode ול-tooltip.trigger, למשל: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
סוג: מחרוזת
ברירת מחדל: 'אוטומטי'
אנימציה.משך

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

סוג: מספר
ברירת מחדל: 0
אנימציה.התחלה

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

סוג: בוליאני
ברירת המחדל לא
אנימציה.

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

  • 'לינארי' – מהירות קבועה.
  • 'in' - הקלה ב- - הפעלה איטית ומהירות גבוהה יותר.
  • 'out' - יציאה בקלות - הפעלה מהירה והאטה.
  • 'InAndOut' – מתחילים בצורה קלה ונוחה – מתחילים לאט, מאיצים ולאחר מכן מאטים.
סוג: מחרוזת
ברירת מחדל: 'לינארי'
notes.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: אובייקט
ברירת מחדל: null
notes.datum
עבור תרשימים שתומכים בהערות, האובייקט annotations.datum מאפשר לבטל את הבחירה של Google Insights בהערות המסופקות לאלמנטים בודדים בנתונים (כמו ערכים המוצגים בכל עמודה בתרשים עמודות). אפשר לשלוט בצבע באמצעות annotations.datum.stem.color, אורך השורש עם annotations.datum.stem.length והסגנון באמצעות annotations.datum.style.
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור", האורך הוא 12, הצבע הוא "נקודה".
הערות.
עבור תרשימים שתומכים בהערות, האובייקט annotations.domain מאפשר לשנות את הבחירה ב-Google charts עבור הערות שסופקו לדומיין (הציר הראשי של התרשים, למשל ציר ה-X בתרשים אופייני). אפשר לשלוט בצבע באמצעות annotations.domain.stem.color, אורך השורש עם annotations.domain.stem.length והסגנון באמצעות annotations.domain.style.
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור", האורך הוא 5, הסגנון הוא "נקודה".
הערות.highContrast
בתרשימים שתומכים בהערות, הערך הבוליאני של annotations.highContrast מאפשר לשנות את בחירת ההערות ב-Google התרשימים. כברירת מחדל, annotations.highContrast מקבל את הסימון 'נכון', וכתוצאה מכך התרשימים בוחרים צבע רישום עם ניגודיות טובה: צבעים בהירים על רקעים כהים, ו'כהה' באור. אם מגדירים את המאפיין annotations.highContrast כ-False ולא מציינים צבע של הערה משלכם, בתרשימים של Google ייעשה שימוש בצבע ברירת המחדל של ההערה:
סוג: בוליאני
ברירת מחדל: נכון
notes.stem
עבור תרשימים שתומכים בהערות, האובייקט annotations.stem מאפשר לבטל את בחירת התרשימים של Google בסגנון שורש. אפשר לשלוט בצבע באמצעות annotations.stem.color ובאורך שורש באמצעות annotations.stem.length. יש לשים לב שאפשרות אורך השורש לא משפיעה על הערות עם הסגנון 'line': עבור הערות בדאטום 'line', אורך השורש תמיד יהיה זהה לזה של הטקסט, וב הערות של דומיינים מסוג 'line', השורש מורחב לאורך כל התרשים.
Type: אובייקט
ברירת מחדל: הצבע הוא "שחור"; האורך של ההערה הוא 5 עבור הערות הדומיין ו-12 עבור הערות דאטום.
הערות.style
לתרשימים שתומכים בהערות, האפשרות annotations.style מאפשרת לבטל את בחירת סוג ההערות ב-Google התרשימים. הוא יכול להיות 'line' או 'point'.
סוג: מחרוזת
ברירת מחדל: 'נקודה'
notes.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: אובייקט
ברירת מחדל: null
ציר_כותרת

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

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

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

Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
הפעלה ברקע

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

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

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

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

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

סוג: מחרוזת
ברירת מחדל: 'לבן'
תרשים גבולות

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

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

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

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
התרשיםArea.top

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

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

רוחב האזור בתרשים.

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

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

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

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

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

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

Type: אובייקט
ברירת מחדל: null
Crosshair.color

צבע הצלבת, שמתבטא כשם צבע (למשל, "כחול") או ערך RGB (למשל, " #adf").

סוג: מחרוזת
סוג: ברירת מחדל
Crosshair.Focus

אובייקט שמכיל את מאפייני הצלב כאשר הוא מתמקד.
לדוגמה: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type: אובייקט
ברירת מחדל: ברירת מחדל
Crosshair.opacity

השקיפות של הצלב, עם 0.0 שקיפות מלאה ו-1.0 אטימות לחלוטין.

סוג: מספר
ברירת מחדל: 1.0
crosshair.orientation

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

סוג: מחרוזת
ברירת מחדל: 'שניהם'
crosshair.נבחר

אובייקט שמכיל את מאפייני הצלב לאחר הבחירה.
לדוגמה: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type: אובייקט
ברירת מחדל: ברירת מחדל
crosshair.trigger

מתי להציג צלבים: ב-'focus', 'selection' או 'both'.

סוג: מחרוזת
ברירת מחדל: 'שניהם'
סוג עקומה

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

  • 'none' - קווים ישרים ללא עקומה.
  • 'function' - הזוויות של הקו יעברו החלקה.
סוג:מחרוזת
ברירת מחדל: 'ללא'
שקיפות נתונים

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

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

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

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

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

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

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

Type: אובייקט
ברירת מחדל: null
explorer.actions

סייר Google התרשימים תומך בשלוש פעולות:

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

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

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

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

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

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

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

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

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

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

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

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

  • 'דאטום' – התמקדות בנקודת נתונים יחידה. ההתאמה לתא בטבלת הנתונים.
  • 'category' - התמקדות בקיבוץ כל הנקודות על הציר הראשי. מתייחס לשורה בטבלת הנתונים.

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

סוג: מחרוזת
ברירת מחדל: 'דאטום'
גודל גופן

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

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

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

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

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

סוג: בוליאני
ברירת מחדל: False
ציר

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type: אובייקט
ברירת מחדל: null
צירים הקסדצימליים

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

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

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

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

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

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

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

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

מחרוזת בפורמט עבור תוויות מספר או ציר תאריך.

עבור תוויות ציר מספר, זהו קבוצת משנה של עיצוב עשרוני הוגדר תבנית ICU . למשל, הערכים "1,000%", "750%" ו-"50%" יוצגו עבור {format:'#,###%'} בערכים 10, 7.5 ו-0.5. אפשר גם לספק כל אחד מהפרטים הבאים:

  • {format: 'none'}: להצגת מספרים ללא עיצוב (לדוגמה, 8000000)
  • {format: 'decimal'}: הצגת מספרים עם מפרידי אלפים (לדוגמה, 8,000,000 דפים)
  • {format: 'scientific'}: הצגת מספרים בסימון מדעי (למשל, 8e6)
  • {format: 'currency'}: הצגת מספרים במטבע מקומי (למשל, 32,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.

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

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

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

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

Type: אובייקט
ברירת מחדל: null
hAxis.gridlines.color

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

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

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

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

מערך גדלים (כערכי נתונים, לא פיקסלים) בין קווי רשת סמוכים. כרגע האפשרות הזו זמינה רק לצירים מספריים, היא דומה לאפשרויות של gridlines.units.<unit>.interval שבהן נעשה שימוש רק בתאריכים ובשעות. בסולם לינארי, ברירת המחדל היא [1, 2, 2.5, 5] כלומר, ערכי הרשת יכולים להופיע בכל יחידה (1), ביחידות זוגיות (2) או בכפולות של 2.5 או 5. גם כל ערך אחר גדול פי 10 מהערכים האלה (למשל, [10, 20, 25, 50] וגם [.1, .2, .25, .5]). בקני מידה של יומנים, ברירת המחדל היא [1, 2, 5].

סוג: מספר בין 1 ל-10, לא כולל 10.
ברירת מחדל: מחושב
hAxis.gridlines.minSpacing

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

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

כל הערכים של קווי הרשת והסימונים חייבים להיות מכפלה בערך של האפשרות הזו. חשוב לשים לב שבניגוד למרווחי זמן, העוצמה של פי 10 לא כפולה. כך אפשר לאלץ טיקים במספרים שלמים על ידי ציון gridlines.multiple = 1, או לאלץ טיקים להיות מכפילים של 1000 על ידי ציון gridlines.multiple = 1000.

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

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

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

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: אובייקט
ברירת מחדל: null
hAxis.minorGridlines

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

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

Type: אובייקט
ברירת מחדל: null
hAxis.minorGridlines.color

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

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

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

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

האפשרות של minGridlines.interval דומה לאפשרות של מרווחי רשת גדולים, אבל המרווח שייבחר יהיה תמיד קו מפריד של המרווח הראשי של רשת. מרווח ברירת המחדל עבור מאזניים לינאריים הוא [1, 1.5, 2, 2.5, 5], ובקני מידה של יומנים עבור [1, 2, 5].

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

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

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

זהה ל-gridlines.multiple הראשי.

סוג: מספר
ברירת מחדל: 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: אובייקט
ברירת מחדל: null
hAxis.logScale

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

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

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

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

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

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

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

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

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

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

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

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

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

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

ה-viewWindow יורחב באופן אוטומטי כדי לכלול את ערכי המינימום והמקסימום, אלא אם יצוינו 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] }

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

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

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

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

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

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

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

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

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

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

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

אם True, יש לשרטט את הטקסט של הציר האופקי בזווית כדי לסייע בהוספת טקסט נוסף לאורך הציר. אם שגוי, יש לשרטט את הטקסט של הציר האופקי למעלה. התנהגות ברירת המחדל היא להטות את הטקסט אם לא ניתן להתאים את כולן בזמן השרטוט במצב אנכי. חשוב לשים לב שהאפשרות הזו זמינה רק אם המדיניות hAxis.textPosition מוגדרת כ-out (ברירת מחדל). ברירת המחדל היא false עבור תאריכים ושעות.

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

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

סוג: מספר, -90–90
ברירת מחדל: 30
hAxis.maxAlternation

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

סוג: מספר
ברירת מחדל: 2
hAxis.maxTextLines

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

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

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

סוג: מספר
ברירת מחדל: הערך של hAxis.textStyle.fontSize
hAxis.showTextEvery

כמה תוויות של הציר האופקי יש להציג, כאשר 1 מייצג כל תווית, 2 פירושו הצגה של כל תווית אחרת, וכן הלאה. ברירת המחדל היא לנסות להציג כמה שיותר תוויות בלי חפיפה.

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

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

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

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

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

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

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

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

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

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

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

קביעת טווח החיתוך של הציר האופקי.

Type: אובייקט
ברירת מחדל: null
hAxis.viewWindow.max

  • לציר continuous :

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

  • לציר discrete:

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

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

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

  • לציר continuous:

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

  • לציר discrete:

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

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

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

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

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

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

האפשרות הזו לא נתמכת בתרשימי שטח שכוללים את האפשרות isStacked: true/'percent'/'relative'/'absolute'.

סוג: בוליאני
ברירת מחדל: False
מקרא

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: אובייקט
ברירת מחדל: null
האגדה

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

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

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

ערך ברירת המחדל תלוי במיקום המקרא. עבור אגדות 'תחתיות', ברירת המחדל היא 'center', ואילו אגדות אחרות מוגדרות כברירת מחדל ל-'start'.

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

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

האפשרות הזו פועלת כרגע רק כש-אגד.position הוא 'top' (למעלה).

סוג: מספר
ברירת מחדל: 1
Index.pageIndex

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

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

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

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

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

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

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

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

דפוס ההפעלה והכיבוי עבור קווים מקווקווים. לדוגמה, הפונקציה [4, 4] תחזור על עצמה במקפים באורך 4 תווים שאחריהם יש פערים באורך 4, ו-[5, 1, 3] יחזור על קו מפריד באורך 5, פער באורך 1, מקף באורך 3, פער באורך 5, מקף באורך 3 ופער באורך 3 אורך. אפשר לקרוא מידע נוסף במאמר קווים מקווקווים.

סוג: מערך של מספרים
ברירת מחדל: null
קו רוחב

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

סוג: מספר
ברירת מחדל: 2
כיוון

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

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

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

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

קוטר הנקודות המוצגות בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הנקודות. אפשר לעקוף את הערכים בסדרה ספציפית באמצעות המאפיין series. אם משתמשים בקו מגמה, האפשרות pointSize תשפיע על הרוחב של קו המגמה, אלא אם הוא יעקוף את האפשרות trendlines.n.pointsize.

סוג: מספר
ברירת מחדל: 0
נקודות גלויות

קובעת אם הנקודות יוצגו. צריך להגדיר את הערך false כדי להסתיר את כל הנקודות. אפשר לשנות את הערכים של סדרות ספציפיות באמצעות המאפיין series. אם משתמשים בקו מגמה, האפשרות pointsVisible תשפיע על החשיפה של הנקודות בכל קווי המגמות אלא אם מבטלים אותה באמצעות האפשרות trendlines.n.pointsVisible.

אפשר לשנות זאת גם באמצעות תפקיד הסגנון בצורה "point {visible: true}".

סוג: בוליאני
ברירת מחדל: נכון
הפוך קטגוריות

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

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

סוג: בוליאני
ברירת מחדל: False
אפשרויות בחירה

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

סוג: מחרוזת
ברירת מחדל: 'סינגל'
סדרה

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

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

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

    האפשרויות השונות של annotations מספקות רשימה מלאה יותר של האפשרויות להתאמה אישית.

  • color – הצבע שיש להשתמש בו בסדרה הזו. יש לציין מחרוזת חוקית של צבע HTML.
  • curveType - מבטלת את הערך הגלובלי של curveType עבור הסדרה הזו.
  • labelInLegend – התיאור של הסדרה שיופיע במקרא התרשים.
  • lineDashStyle – ביטול הערך lineDashStyle הגלובלי של הסדרה הזו.
  • lineWidth - מבטלת את הערך הגלובלי של lineWidth עבור הסדרה הזו.
  • pointShape – ביטול הערך pointShape הגלובלי של הסדרה הזו.
  • pointSize - מבטלת את הערך הגלובלי של pointSize עבור הסדרה הזו.
  • pointsVisible – ביטול הערך pointsVisible הגלובלי של הסדרה הזו.
  • 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}
}
Type: מערך של אובייקטים, או אובייקט עם אובייקטים בתוך רכיב
ברירת מחדל: {}
עיצוב

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

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

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

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

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

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: אובייקט
ברירת מחדל: null
description.ignoreBounds

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

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

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

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

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

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

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

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

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

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

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

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
overview.trigger

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סוג: בוליאני
ברירת מחדל: נכון
Trendslines.n.showR2

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

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

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

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

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

סוג: בוליאני
ברירת מחדל: False
vAxes

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

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

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

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

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

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: אובייקט
ברירת מחדל: null
0

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

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

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

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

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

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

מחרוזת פורמט עבור תוויות ציר מספרי. זו קבוצת משנה של קבוצת דפוסי ICU . למשל, הערכים "1,000%", "750%" ו-"50%" יוצגו עבור {format:'#,###%'} בערכים 10, 7.5 ו-0.5. אפשר גם לספק כל אחד מהפרטים הבאים:

  • {format: 'none'}: להצגת מספרים ללא עיצוב (לדוגמה, 8000000)
  • {format: 'decimal'}: הצגת מספרים עם מפרידי אלפים (לדוגמה, 8,000,000 דפים)
  • {format: 'scientific'}: הצגת מספרים בסימון מדעי (למשל, 8e6)
  • {format: 'currency'}: הצגת מספרים במטבע מקומי (למשל, 32,000,000.00 ש"ח)
  • {format: 'percent'}: הצגת מספרים באחוזים (לדוגמה, 800,000,000%)
  • {format: 'short'}: מציג מספרים מקוצרים (למשל, 8 מיליון)
  • {format: 'long'}: הצגת מספרים כמילים שלמות (למשל, 8 מיליון)

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

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

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

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

{color: '#333', minSpacing: 20}
Type: אובייקט
ברירת מחדל: null
vAxis.gridlines.color

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

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

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

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

מערך גדלים (כערכי נתונים, לא פיקסלים) בין קווי רשת סמוכים. כרגע האפשרות הזו זמינה רק לצירים מספריים, היא דומה לאפשרויות של gridlines.units.<unit>.interval שבהן נעשה שימוש רק בתאריכים ובשעות. בסולם לינארי, ברירת המחדל היא [1, 2, 2.5, 5] כלומר, ערכי הרשת יכולים להופיע בכל יחידה (1), ביחידות זוגיות (2) או בכפולות של 2.5 או 5. גם כל ערך אחר גדול פי 10 מהערכים האלה (למשל, [10, 20, 25, 50] וגם [.1, .2, .25, .5]). בקני מידה של יומנים, ברירת המחדל היא [1, 2, 5].

סוג: מספר בין 1 ל-10, לא כולל 10.
ברירת מחדל: מחושב
vAxis.gridlines.minSpacing

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

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

כל הערכים של קווי הרשת והסימונים חייבים להיות מכפלה בערך של האפשרות הזו. חשוב לשים לב שבניגוד למרווחי זמן, העוצמה של פי 10 לא כפולה. כך אפשר לאלץ טיקים במספרים שלמים על ידי ציון gridlines.multiple = 1, או לאלץ טיקים להיות מכפילים של 1000 על ידי ציון gridlines.multiple = 1000.

סוג: מספר
ברירת מחדל: 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: אובייקט
ברירת מחדל: null
vAxis.minorGridlines

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

Type: אובייקט
ברירת מחדל: null
vAxis.minorGridlines.color

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

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

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

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

האפשרות של minGridlines.interval דומה לאפשרות של מרווחי רשת גדולים, אבל המרווח שייבחר יהיה תמיד קו מפריד של המרווח הראשי של רשת. מרווח ברירת המחדל עבור מאזניים לינאריים הוא [1, 1.5, 2, 2.5, 5], ובקני מידה של יומנים עבור [1, 2, 5].

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

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

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

זהה ל-gridlines.multiple הראשי.

סוג: מספר
ברירת מחדל: 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: אובייקט
ברירת מחדל: null
vAxis.logScale

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

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

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

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

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

סוג: מחרוזת
ברירת מחדל: null
vAxis.textPosition

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

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

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

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

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

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

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

ה-viewWindow יורחב באופן אוטומטי כדי לכלול את ערכי המינימום והמקסימום, אלא אם יצוינו 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] }
סוג: מערך של רכיבים
ברירת מחדל: אוטומטי
vAxis.title

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

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

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

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

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

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

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

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

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

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

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

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

קביעת טווח החיתוך של הציר האנכי.

Type: אובייקט
ברירת מחדל: null
vAxis.viewWindow.max

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

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

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

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

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

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

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

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

שיטות

שיטה
draw(data, options)

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

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

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

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

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

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

אפשר לקרוא לשיטות הבאות על האובייקט שהוחזר:

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

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

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

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

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

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

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

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

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

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

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

היא מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן נקודות, הערות, ערכים אגדיים וקטגוריות. נקודה או הערה תואמת תא בטבלת הנתונים, ערך מקרא לעמודה ((אינדקס השורה הוא ריק) וקטגוריה לשורה (אינדקס העמודה הוא null). בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון. 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)

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

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

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

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

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

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

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

סוג החזרה: אין

אירועים

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

שם
animationfinish

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

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

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

נכסים: targetID
error

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

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

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

נכסים: currentPageIndex, totalPages
onmouseover

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

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

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

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

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

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

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

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

מדיניות נתונים

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