أداة إنشاء المخططات الشريطية لمزيد من التفاصيل، يُرجى الاطّلاع على مستندات أدوات الرسم البياني من Google.
في ما يلي مثال يوضّح كيفية إنشاء رسم بياني شريطي. يتم استيراد البيانات من جدول بيانات Google.
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1'; const chartBuilder = Charts.newBarChart() .setTitle('Top Grossing Films in US and Canada') .setXAxisTitle('USD') .setYAxisTitle('Film') .setDimensions(600, 500) .setLegendPosition(Charts.Position.BOTTOM) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
الطُرق
| الطريقة | نوع القيمة التي تم إرجاعها | وصف قصير |
|---|---|---|
build() | Chart | ينشئ الرسم البياني. |
reverse | Bar | تعكس هذه السمة ترتيب رسم السلسلة على محور النطاق. |
reverse | Bar | تعكس هذه السمة الاتجاه الذي تنمو فيه الأشرطة على طول المحور الأفقي. |
set | Bar | تضبط هذه السمة لون الخلفية للمخطّط. |
set | Bar | تضبط هذه السمة ألوان الخطوط في الرسم البياني. |
set | Bar | تضبط هذه السمة عنوان URL لمصدر البيانات المستخدَم لجلب البيانات من مصدر خارجي، مثل "جداول بيانات Google". |
set | Bar | تضبط هذه السمة جدول البيانات الذي سيتم استخدامه للرسم البياني باستخدام DataTableBuilder. |
set | Bar | تضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات المحور س. |
set | Bar | تضبط هذه السمة تعريف عرض البيانات الذي سيتم استخدامه للرسم البياني. |
set | Bar | تضبط هذه السمة أبعاد الرسم البياني. |
set | Bar | تضبط هذه السمة موضع وسيلة الإيضاح بالنسبة إلى الرسم البياني. |
set | Bar | تضبط هذه السمة نمط نص وسيلة الإيضاح في الرسم البياني. |
set | Bar | تضبط هذه السمة الخيارات المتقدّمة لهذا الرسم البياني. |
set | Bar | تضبط هذه السمة النطاق الخاص بالمخطط. |
set | Bar | يستخدم خطوطًا مكدّسة، ما يعني أنّه يتم تجميع قيم الخطوط والأعمدة (تراكمها). |
set | Bar | تضبط هذه السمة عنوان الرسم البياني. |
set | Bar | تضبط هذه السمة نمط النص لعنوان الرسم البياني. |
set | Bar | تضبط هذه السمة نمط نص المحور الأفقي. |
set | Bar | تضيف هذه السمة عنوانًا إلى المحور الأفقي. |
set | Bar | تضبط هذه السمة نمط نص عنوان المحور الأفقي. |
set | Bar | تضبط هذه السمة نمط نص المحور العمودي. |
set | Bar | تضيف هذه السمة عنوانًا إلى المحور العمودي. |
set | Bar | تضبط هذه السمة نمط نص عنوان المحور العمودي. |
use | Bar | يحوّل محور النطاق إلى مقياس لوغاريتمي (يتطلّب أن تكون جميع القيم موجبة). |
مستندات تفصيلية
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();
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
reverseDirection()
تعكس هذه السمة الاتجاه الذي تنمو فيه الأشرطة على طول المحور الأفقي. بشكل تلقائي، تزداد القيم من اليمين إلى اليسار. يؤدي استدعاء هذه الطريقة إلى نموّها من اليمين إلى اليسار.
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setBackgroundColor(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") |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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']);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
css | String[] | مصفوفة من قيم CSS للألوان، مثل ["red", "#acf"] يمثّل العنصر رقم n في المصفوفة لون الخط رقم n في الرسم البياني. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setDataSourceUrl(url)
تضبط هذه السمة عنوان URL لمصدر البيانات المستخدَم لجلب البيانات من مصدر خارجي، مثل "جداول بيانات Google". في حال توفير عنوان URL لمصدر بيانات وDataTable، سيتم تجاهل عنوان URL لمصدر البيانات.
لمزيد من المعلومات حول طلب مصادر البيانات، يُرجى الاطّلاع على مستندات أدوات الرسم البياني من Google.
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
url | String | عنوان URL لمصدر البيانات، بما في ذلك أي مَعلمات طلب بحث |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setDataTable(tableBuilder)
تضبط هذه السمة جدول البيانات الذي سيتم استخدامه للرسم البياني باستخدام DataTableBuilder. هذه طريقة ملائمة
لضبط جدول البيانات بدون الحاجة إلى استدعاء build().
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
table | Data | أداة إنشاء جداول البيانات يتم إنشاء جدول بيانات جديد على الفور كجزء من هذا الطلب، وبالتالي لن تظهر أي تعديلات أخرى على أداة الإنشاء في الرسم البياني. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setDataTable(table)
تضبط جدول البيانات الذي يحتوي على خطوط الرسم البياني، بالإضافة إلى تصنيفات المحور س. يجب أن يكون العمود الأول عبارة عن سلسلة نصية، وأن يحتوي على تصنيفات المحور الأفقي. يمكن أن يتبع ذلك أي عدد من الأعمدة، ويجب أن تكون جميعها رقمية. يتم عرض كل عمود كخط منفصل.
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
table | Data | جدول البيانات الذي سيتم استخدامه للرسم البياني |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setDataViewDefinition(dataViewDefinition)
تضبط هذه السمة تعريف عرض البيانات الذي سيتم استخدامه للرسم البياني.
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
data | Data | كائن تعريف لعرض البيانات يحدّد العرض الذي يجب استخراجه من مصدر البيانات المحدّد لرسم المخطط. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setDimensions(width, height)
تضبط هذه السمة أبعاد الرسم البياني.
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
width | Integer | تمثّل هذه السمة عرض الرسم البياني بالبكسل. |
height | Integer | تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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 | موضع وسيلة الإيضاح |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص الذي سيتم استخدامه لتسمية الرسم البياني التوضيحية. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setOption(option, value)
تضبط هذه السمة الخيارات المتقدّمة لهذا الرسم البياني. الخيارات المتاحة لهذا الرسم البياني ليس لهذه الطريقة أي تأثير إذا كان الخيار المحدّد غير صالح.
// Build a bar chart with a 1-second animation duration. const builder = Charts.newBarChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
option | String | الخيار المطلوب ضبطه |
value | Object | القيمة المطلوب ضبطها. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setRange(start, end)
تضبط هذه السمة النطاق الخاص بالمخطط.
إذا كانت أي نقاط بيانات تقع خارج النطاق، يتم توسيع النطاق ليشمل نقاط البيانات هذه.
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
start | Number | تمثّل هذه السمة قيمة خط الشبكة الأدنى لمحور النطاق. |
end | Number | تمثّل هذه السمة قيمة أعلى خط شبكة لمحور النطاق. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setStacked()
يستخدم خطوطًا مكدّسة، ما يعني أنّه يتم تجميع قيم الخطوط والأعمدة (تراكمها). لا يتم تجميع الإشعارات تلقائيًا.
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setTitle(chartTitle)
تضبط هذه السمة عنوان الرسم البياني. يظهر العنوان في المنتصف أعلى الرسم البياني.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
chart | String | تمثّل هذه السمة عنوان المخطط. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص المطلوب استخدامه لعنوان الرسم البياني. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle(). |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص الذي سيتم استخدامه لعنوان المحور الأفقي. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle(). |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
setXAxisTitle(title)
تضيف هذه السمة عنوانًا إلى المحور الأفقي. يتم توسيط العنوان ويظهر أسفل تصنيفات قيم المحور.
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
title | String | تمثّل هذه السمة عنوان المحور الأفقي. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص الذي سيتم استخدامه لعنوان المحور الأفقي. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle(). |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص الذي سيتم استخدامه لعنوان المحور الأفقي. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle(). |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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. |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
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);
المَعلمات
| الاسم | النوع | الوصف |
|---|---|---|
text | Text | نمط النص الذي سيتم استخدامه لعنوان المحور الأفقي. يمكنك إنشاء عنصر Text من خلال استدعاء Charts.newTextStyle(). |
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل
useLogScale()
يحوّل محور النطاق إلى مقياس لوغاريتمي (يتطلّب أن تكون جميع القيم موجبة). محور النطاق هو المحور العمودي للرسومات البيانية العمودية (مثل الخطية أو المساحية أو العمودية) والمحور الأفقي للرسومات البيانية الأفقية (مثل الشريطية).
الإرجاع
BarChartBuilder: أداة إنشاء مفيدة للتسلسل