توضّح هذه الصفحة طريقة إنشاء مجموعة متنوعة من وسائل الشرح والفقاعات التفسيرية والدبابيس والرسومات الأخرى التي يمكن طلبها باستخدام عنوان URL أو إضافتها كعلامات فوق الرسومات البيانية الأخرى.
جدول المحتويات
مقدمة
تتيح لك Chart API إنشاء مجموعة متنوعة من وسائل الشرح أو الدبابيس أو الفقاعات المثيرة للاهتمام التي تجمع بين النصوص والصور. ويُطلق على هذه العناصر اسم الرموز الديناميكية.
يمكنك إنشاء صورة رمز ديناميكية مستقلة بذاتها أو وضع رمز ديناميكي أعلى الرسم البياني كنوع علامة باستخدام المَعلمة chem
. توضّح هذه الصفحة طريقة إنشاء الرموز الديناميكية على أنّها صور مستقلة أو كعلامات على رسم بياني آخر. تصف صفحة مرجع الرموز الديناميكية لمخططات المعلومات البيانية جميع أنواع العلامات الديناميكية المتاحة.
تعتمد بنية إنشاء رمز ديناميكي على ما إذا كنت تريد رمزًا مستقلاً أو رمزًا ديناميكيًا في رسم بياني آخر.
الرموز المستقلة
يمكنك طلب صورة رمز ديناميكية بالطريقة نفسها التي تطلب بها أيًّا من الرسومات البيانية الأخرى. يوفّر الرمز الديناميكي المستقل مجموعة معلَمات مختلفة عن الرسوم البيانية الأخرى التي تتيحها:
المَعلمة | مطلوبة أم اختيارية | الوصف |
---|---|---|
chst=<icon_string_constant> |
حقل مطلوب | تصف نوع الرموز التي يجب إنشاؤها.
|
chld=<icon_data> |
حقل مطلوب | البيانات المحددة المستخدمة لوصف حجم الأيقونة ودورانها ونصها وغيرها من البيانات المطلوبة.
|
cht |
غير مستخدَم | لا تستخدِم الرسوم البيانية المستقلة للرموز الديناميكية المَعلمة cht . |
chs |
غير مستخدَم | لا تستخدِم الرسوم البيانية المستقلة للرموز الديناميكية المَعلمة chs . |
chd |
غير مستخدَم | استخدِم المَعلمة chld لتمرير البيانات إلى رمز ديناميكي مستقل بذاته. |
مثال
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
العلامات الديناميكية
يمكنك تضمين رمز ديناميكي كنوع علامة في عدة أنواع مختلفة من الرسوم البيانية باستخدام المَعلمة chem
. يمكنك الاطّلاع على مستندات chem
لمعرفة كيفية إجراء ذلك.
مثال
https://chart.googleapis.com/chart?
chs=300x140
cht=lc&chco=FF9900,224499
chd=t:75,74,66,30,10,5,3,1
chls=1|1
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
chm=v,ccccFF,0,::.2,2
ميزات الرموز الشائعة
يمكن أن تحتوي معظم الأيقونات على سلاسل نصية أو ظلال مرتبطة بها.
السلاسل النصية
يجب ترميز كل النصوص المعروضة التي تم تمريرها إلى Chart API بترميز UTF-8 ثم ترميز عنوان URL.
ويؤثّر ذلك فقط في الأحرف غير الآمنة لعنوان URL (الأحرف الآمنة لعنوان URL هي في الغالب الأحرف الإنجليزية a-z، بالإضافة إلى مجموعة صغيرة من علامات الترقيم). على سبيل المثال، القيمة بالترميز UTF-8 وعنوان URL للحرف "è" هي "%C3%A8
"، والرمز الصيني 駅 هو "%E9%A7%85
". وستتيح لك معظم المتصفحات استخدام قيمة غير مرمّزة في سلسلة عنوان URL (مثلاً، 駅) وسيتم ترميزها خلف الكواليس.
ومع ذلك، من المحتمل أن يكون أحد المستخدمين الذين يطّلعون على عنوان URL الخاص بالرسم البياني يستخدم متصفّحًا لا يتيح هذا الإجراء، لذلك من الأفضل عادةً ترميز جميع الأحرف غير ASCII
في سلاسل نصية باستخدام الترميز UTF-8 وعنوان URL. يُرجى العِلم أنّ هذا ينطبق فقط على النص المعروض في فقاعات تفسيرية أو دبابيس، وليس مع علامة & أو | أو الأحرف الأخرى التي تشكّل جزءًا من بنية عنوان URL.
عند استخدام المعلَمة chem
لتحديد علامات الرموز الديناميكية، عليك أيضًا إلغاء أحرف معيّنة في النص، كما هو موضّح في مستند chem
.
الظلال
يمكنك إضافة ظلال إلى العديد من الرموز أو حتى رسم ظلال لبعض الرموز بدون الرمز نفسه.
الرموز المظللة
يمكن رسم العديد من هذه الأيقونات بظلال أو بدونها. إذا كان خيار التظليل
متاحًا، سيتضمّن اسم الرمز نسخة تنتهي بالرمز _withshadow
ونسخة أخرى بدون تلك النهاية. يمكنك تحديد رمز بأي من النهاية، بناءً على ما إذا كنت تريد الظل أم لا.
في ما يلي مثال على فقاعة نصية متوسطة ودبوس فيها ظلال وبدونها:
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
ظلال مستقلة
تتيح لك بعض أنواع الأيقونات رسم ظلها بمفردها. قد تحتاج إلى إجراء ذلك إذا كنت تستخدم عدة رموز مظلَّلة متداخلة في رسم، وكانت هذه الرموز قريبة جدًا لدرجة أنّ الظل الوارد من أحد الرموز يقع فوق رمز آخر. على سبيل المثال، إليك فقاعتَان مظلَّلتان، رسم روبرت أولاً، ثم أليس:
لاحظ كيف يغطي ظل نبيلة روبرت بشكل جزئي. لإصلاح ذلك، يمكنك رسم ظل أليس أولاً، ثم فقاعة روبرت، ثم نبيلة بدون ظل. قد لا يكون ذلك واقعيًا تمامًا من حيث الإضاءة والظلال، ولكنه يتجنب حجب فقاعة تفسيرية بظل فقاعة أخرى:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
تحدد جميع العلامات الترتيب z نفسه 1 (py=1
)، لذلك يتم رسمها بالترتيب المدرَج أعلى عناصر الرسم البياني (خط الرسم البياني). يتم أولاً رسم ظل أليس، ثم فقاعة "روبرت"
أعلاه، وأخيرًا يتم رسم فقاعة "أليس"
في الأعلى.
اطّلِع على المستندات الخاصة بنوع الرموز المحددة لمعرفة ما إذا كان بإمكانك رسم ظله بمفرده.
رموز السياق
يمكنك تحديد رمز يختلف لونه أو حجمه أو تكديسه وفقًا للنقطة التي تم تعيينها له. تتوفّر أنواع الرموز هذه كعلامات رموز ديناميكية فقط (مَعلمة chem
)، وليس كرموز مستقلة.
يمكن عرض هذه الرموز على سلسلة غير السلسلة التي تحدِّد لونها أو حجمها أو معلومات تكديسها. وهذا يعني أنّ القيمة ds
للمَعلَمة chem
تحدّد السلسلة التي يجب عرض الرمز عليها، غير أنّ القيم المستخدَمة لتحديد حجم الرمز أو لونه محدّدة في المَعلَمات المذكورة أدناه. أحد الاستخدامات الجيدة لذلك هو استخدام سلسلة بيانات مخفية لبيانات الأيقونات، مع عرض الأيقونات على خط أو شريط مرئي. وإليك بعض الأمثلة:
رمز معروض في سلسلة المصدر | الرمز المعروض في سلسلة غير مصدر | رمز يستخدم سلاسل مخفية |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
أنواع علامات السياق
نوع العلامة | قيمة الثواني: chem |
مثال |
---|---|---|
خيارات اللون | s=cm_color |
|
الاختلاف في المقاس | s=cm_size |
|
التباين في اللون والمقاس | s=cm_color_size |
|
صيغة تكديس | s=cm_repeat |
|
التكديس وتباين الألوان | s=cm_repeat_color |
تدعم الرموز السياقية سلسلة محاذاة اختيارية لتحديد محاذاة وإزاحة الرمز إلى نقطة البيانات. تحتوي هذه السلسلة على البنية التالية:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- حرفان يصفان محاذاة الرمز مع النقطة. وتشمل الأمثلة
tl
(أعلى اليمين) وrb
(أسفل اليمين). يمكنك الاطّلاع على وصف المَعلمة alignment_string للمَعلمةchem
للحصول على بيانات ووصف كاملَين. - h_anchor_offset
- [اختيارية] الإزاحة الأفقية لنقطة الارتساء، بالبكسل يجب أن تكون القيم التي تشمل صفر مسبوقة بالرمز + أو -. ملاحظة مهمة: يجب ترميز عنوان URL + كـ %2B.
- v_anchor_offset
- [اختيارية] الإزاحة العمودية لنقطة الارتساء بالبكسل يجب أن تكون القيم التي تشمل صفر مسبوقة بالرمز + أو -. ملاحظة مهمة: يجب ترميز عنوان URL + كـ %2B.
تجدر الإشارة إلى أنّه يمكنك أيضًا استخدام المكوِّن of
في المعلَمة chem
لتحديد الإزاحة الأفقية والرأسية. في حال تحديد قيم المكوِّن of
وقيم h_anchor_offset v_anchor_offset
، سيتم تطبيق جميع الإزاحة على الرمز.
أمثلة:
hb-0-0 أسفل توسيط أفقي بدون إزاحة |
lb-0-0 أسفل اليمين لا توجد إزاحة |
rb-0-0 أسفل اليمين لا توجد إزاحة |
ht-0-0 الجزء العلوي الأفقي بدون إزاحة |
hb-20-0 أسفل مركز أفقي -20 أفقي 0 عمودي |
hb%2b20-0 أسفل مركز أفقي +20 أفقي 0 عمودي |
hb-0%2b10 أسفل المركز الأفقي 0 أفقي +10 عمودي |
hb-0-20 أسفل مركز أفقي 0 أفقي -20 عمودي |
تباين الألوان (cm_color
)
يمكنك تغيير لون علامة المخطط السياقي وفقًا للنقطة التي تمثلها. يجب عليك تحديد نطاق ألوان، وسيتم تغيير حجم قيمة البيانات إلى لون مقابل ضمن هذا النطاق.
البنية
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- الرمز المُستخدَم حدِّد سلسلة رقم تعريف تحدّد إحدى الصور المُدرَجة في نهاية الصفحة.
- <color_data_series>
- كان الفهرس المستند إلى الصفر لسلسلة البيانات يُستخدم لتغيير ألوان الرموز.
- <low_color>
- قيمة اللون المنخفضة في النطاق، مثل لون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأدنى قيمة ممكنة في نطاق البيانات المتاح.
- <middle_color>
- قيمة اللون الأوسط في النطاق، كلون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بالقيمة المتوسطة في نطاق البيانات المتاح.
- <high_color>
- قيمة اللون المرتفعة في النطاق، كلون HTML مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأعلى قيمة ممكنة في نطاق البيانات المتاح.
- <icon_size>
- حجم الرمز بالبكسل في ما يلي القيم المتوافقة: 12 و16 و24.
- <outline_color>
- لون المخطط الخاص بالرمز، بتنسيق HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <alignment>
- سلسلة اختيارية تصف محاذاة الرمز وإزاحةه.
مثال
|
chem=y;s=cm_color; |
تفاوت الحجم (cm_size
)
يمكنك تغيير حجم محدد الرسم البياني السياقي وحده، وفقًا لسلسلة البيانات التي تختارها.
البنية
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>
- شكل الرمز اختَر إحدى القيم التالية:
maps_pin
أوdisk
أوsquare
. - <size_data_series>
- كان الفهرس المستند إلى الصفر لسلسلة البيانات يُستخدم لتغيير حجم الرموز.
- <zero_value_size>
- الحجم الأساسي للرمز، مع الحد الأدنى لقيمة البيانات للسلسلة.
- <size_multiplier>
- عامل تحجيم الحجم. ويتم ضرب هذه القيمة في الفرق بين قيمة بيانات كل رمز والحد الأدنى لقيمة السلسلة، لاحتساب حجم الرمز النهائي. وبالتالي، لن يتأثر الرمز في قيمة البيانات 0 بهذا المُضاعِف.
- <min_size>
- الحد الأدنى لحجم أي رمز بالبكسل.
- <outline_color>
- لون المخطط الخاص بالرمز، بتنسيق HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <fill_color>
- لون التعبئة للرمز، كلون HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <alignment>
- سلسلة اختيارية تصف محاذاة الرمز وإزاحةه.
أمثلة
مثال أساسي. يتم عرض الرمز بقيمة صفرية بحجم القيمة صفر، وهو 30 بكسل. تتزايد الأحجام مع البيانات. | chd=t:0,10,20,30,40,50,60,70 |
في هذا المثال، تأخذ الرموز بيانات حجمها من الخط الأصفر، ولكن يتم عرضها على الخط الأزرق.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
تفاوت اللون والمقاس (cm_color_size
)
يمكنك تغيير كل من اللون وحجم محدد المخطط السياقي، وفقًا لسلسلة البيانات التي تختارها.
البنية
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>
- شكل الرمز اختَر إحدى القيم التالية:
maps_pin
أوdisk
أوsquare
. - <color_data_series>
- كان الفهرس المستند إلى الصفر لسلسلة البيانات يُستخدم لتغيير ألوان الرموز.
- <low_color>
- قيمة اللون المنخفضة في النطاق، مثل لون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأدنى قيمة ممكنة في نطاق البيانات المتاح.
- <middle_color>
- قيمة اللون الأوسط في النطاق، كلون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بالقيمة المتوسطة في نطاق البيانات المتاح.
- <high_color>
- قيمة اللون المرتفعة في النطاق، كلون HTML مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأعلى قيمة ممكنة في نطاق البيانات المتاح.
- <size_data_series>
- كان الفهرس المستند إلى الصفر لسلسلة البيانات يُستخدم لتغيير حجم الرموز.
- <zero_value_size>
- الحجم الأساسي للرمز، مع الحد الأدنى لقيمة البيانات للسلسلة.
- <size_multiplier>
- عامل تحجيم الحجم. ويتم ضرب هذه القيمة في الفرق بين قيمة بيانات كل رمز والحد الأدنى لقيمة السلسلة، لاحتساب حجم الرمز النهائي. وبالتالي، لن يتأثر الرمز في قيمة البيانات 0 بهذا المُضاعِف.
- <min_size>
- الحد الأدنى لحجم أي رمز بالبكسل.
- <outline_color>
- لون المخطط الخاص بالرمز، بتنسيق HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <alignment>
- سلسلة اختيارية تصف محاذاة الرمز وإزاحةه.
أمثلة
يستخدم هذا المثال سطرين. تستخدم الدبابيس بيانات الألوان من السلسلة التي يتم عرضها فيها، ولكنّها
تستخدم بيانات المقاس من السلسلة الأخرى.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
صيغة التكدس (cm_repeat
)
يمكنك تغيير ارتفاع حزمة الرموز وفقًا لقيمة البيانات عند نقطة معينة.
البنية
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- الرمز المُستخدَم حدِّد سلسلة رقم تعريف تحدّد إحدى الصور المُدرَجة في نهاية الصفحة.
- <repeat_series_index>
- الفهرس المستند إلى الصفر لسلسلة البيانات، ويتم استخدامه لحساب عدد الرموز التي يجب وضعها في هذه المرحلة.
- <scaling_factor>
- يتم قياس قيمة سلسلة البيانات المصدر إلى قيمة من 0 إلى 1 وضربها في هذه القيمة لتحديد عدد العلامات المطلوب وضعها على هذه النقطة. يتم اقتطاع القيم الجزئية.
- <stacking_direction>
- اتجاه التكدس: إما "h" (أحرف صغيرة) بالنسبة إلى الأفقي أو "V" (بأحرف كبيرة) للوضع العمودي.
- <icon_size>
- حجم كل علامة بالبكسل في ما يلي القيم المتوافقة: 12 و16 و24.
- <fill_color>
- لون التعبئة للرمز، كلون HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <outline_color>
- لون المخطط الخاص بالرمز، بتنسيق HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <spacing>
- المساحة التي يجب وضعها بين كل علامة في حزمة، بالبكسل
- <alignment>
- سلسلة اختيارية تصف محاذاة الرمز وإزاحةه.
مثال
يستخدم هذا المثال سلسلة بيانات وهمية ثانية. ولا يتم عرضه على الرسم البياني، بل يُستخدم كطريقة لتباعد جميع الحِزم بالتساوي، بدءًا من أسفل الرسم البياني.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
التكديس وتباين الألوان (cm_repeat_color
)
يمكنك تغيير كل من ارتفاع ولون حزمة الرموز، وفقًا لقيمة البيانات عند نقطة معينة.
البنية
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- الرمز المُستخدَم حدِّد سلسلة رقم تعريف تحدّد إحدى الصور المُدرَجة في نهاية الصفحة.
- <repeat_series_index>
- الفهرس المستند إلى الصفر لسلسلة البيانات، ويتم استخدامه لحساب عدد الرموز التي يجب وضعها في هذه المرحلة.
- <scaling_factor>
- يتم قياس قيمة سلسلة البيانات المصدر إلى قيمة من 0 إلى 1 وضربها في هذه القيمة لتحديد عدد العلامات المطلوب وضعها على هذه النقطة. يتم اقتطاع القيم الجزئية.
- <stacking_direction>
- اتجاه التكدس: إما "h" (أحرف صغيرة) بالنسبة إلى الأفقي أو "V" (بأحرف كبيرة) للوضع العمودي.
- <icon_size>
- حجم كل علامة بالبكسل في ما يلي القيم المتوافقة: 12 و16 و24.
- <color_data_series>
- كان الفهرس المستند إلى الصفر لسلسلة البيانات يُستخدم لتغيير ألوان الرموز.
- <low_color>
- قيمة اللون المنخفضة في النطاق، مثل لون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأدنى قيمة ممكنة في نطاق البيانات المتاح.
- <middle_color>
- قيمة اللون الأوسط في النطاق، كلون HTML سداسي عشري مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بالقيمة المتوسطة في نطاق البيانات المتاح.
- <high_color>
- قيمة اللون المرتفعة في النطاق، كلون HTML مكوّن من ثلاثة أو ستة أرقام (بدون علامة #) ويرتبط ذلك بأعلى قيمة ممكنة في نطاق البيانات المتاح.
- <outline_color>
- لون المخطط الخاص بالرمز، بتنسيق HTML مكوَّن من ثلاثة أو ستة أرقام سداسي عشري (بدون علامة #).
- <spacing>
- المساحة التي يجب وضعها بين كل علامة في حزمة، بالبكسل
- <alignment>
- سلسلة اختيارية تصف محاذاة الرمز وإزاحةه.
مثال
|
chem= |