Class AreaChartBuilder

AreaChartBuilder

‫Builder לתרשימי שטח. פרטים נוספים מופיעים במאמרי העזרה בנושא Google Charts.

בדוגמה הבאה אפשר לראות איך יוצרים תרשים שטח.

// Create a data table with some sample data.
const 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();

const chart = Charts.newAreaChart()
                  .setTitle('Yearly Spending')
                  .setXAxisTitle('Month')
                  .setYAxisTitle('Spending (USD)')
                  .setDimensions(600, 500)
                  .setStacked()
                  .setColors(['red', 'green'])
                  .setDataTable(sampleData)
                  .build();

Methods

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


reverseCategories()

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

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setBackgroundColor(cssValue)

הגדרת צבע הרקע של התרשים.

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

פרמטרים

שםסוגתיאור
cssValueStringערך ה-CSS של הצבע (למשל "blue" או "#00f").

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setColors(cssValues)

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

// Creates a line chart builder and sets the first two lines to be drawn in
// green and red, respectively.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

פרמטרים

שםסוגתיאור
cssValuesString[]מערך של ערכי CSS של צבעים, כמו ["red", "#acf"]. האלמנט ה-n במערך מייצג את הצבע של הקו ה-n בתרשים.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setDataSourceUrl(url)

מגדיר את כתובת ה-URL של מקור הנתונים שמשמש לשליפת נתונים ממקור חיצוני, כמו Google Sheets. אם מספקים כתובת URL של מקור נתונים ו-DataTable, המערכת מתעלמת מכתובת ה-URL של מקור הנתונים.

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

פרמטרים

שםסוגתיאור
urlStringכתובת ה-URL של מקור הנתונים, כולל פרמטרים של שאילתה.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setDataTable(tableBuilder)

מגדיר את טבלת הנתונים שתשמש לתרשים באמצעות DataTableBuilder. זוהי שיטה נוחה להגדרת טבלת הנתונים בלי צורך לקרוא ל-build().

פרמטרים

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

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setDataTable(table)

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

פרמטרים

שםסוגתיאור
tableDataTableSourceטבלת הנתונים שמשמשת ליצירת התרשים.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setDataViewDefinition(dataViewDefinition)

הגדרת ההגדרה של תצוגת הנתונים שתשמש לתרשים.

פרמטרים

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

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setDimensions(width, height)

הגדרת המאפיינים של התרשים.

פרמטרים

שםסוגתיאור
widthIntegerרוחב התרשים, בפיקסלים.
heightIntegerגובה התרשים, בפיקסלים.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setLegendPosition(position)

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

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

פרמטרים

שםסוגתיאור
positionPositionהמיקום של המקרא.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setLegendTextStyle(textStyle)

הגדרת סגנון הטקסט של מקרא התרשים.

// Creates a line chart builder and sets it up for a  blue, 26-point legend.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו רוצים להשתמש עבור מקרא התרשים.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setOption(option, value)

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

// Build an area chart with a 1-second animation duration.
const builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

פרמטרים

שםסוגתיאור
optionStringהאפשרות להגדרה.
valueObjectהערך שצריך להגדיר.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setPointStyle(style)

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

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

פרמטרים

שםסוגתיאור
stylePointStyleהסגנון שבו צריך להשתמש בשביל הנקודות בקו.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.

ראה גם


setRange(start, end)

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

אם יש נקודות נתונים מחוץ לטווח, הטווח יורחב כדי לכלול את נקודות הנתונים האלה.

פרמטרים

שםסוגתיאור
startNumberהערך של קו הרשת הנמוך ביותר בציר הטווח.
endNumberהערך של קו הרשת העליון בציר הטווח.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setStacked()

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

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setTitle(chartTitle)

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

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

פרמטרים

שםסוגתיאור
chartTitleStringכותרת התרשים.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setTitleTextStyle(textStyle)

מגדיר את סגנון הטקסט של שם התרשים.

// Creates a line chart builder and sets it up for a  blue, 26-point title.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו יש להשתמש לכותרת התרשים. אפשר ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle().

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setXAxisTextStyle(textStyle)

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

// Creates a line chart builder and sets the X-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו רוצים להשתמש לכותרת של הציר האופקי. אפשר ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle().

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setXAxisTitle(title)

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

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

פרמטרים

שםסוגתיאור
titleStringהכותרת של ציר ה-X.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setXAxisTitleTextStyle(textStyle)

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

// Creates a line chart builder and sets the X-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו רוצים להשתמש לכותרת של הציר האופקי. אפשר ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle().

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setYAxisTextStyle(textStyle)

הגדרת סגנון הטקסט של הציר האנכי.

// Creates a line chart builder and sets the Y-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו רוצים להשתמש לכותרת של הציר האופקי. אפשר ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle().

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setYAxisTitle(title)

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

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

פרמטרים

שםסוגתיאור
titleStringהכותרת של ציר ה-Y.

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


setYAxisTitleTextStyle(textStyle)

הגדרת סגנון הטקסט של הכותרת של הציר האנכי.

// Creates a line chart builder and sets the Y-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

פרמטרים

שםסוגתיאור
textStyleTextStyleסגנון הטקסט שבו רוצים להשתמש לכותרת של הציר האופקי. אפשר ליצור אובייקט TextStyleBuilder על ידי קריאה ל-Charts.newTextStyle().

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.


useLogScale()

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

חזרה

AreaChartBuilder – ה-builder הזה שימושי לשרשור.