Class AreaChartBuilder

AreaChartBuilder

أداة إنشاء المخططات المساحية لمزيد من التفاصيل، يُرجى الاطّلاع على مستندات أدوات الرسم البياني من Google.

في ما يلي مثال يوضّح كيفية إنشاء رسم بياني مساحي.

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

الطُرق

الطريقة	نوع القيمة التي تم إرجاعها	وصف قصير
build()	Chart	ينشئ الرسم البياني.
reverseCategories()	AreaChartBuilder	تعكس هذه السمة ترتيب رسم السلسلة على محور النطاق.
setBackgroundColor(cssValue)	AreaChartBuilder	تضبط هذه السمة لون الخلفية للمخطّط.
setColors(cssValues)	AreaChartBuilder	تضبط هذه السمة ألوان الخطوط في الرسم البياني.
setDataSourceUrl(url)	AreaChartBuilder	تضبط هذه السمة عنوان URL لمصدر البيانات المستخدَم لجلب البيانات من مصدر خارجي، مثل "جداول بيانات Google".
setDataTable(tableBuilder)	AreaChartBuilder	تضبط هذه السمة جدول البيانات الذي سيتم استخدامه للرسم البياني باستخدام DataTableBuilder.
setDataTable(table)	AreaChartBuilder	تضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات المحور س.
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.
const builder = Charts.newPieChart();
builder.reverseCategories();

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setBackgroundColor(cssValue)

تضبط هذه السمة لون الخلفية للمخطّط.

// Creates a line chart builder and sets the background color to gray
const 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.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

المعلمات

الاسم	النوع	الوصف
cssValues	String[]	مصفوفة من قيم CSS للألوان، مثل ["red", "#acf"] يمثّل العنصر رقم n في المصفوفة لون الخط رقم n في الرسم البياني.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setDataSourceUrl(url)

تضبط هذه السمة عنوان URL لمصدر البيانات المستخدَم لجلب البيانات من مصدر خارجي، مثل "جداول بيانات Google". في حال توفير عنوان URL لمصدر بيانات وDataTable، سيتم تجاهل عنوان URL لمصدر البيانات.

لمزيد من المعلومات حول طلب مصادر البيانات، يُرجى الاطّلاع على مستندات أدوات الرسم البياني من Google.

المعلمات

الاسم	النوع	الوصف
url	String	عنوان URL لمصدر البيانات، بما في ذلك أي مَعلمات طلب بحث

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setDataTable(tableBuilder)

تضبط هذه السمة جدول البيانات الذي سيتم استخدامه للرسم البياني باستخدام DataTableBuilder. هذه طريقة ملائمة لضبط جدول البيانات بدون الحاجة إلى استدعاء build().

المعلمات

الاسم	النوع	الوصف
tableBuilder	DataTableBuilder	أداة إنشاء جداول البيانات يتم إنشاء جدول بيانات جديد على الفور كجزء من هذا الطلب، وبالتالي لن تظهر أي تعديلات أخرى على أداة الإنشاء في الرسم البياني.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setDataTable(table)

تضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات المحور س. يجب أن يكون العمود الأول عبارة عن سلسلة نصية، وأن يحتوي على تصنيفات المحور الأفقي. يمكن أن يتبع ذلك أي عدد من الأعمدة، ويجب أن تكون جميعها رقمية. يتم عرض كل عمود كخط منفصل.

المعلمات

الاسم	النوع	الوصف
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.
const 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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

المعلمات

الاسم	النوع	الوصف
textStyle	TextStyle	نمط النص الذي سيتم استخدامه لتسمية الرسم البياني التوضيحية.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

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

المعلمات

الاسم	النوع	الوصف
option	String	الخيار المطلوب ضبطه
value	Object	القيمة المطلوب ضبطها.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setPointStyle(style)

تضبط هذه السمة نمط النقاط في الخط. لا تتضمّن النقاط أي أنماط معيّنة بشكل تلقائي، ولا يظهر سوى الخط.

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

المعلمات

الاسم	النوع	الوصف
style	PointStyle	نمط النقاط المطلوب استخدامه في الخط

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

انظر أيضًا

• PointStyle

---

setRange(start, end)

تضبط هذه السمة النطاق الخاص بالمخطط.

إذا كانت أي نقاط بيانات تقع خارج النطاق، يتم توسيع النطاق ليشمل نقاط البيانات هذه.

المعلمات

الاسم	النوع	الوصف
start	Number	تمثّل هذه السمة قيمة خط الشبكة الأدنى لمحور النطاق.
end	Number	تمثّل هذه السمة قيمة أعلى خط شبكة لمحور النطاق.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setStacked()

يستخدم خطوطًا مكدّسة، ما يعني أنّه يتم تجميع قيم الخطوط والأعمدة (تراكمها). لا يتم تجميع الإشعارات تلقائيًا.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

setTitle(chartTitle)

تضبط هذه السمة عنوان الرسم البياني. يظهر العنوان في المنتصف أعلى الرسم البياني.

// Creates a line chart builder and title to 'My Line Chart'.
const 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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

المعلمات

الاسم	النوع	الوصف
title	String	تمثّل هذه السمة عنوان المحور الأفقي.

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

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

المعلمات

الاسم	النوع	الوصف
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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

المعلمات

الاسم	النوع	الوصف
textStyle	TextStyle	نمط النص الذي سيتم استخدامه لعنوان المحور الأفقي. يمكنك إنشاء عنصر TextStyleBuilder من خلال استدعاء Charts.newTextStyle().

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل

---

useLogScale()

يحوّل محور النطاق إلى مقياس لوغاريتمي (يتطلّب أن تكون جميع القيم موجبة). محور النطاق هو المحور العمودي للرسومات البيانية العمودية (مثل الخطية أو المساحية أو العمودية) والمحور الأفقي للرسومات البيانية الأفقية (مثل الشريطية).

الإرجاع

‫AreaChartBuilder: أداة إنشاء مفيدة للتسلسل