أداة إنشاء الرسوم البيانية المساحية لمزيد من التفاصيل، اطّلع على مستندات "مخططات 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 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");
المعلمات
| الاسم | النوع | الوصف |
|---|---|---|
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
في الصفيفة لون الخط nth في المخطط. |
الإرجاع
AreaChartBuilder — أداة الإنشاء هذه مفيدة للسلاسل.
setDataSourceUrl(url)
لضبط عنوان URL لمصدر البيانات المُستخدَم لسحب البيانات من مصدر خارجي، مثل Google 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. 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 | عنوان المحور س. |
الإرجاع
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 — أداة الإنشاء هذه مفيدة للسلاسل.