כלי לבניית תרשימי שטח. מידע נוסף זמין במשאבי העזרה של Google Tables.
הנה דוגמה שממחישה איך בונים תרשים שטח.
// Create a data table with some sample data.
var sampleData = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Month")
.addColumn(Charts.ColumnType.NUMBER, "Dining")
.addColumn(Charts.ColumnType.NUMBER, "Total")
.addRow(["Jan", 60, 520])
.addRow(["Feb", 50, 430])
.addRow(["Mar", 53, 440])
.addRow(["Apr", 70, 410])
.addRow(["May", 80, 390])
.addRow(["Jun", 60, 500])
.addRow(["Jul", 100, 450])
.addRow(["Aug", 140, 431])
.addRow(["Sep", 75, 488])
.addRow(["Oct", 70, 521])
.addRow(["Nov", 58, 388])
.addRow(["Dec", 63, 400])
.build();
var chart = Charts.newAreaChart()
.setTitle('Yearly Spending')
.setXAxisTitle('Month')
.setYAxisTitle('Spending (USD)')
.setDimensions(600, 500)
.setStacked()
.setColors(['red', 'green'])
.setDataTable(sampleData)
.build();
שיטות
| שיטה | סוג הערך שמוחזר | תיאור קצר |
|---|---|---|
build() | Chart | בונה את התרשים. |
reverseCategories() | AreaChartBuilder | הופכת את ציור הסדרות בציר הדומיין. |
setBackgroundColor(cssValue) | AreaChartBuilder | הגדרת צבע הרקע של התרשים. |
setColors(cssValues) | AreaChartBuilder | הגדרת צבעי הקווים בתרשים. |
setDataSourceUrl(url) | AreaChartBuilder | מגדירה את כתובת ה-URL של מקור הנתונים לצורך שליפת נתונים ממקור חיצוני, כמו Google Sheets. |
setDataTable(tableBuilder) | AreaChartBuilder | מגדיר את טבלת הנתונים לשימוש בתרשים באמצעות DataTableBuilder. |
setDataTable(table) | AreaChartBuilder | מגדיר את טבלת הנתונים שמכילה את הקווים של התרשים ואת התוויות של ציר ה-X. |
setDataViewDefinition(dataViewDefinition) | AreaChartBuilder | מגדיר את ההגדרה של תצוגת הנתונים לשימוש בתרשים. |
setDimensions(width, height) | AreaChartBuilder | מגדיר את מידות התרשים. |
setLegendPosition(position) | AreaChartBuilder | הגדרת המיקום של המקרא ביחס לתרשים. |
setLegendTextStyle(textStyle) | AreaChartBuilder | הגדרת סגנון הטקסט במקרא של התרשים. |
setOption(option, value) | AreaChartBuilder | מגדיר אפשרויות מתקדמות לתרשים הזה. |
setPointStyle(style) | AreaChartBuilder | מגדיר את הסגנון עבור נקודות בקו. |
setRange(start, end) | AreaChartBuilder | הגדרת הטווח של התרשים. |
setStacked() | AreaChartBuilder | הפונקציה משתמשת בקווים מוערם, כלומר שערכי הקו והעמודות מוערם (נצברים). |
setTitle(chartTitle) | AreaChartBuilder | הגדרת כותרת התרשים. |
setTitleTextStyle(textStyle) | AreaChartBuilder | הגדרת סגנון הטקסט של כותרת התרשים. |
setXAxisTextStyle(textStyle) | AreaChartBuilder | מגדיר את סגנון הטקסט של הציר האופקי. |
setXAxisTitle(title) | AreaChartBuilder | הוספת כותרת לציר האופקי. |
setXAxisTitleTextStyle(textStyle) | AreaChartBuilder | מגדיר את סגנון הטקסט של הכותרת בציר האופקי. |
setYAxisTextStyle(textStyle) | AreaChartBuilder | מגדיר את סגנון הטקסט של הציר האנכי. |
setYAxisTitle(title) | AreaChartBuilder | הוספת כותרת לציר האנכי. |
setYAxisTitleTextStyle(textStyle) | AreaChartBuilder | מגדיר את סגנון הטקסט של הכותרת בציר האנכי. |
useLogScale() | AreaChartBuilder | הופכת את ציר הטווח לקנה מידה לוגריתמי (מחייב שכל הערכים יהיו חיוביים). |
תיעוד מפורט
build()
בונה את התרשים.
החזרות
Chart - אובייקט תרשים, שאפשר להטמיעו במסמכים וברכיבי ממשק משתמש ולהשתמש בו כתמונה סטטית.
reverseCategories()
הופכת את ציור הסדרות בציר הדומיין. בתרשימים של טווח אנכי (כמו תרשימי קו, תרשימי שטח או עמודות), המשמעות היא שהציר האופקי משורטט מימין לשמאל. בתרשימים בטווח אופקי (כמו תרשימי עמודות), הציר האנכי משורטט מלמעלה למטה. בתרשימי עוגה, המשמעות היא שהפרוסות משורטטות נגד כיוון השעון.
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setBackgroundColor(cssValue)
הגדרת צבע הרקע של התרשים.
// Creates a line chart builder and sets the background color to gray
var builder = Charts.newLineChart();
builder.setBackgroundColor("gray");
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
cssValue | String | ערך ה-CSS של הצבע (למשל "blue" או "#00f"). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setColors(cssValues)
הגדרת צבעי הקווים בתרשים.
// Creates a line chart builder and sets the first two lines to be drawn in green and red, // respectively. var builder = Charts.newLineChart(); builder.setColors(["green", "red"]);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
cssValues | String[] | מערך של ערכי CSS של צבע, כמו ["red", "#acf"]. רכיב ה-n במערך מייצג את הצבע של קו ה-n בתרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setDataSourceUrl(url)
מגדירה את כתובת ה-URL של מקור הנתונים לצורך שליפת נתונים ממקור חיצוני, כמו Google Sheets. אם תספקו כתובת URL של מקור נתונים ו-DataTable, המערכת תתעלם מכתובת ה-URL של מקור הנתונים.
מידע נוסף על שאילתות לגבי מקורות נתונים זמין במסמכי התיעוד של Google Graph.
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
url | String | כתובת ה-URL של מקור הנתונים, כולל הפרמטרים של השאילתה. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setDataTable(tableBuilder)
מגדיר את טבלת הנתונים לשימוש בתרשים באמצעות DataTableBuilder. זוהי שיטה נוחה להגדרת טבלת הנתונים בלי להתקשר אל build().
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
tableBuilder | DataTableBuilder | כלי לבניית טבלאות נתונים. טבלת נתונים חדשה נוצרת באופן מיידי כחלק מהקריאה הזו, כך שעדכונים נוספים בכלי לא יופיעו בתרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setDataTable(table)
מגדיר את טבלת הנתונים שמכילה את הקווים של התרשים ואת התוויות של ציר ה-X. העמודה הראשונה צריכה להיות מחרוזת ולהכיל את התוויות של הציר האופקי. אחרי מספר העמודות יכולות להופיע כל העמודות, וכולן צריכות להכיל ערכים מספריים. כל עמודה מוצגת בשורה נפרדת.
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
table | DataTableSource | טבלת הנתונים לשימוש בתרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setDataViewDefinition(dataViewDefinition)
מגדיר את ההגדרה של תצוגת הנתונים לשימוש בתרשים.
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
dataViewDefinition | DataViewDefinition | אובייקט של הגדרה של תצוגת נתונים, שמגדיר את התצוגה שאמורה להיות נגזרת ממקור הנתונים הנתון לשרטוט התרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setDimensions(width, height)
מגדיר את מידות התרשים.
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
width | Integer | רוחב התרשים, בפיקסלים. |
height | Integer | גובה התרשים, בפיקסלים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setLegendPosition(position)
הגדרת המיקום של המקרא ביחס לתרשים. כברירת מחדל, אין מקרא.
// Creates a line chart builder and sets the legend position to right. var builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
position | Position | המיקום של המקרא. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setLegendTextStyle(textStyle)
הגדרת סגנון הטקסט במקרא של התרשים.
// Creates a line chart builder and sets it up for a blue, 26-point legend.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט לשימוש במקרא של התרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setOption(option, value)
מגדיר אפשרויות מתקדמות לתרשים הזה. כדאי לעיין באפשרויות הזמינות בתרשים הזה. לשיטה הזו אין השפעה אם האפשרות הנתונה אינה חוקית.
// Build an area chart with a 1-second animation duration.
var builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
option | String | אפשרות ההגדרה. |
value | Object | הערך שיש להגדיר. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setPointStyle(style)
מגדיר את הסגנון עבור נקודות בקו. כברירת מחדל, לנקודות אין סגנונות מסוימים ורק הקו גלוי.
// Creates a line chart builder and sets large point style. var builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
style | PointStyle | הסגנון לשימוש עבור נקודות בקו. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
כדאי לעיין גם בפרטים הבאים
setRange(start, end)
הגדרת הטווח של התרשים.
אם נקודות נתונים כלשהן נמצאות מחוץ לטווח, הטווח מורחב כך שיכלול את הנקודות האלה.
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
start | Number | הערך של קו הרשת הנמוך ביותר של ציר הטווח. |
end | Number | הערך של קו הרשת הגבוה ביותר בציר הטווח. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setStacked()
הפונקציה משתמשת בקווים מוערם, כלומר שערכי הקו והעמודות מוערם (נצברים). כברירת מחדל, אין מקבצים.
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setTitle(chartTitle)
הגדרת כותרת התרשים. הכותרת מוצגת במרכז התרשים.
// Creates a line chart builder and title to 'My Line Chart'.
var builder = Charts.newLineChart();
builder.setTitle('My Line Chart')
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
chartTitle | String | את כותרת התרשים. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setTitleTextStyle(textStyle)
הגדרת סגנון הטקסט של כותרת התרשים.
// Creates a line chart builder and sets it up for a blue, 26-point title.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setTitleTextStyle(style);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט שישמש לכותרת התרשים. ניתן ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle(). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setXAxisTextStyle(textStyle)
מגדיר את סגנון הטקסט של הציר האופקי.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט לשימוש בכותרת של הציר האופקי. ניתן ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle(). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setXAxisTitle(title)
הוספת כותרת לציר האופקי. הכותרת ממורכזת ומופיעה מתחת לתוויות הערך של הציר.
// Creates a line chart builder and sets the X-axis title.
var builder = Charts.newLineChart();
builder.setTitle('X-axis Title')
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
title | String | הכותרת של ציר ה-X. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setXAxisTitleTextStyle(textStyle)
מגדיר את סגנון הטקסט של הכותרת בציר האופקי.
// Creates a line chart builder and sets the X-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט לשימוש בכותרת של הציר האופקי. ניתן ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle(). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setYAxisTextStyle(textStyle)
מגדיר את סגנון הטקסט של הציר האנכי.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט לשימוש בכותרת של הציר האופקי. ניתן ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle(). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setYAxisTitle(title)
הוספת כותרת לציר האנכי. הכותרת ממורכזת ומופיעה מימין לתוויות הערכים.
// Creates a line chart builder and sets the Y-axis title.
var builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title')
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
title | String | הכותרת של ציר ה-Y. |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
setYAxisTitleTextStyle(textStyle)
מגדיר את סגנון הטקסט של הכותרת בציר האנכי.
// Creates a line chart builder and sets the Y-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);
פרמטרים
| שם | תיאור | התיאור |
|---|---|---|
textStyle | TextStyle | סגנון הטקסט לשימוש בכותרת של הציר האופקי. ניתן ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle(). |
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.
useLogScale()
הופכת את ציר הטווח לקנה מידה לוגריתמי (מחייב שכל הערכים יהיו חיוביים). ציר הטווח הוא הציר האנכי בתרשימים אנכיים (כמו קו, שטח או עמודה) והציר האופקי לתרשימים אופקיים (כמו עמודות).
החזרות
AreaChartBuilder – הכלי הזה – שימושי ליצירת שרשורים.