أداة إنشاء الرسوم البيانية بالنقاط المبعثرة لمزيد من التفاصيل، يُرجى الاطّلاع على مستندات "رسومات Google".
في ما يلي مثال يوضّح كيفية إنشاء مخطّط بياني خطي. تم استيراد البيانات من جدول بيانات Google.
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1'; const chartBuilder = Charts.newScatterChart() .setTitle('Adjusted GDP & U.S. Population') .setXAxisTitle('U.S. Population (millions)') .setYAxisTitle('Adjusted GDP ($ billions)') .setDimensions(600, 500) .setLegendPosition(Charts.Position.NONE) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
الطُرق
الطريقة | نوع القيمة التي يتم عرضها | وصف قصير |
---|---|---|
build() | Chart | إنشاء الرسم البياني |
set | Scatter | لضبط لون خلفية الرسم البياني. |
set | Scatter | تُستخدَم لضبط ألوان الخطوط في الرسم البياني. |
set | Scatter | لضبط عنوان URL لمصدر البيانات المستخدَم لسحب البيانات من مصدر خارجي، مثل "جداول بيانات Google". |
set | Scatter | تُستخدَم هذه الطريقة لضبط جدول البيانات الذي سيتم استخدامه في الرسم البياني باستخدام DataTableBuilder. |
set | Scatter | تُستخدَم لضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات محور السّين. |
set | Scatter | لضبط تعريف عرض البيانات المراد استخدامه في الرسم البياني |
set | Scatter | تُستخدَم لضبط سمات الرسم البياني. |
set | Scatter | لضبط موضع العنوان التفسيري بالنسبة إلى الرسم البياني |
set | Scatter | لضبط نمط النص لشرح الرسم البياني |
set | Scatter | لضبط الخيارات المتقدّمة لهذا الرسم البياني |
set | Scatter | تُستخدَم لضبط نمط النقاط في الخط. |
set | Scatter | لضبط عنوان الرسم البياني. |
set | Scatter | لضبط نمط النص لعنوان الرسم البياني |
set | Scatter | تحويل المحور الأفقي إلى مقياس لوغاريتمي (يتطلب أن تكون جميع القيم موجبة) |
set | Scatter | لضبط النطاق للمحور الأفقي للرسم البياني |
set | Scatter | لضبط نمط نص المحور الأفقي |
set | Scatter | تضيف عنوانًا إلى المحور الأفقي. |
set | Scatter | لضبط نمط نص عنوان المحور الأفقي. |
set | Scatter | تحويل المحور العمودي إلى مقياس لوغاريتمي (يتطلب أن تكون جميع القيم موجبة) |
set | Scatter | لضبط النطاق للمحور العمودي للرسم البياني. |
set | Scatter | لضبط نمط نص المحور العمودي |
set | Scatter | تُضيف عنوانًا إلى المحور العمودي. |
set | Scatter | تُستخدَم لضبط نمط نص عنوان المحور العمودي. |
مستندات تفصيلية
build()
إنشاء الرسم البياني
الإرجاع
Chart
- عنصر رسم بياني، يمكن تضمينه في المستندات أو عناصر واجهة المستخدم أو استخدامه كصورة ثابتة.
set Background Color(cssValue)
لضبط لون خلفية الرسم البياني.
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
المعلمات
الاسم | النوع | الوصف |
---|---|---|
css | String | قيمة CSS للّون (مثل "blue" أو "#00f" ) |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Colors(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']);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
css | String[] | صفيف من قيم CSS للألوان، مثل ["red", "#acf"] يمثّل العنصر n
في الصفيف لون الخط n في الرسم البياني. |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Data Source Url(url)
لضبط عنوان URL لمصدر البيانات المستخدَم لسحب البيانات من مصدر خارجي، مثل "جداول بيانات Google". في حال تقديم عنوان URL لمصدر بيانات وDataTable، يتم تجاهل عنوان URL لمصدر البيانات.
لمزيد من المعلومات عن طلب البحث من مصادر البيانات، يمكنك الاطّلاع على مستندات "رسومات Google".
المعلمات
الاسم | النوع | الوصف |
---|---|---|
url | String | عنوان URL لمصدر البيانات، بما في ذلك أي مَعلمات طلب بحث |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Data Table(tableBuilder)
تُستخدَم هذه الطريقة لضبط جدول البيانات الذي سيتم استخدامه في الرسم البياني باستخدام DataTableBuilder. هذه طريقة سهلة
لضبط جدول البيانات بدون الحاجة إلى استدعاء build()
.
المعلمات
الاسم | النوع | الوصف |
---|---|---|
table | Data | أداة إنشاء جداول البيانات يتم إنشاء جدول بيانات جديد على الفور كجزء من هذا الطلب، لذا لن تظهر أي تعديلات أخرى على أداة الإنشاء في الرسم البياني. |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Data Table(table)
تُستخدَم لضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات محور السّين. يجب أن يكون العمود الأول سلسلة، وأن يحتوي على تصنيفات المحور الأفقي. يمكن أن يتبع ذلك أي عدد من الأعمدة ، ويجب أن تكون جميعها رقمية. يتم عرض كل عمود كخط منفصل.
المعلمات
الاسم | النوع | الوصف |
---|---|---|
table | Data | جدول البيانات المراد استخدامه في الرسم البياني |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Data View Definition(dataViewDefinition)
لضبط تعريف عرض البيانات المراد استخدامه في الرسم البياني
المعلمات
الاسم | النوع | الوصف |
---|---|---|
data | Data | عنصر تعريف عرض البيانات الذي يحدِّد العرض الذي يجب أن يتم اشتقاقه من مصدر البيانات المحدَّد لرسم الرسم البياني |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Dimensions(width, height)
تُستخدَم لضبط سمات الرسم البياني.
المعلمات
الاسم | النوع | الوصف |
---|---|---|
width | Integer | عرض الرسم البياني، بالبكسل |
height | Integer | ارتفاع الرسم البياني، بالبكسل |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Legend Position(position)
لضبط موضع العنوان التفسيري بالنسبة إلى الرسم البياني لا يتوفّر رسم توضيحي تلقائيًا.
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
position | Position | موضع التسمية التوضيحية |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Legend Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المُستخدَم لشرح الرسم البياني. |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Option(option, value)
لضبط الخيارات المتقدّمة لهذا الرسم البياني اطّلِع على الخيارات المتاحة لهذا الرسم البياني. لن يكون لهذه الطريقة أي تأثير إذا كان الخيار المحدَّد غير صالح.
// Build a scatter chart with a 1-second animation duration. const builder = Charts.newScatterChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
المعلمات
الاسم | النوع | الوصف |
---|---|---|
option | String | خيار الضبط |
value | Object | القيمة المطلوب ضبطها |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Point Style(style)
تُستخدَم لضبط نمط النقاط في الخط. لا تتضمّن النقاط تلقائيًا أنماطًا معيّنة، ولا يظهر سوى الخط.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
style | Point | النمط المراد استخدامه للنقاط في الخط |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
انظر أيضًا
set Title(chartTitle)
لضبط عنوان الرسم البياني. يتم عرض العنوان في منتصف أعلى الرسم البياني.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
المعلمات
الاسم | النوع | الوصف |
---|---|---|
chart | String | عنوان الرسم البياني |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set Title Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المُستخدَم لعنوان الرسم البياني. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle() . |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set XAxis Log Scale()
تحويل المحور الأفقي إلى مقياس لوغاريتمي (يتطلب أن تكون جميع القيم موجبة)
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set XAxis Range(start, end)
لضبط النطاق للمحور الأفقي للرسم البياني
إذا كانت أي نقاط بيانات خارج النطاق، يتم توسيع النطاق لتضمين نقاط البيانات هذه.
// Creates a scatter chart builder and sets the X-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setXAxisRange(0, 100);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
start | Number | قيمة أدنى خط شبكة للمحور الأفقي. |
end | Number | قيمة أعلى خط شبكة للمحور الأفقي. |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set XAxis Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المراد استخدامه لعنوان المحور الأفقي يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle() . |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set XAxis Title(title)
تضيف عنوانًا إلى المحور الأفقي. يتم وضع العنوان في المنتصف ويظهر أسفل تصنيفات قيمة المحور.
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
المعلمات
الاسم | النوع | الوصف |
---|---|---|
title | String | عنوان المحور X |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set XAxis Title Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المراد استخدامه لعنوان المحور الأفقي يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle() . |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set YAxis Log Scale()
تحويل المحور العمودي إلى مقياس لوغاريتمي (يتطلب أن تكون جميع القيم موجبة)
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set YAxis Range(start, end)
لضبط النطاق للمحور العمودي للرسم البياني. إذا كانت أي نقاط بيانات خارج النطاق، يتم توسيع النطاق لتضمين نقاط البيانات هذه.
// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setYAxisRange(0, 100);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
start | Number | قيمة أدنى خط شبكة للمحور الرأسي |
end | Number | قيمة أعلى خط شبكة للمحور الرأسي. |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set YAxis Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المراد استخدامه لعنوان المحور الأفقي يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle() . |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set YAxis Title(title)
تُضيف عنوانًا إلى المحور العمودي. يكون العنوان في المنتصف ويظهر على يمين تصنيفات القيمة.
// Creates a line chart builder and sets the Y-axis title. const builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title');
المعلمات
الاسم | النوع | الوصف |
---|---|---|
title | String | عنوان المحور Y |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.
set YAxis Title Text Style(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);
المعلمات
الاسم | النوع | الوصف |
---|---|---|
text | Text | نمط النص المراد استخدامه لعنوان المحور الأفقي يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle() . |
الإرجاع
Scatter
— هذا المُنشئ مفيد لإنشاء سلاسل.