أداة إنشاء للمخططات المساحية. لمزيد من التفاصيل، راجع مستندات "مخططات Google".
فيما يلي مثال يوضح كيفية إنشاء مخطط مساحي.
// 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". |
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. 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");
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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"]);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
cssValues | String[] | مصفوفة من قيم CSS للألوان، مثل ["red", "#acf"]. ويمثّل العنصر nth في الصفيف لون السطر nth في الرسم البياني. |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
setDataSourceUrl(url)
تحدِّد عنوان URL لمصدر البيانات المستخدَم لسحب البيانات من مصدر خارجي مثل "جداول بيانات Google". في حال تقديم عنوان URL لمصدر البيانات وجدول بيانات، سيتم تجاهل عنوان URL لمصدر البيانات.
للتعرُّف على المزيد من المعلومات عن تنفيذ طلبات بحث في مصادر البيانات، راجِع مستندات مخططات Google.
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
url | String | عنوان URL لمصدر البيانات، بما في ذلك أيّ مَعلمات طلب بحث. |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
setDataTable(tableBuilder)
تُستخدم هذه السياسة في تحديد جدول البيانات في الرسم البياني باستخدام أداة DataTableBuilder. هذه طريقة سهلة لإعداد جدول البيانات بدون الحاجة إلى طلب البيانات من build().
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
tableBuilder | DataTableBuilder | إحدى أدوات إنشاء جداول البيانات. يتم إنشاء جدول بيانات جديد بشكل فوري كجزء من هذا الطلب، لذا لن تظهر أي تعديلات أخرى يتم إجراؤها على أداة الإنشاء في الرسم البياني. |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
setDataTable(table)
تعيين جدول البيانات الذي يحتوي على خطوط المخطط، بالإضافة إلى تصنيفات المحور س. ويجب أن يكون العمود الأول سلسلة، وأن يحتوي على تسميات المحور الأفقي. يمكن أن يتبع أي عدد من الأعمدة، يجب أن تكون جميعها رقمية. يتم عرض كل عمود كسطر منفصل.
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
table | DataTableSource | جدول البيانات المطلوب استخدامه في الرسم البياني |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
setDataViewDefinition(dataViewDefinition)
لتعيين تعريف عرض البيانات لاستخدامه مع الرسم البياني.
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
dataViewDefinition | DataViewDefinition | تمثّل هذه السمة عنصر تعريف عرض البيانات الذي يحدّد العرض الذي يجب اشتقاقه من مصدر البيانات المحدّد لرسم الرسم البياني. |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
setDimensions(width, height)
لضبط الأبعاد للرسم البياني.
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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();
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
style | PointStyle | النمط المطلوب استخدامه للنقاط في الخط. |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
يمكن أيضًا مراجعة
setRange(start, end)
لضبط نطاق الرسم البياني.
إذا كانت أي نقاط بيانات تقع خارج النطاق، يتم توسيع النطاق ليشمل نقاط البيانات هذه.
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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')
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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')
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
title | String | عنوان المحور س. |
استرجاع الكرة
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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')
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
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);
المَعلمات
| الاسم | Type | الوصف |
|---|---|---|
textStyle | TextStyle | نمط النص المطلوب استخدامه لعنوان المحور الأفقي. يمكنك إنشاء كائن TextStyleBuilder من خلال طلب Charts.newTextStyle(). |
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل
useLogScale()
لجعل محور النطاق في مقياس لوغاريتمي (يتطلب ذلك أن تكون جميع القيم موجبة). ومحور النطاق هو المحور الرأسي للمخططات العمودية (مثل الخط أو المنطقة أو العمود) والمحور الأفقي للمخططات الأفقية (مثل الشريط).
استرجاع الكرة
AreaChartBuilder: أداة الإنشاء هذه مفيدة للسلاسل