Class LineChartBuilder

כלי ליצירתתרשימיקו

כלי ליצירת תרשימי קו. פרטים נוספים זמינים במסמכי העזרה של Google Charts.

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

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AG5' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1';

const chartBuilder = Charts.newLineChart()
                         .setTitle('Yearly Rainfall')
                         .setXAxisTitle('Month')
                         .setYAxisTitle('Rainfall (in)')
                         .setDimensions(600, 500)
                         .setCurveStyle(Charts.CurveStyle.SMOOTH)
                         .setPointStyle(Charts.PointStyle.MEDIUM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

Methods

שיטהסוג הערך המוחזרתיאור קצר
build()Chartיצירת התרשים.
reverseCategories()LineChartBuilderהיפוך כיוון הציור של הסדרות בציר הדומיין.
setBackgroundColor(cssValue)LineChartBuilderהגדרת צבע הרקע של התרשים.
setColors(cssValues)LineChartBuilderהגדרת הצבעים של השורות בתרשים.
setCurveStyle(style)LineChartBuilderהגדרת הסגנון שישמש לקווים העקומים בתרשים.
setDataSourceUrl(url)LineChartBuilderהגדרת כתובת ה-URL של מקור הנתונים שמשמש לשליפת נתונים ממקור חיצוני, כמו Google Sheets.
setDataTable(tableBuilder)LineChartBuilderהגדרת טבלת הנתונים לשימוש בתרשים באמצעות DataTableBuilder.
setDataTable(table)LineChartBuilderהגדרת טבלת הנתונים שמכילה את הקווים של התרשים, וגם את התוויות של ציר ה-X.
setDataViewDefinition(dataViewDefinition)LineChartBuilderהגדרת ההגדרה של תצוגת הנתונים שישמשו את התרשים.
setDimensions(width, height)LineChartBuilderהגדרת המאפיינים של התרשים.
setLegendPosition(position)LineChartBuilderהגדרת המיקום של המקרא ביחס לתרשים.
setLegendTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של המיתוג של התרשים.
setOption(option, value)LineChartBuilderהגדרת אפשרויות מתקדמות לתרשים הזה.
setPointStyle(style)LineChartBuilderהגדרת הסגנון של הנקודות בשורה.
setRange(start, end)LineChartBuilderהגדרת הטווח של התרשים.
setTitle(chartTitle)LineChartBuilderהגדרת כותרת התרשים.
setTitleTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של שם התרשים.
setXAxisTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של הציר האופקי.
setXAxisTitle(title)LineChartBuilderהוספת כותרת לציר האופקי.
setXAxisTitleTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של הכותרת של הציר האופקי.
setYAxisTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של הציר האנכי.
setYAxisTitle(title)LineChartBuilderהוספת כותרת לציר האנכי.
setYAxisTitleTextStyle(textStyle)LineChartBuilderהגדרת סגנון הטקסט של הכותרת של הציר האנכי.
useLogScale()LineChartBuilderהופכת את ציר הטווח לסולם לוגריתמי (כל הערכים צריכים להיות חיוביים).

מסמכים מפורטים

build()

יצירת התרשים.

חזרה

Chart — אובייקט של תרשים, שאפשר להטמיע במסמכים, ברכיבי ממשק משתמש או להשתמש בו כתמונה סטטית.


reverseCategories()

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

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

חזרה

LineChartBuilder — ה-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").

חזרה

LineChartBuilder — ה-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 בתרשים.

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setCurveStyle(style)

הגדרת הסגנון שישמש לקווים העקומים בתרשים. הסגנונות המותרים של עקומות מפורטים בקטע CurveStyle.

// Creates a line chart builder and curves the lines in the chart.
const builder = Charts.newLineChart();
builder.setCurveStyle(Charts.CurveStyle.SMOOTH);

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.

ראה גם


setDataSourceUrl(url)

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

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setDataTable(tableBuilder)

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setDataTable(table)

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setDataViewDefinition(dataViewDefinition)

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setDimensions(width, height)

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

פרמטרים

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

חזרה

LineChartBuilder — ה-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המיקום של המקרא.

חזרה

LineChartBuilder — ה-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סגנון הטקסט שישמש את כותרת התרשים.

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setOption(option, value)

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

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setPointStyle(style)

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

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.

ראה גם


setRange(start, end)

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

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

פרמטרים

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


setTitle(chartTitle)

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

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

פרמטרים

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

חזרה

LineChartBuilder — ה-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().

חזרה

LineChartBuilder — ה-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().

חזרה

LineChartBuilder — ה-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.

חזרה

LineChartBuilder — ה-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().

חזרה

LineChartBuilder — ה-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().

חזרה

LineChartBuilder — ה-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.

חזרה

LineChartBuilder — ה-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().

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.


useLogScale()

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

חזרה

LineChartBuilder — ה-builder הזה שימושי לשרשור.