גרף עוגה וגרפים מרובים של עמודות ב-Open Flash Chart

אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.

במאמר הקודם למדנו כיצד לשלוט על סביבת הגרף ב-Open Flash Chart – צבע הצירים והרקע לדוגמא. במאמר הנוכחי אנו נלמד כיצד אפשר ליצור גרף עם כמה עמודות.

יצירת גרף עם כמה עמודות

האמת היא שיצירת גרף מרובה עמודות היא פשוטה מאד. כל מה שעלינו לעשות זה ליצור אובייקט נוסף של bar ולהצמיד אותו לגרף. זה הכל!
הנה הקוד שמשמש אותנו ליצירת הגרף שלעיל:


< ?php
require_once('php-ofc-library/open-flash-chart.php');

//יצירת אובייקט גרף עמודות
$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
$bar->set_colour( '#0048CA');
$bar->set_key('Explorer Users', 14);
$bar->set_alpha(0.5);
$bar->set_tooltip('#val# Millions');

//יצירת אובייקט גרף עמודות נוסף
$bar2 = new bar();
$bar2->set_values( array(1,2,3,4,5,6,7,8,9) );
$bar2->set_colour( '#D90101');
$bar2->set_key('FireFox Users', 14);
$bar2->set_alpha(0.5);
$bar2->set_tooltip('#val# Millions');

//יצירת אובייקט גרף והצמדה של אובייקט העמודות והכותרת
$chart = new open_flash_chart();

$chart->add_element( $bar );
$chart->add_element( $bar2 );

//הדפסה של ה-JSON
print $chart->toPrettyString();

גרף עוגה

גרף פופולרי מאד ששונה מאד מגרף עמודות הוא גרף עוגה. כל המתודות המשמשות אותנו לגרף עוגה נמצאות בחלק על גרף עוגה בדוקומנטציה של Open Flash Chart. אך אנו נעבור על חלק מהמתודות האלו כאן.

הנה הדוגמא שלנו:

והנה הקוד שיוצר את אובייקט ה-JSON שמשמש את Open Flash Chart ליצירת גרף העוגה:


< ?php
require_once('php-ofc-library/open-flash-chart.php');

//יצירת אובייקטים של אנימצית גרף עוגה
$anim_pie_bounce = new pie_bounce (20);
$anim_pie_fade = new pie_fade ();

//יצירת אובייקט גרף עוגה
$pie = new pie();
$pie->set_values( array(50,30,20,10, 5, 20, 10, 40, 36) );
$pie->set_colours(array('#FF00FF', '#EA0099', '#FF0066', '#FF3300', '#FF9900', '#FFCC00', '#FFFF00'));
$pie->set_gradient_fill();
$pie->start_angle(50);
$pie->set_alpha(0.5);
$pie->radius(180);
$pie->add_animation($anim_pie_bounce);
$pie->add_animation($anim_pie_fade);

//יצירת אובייקט גרף והצמדה של אובייקט העמודות והכותרת
$chart = new open_flash_chart();

$chart->add_element($pie);

//הדפסה של ה-JSON
print $chart->toPrettyString();

מתודת set_values

המתודה הזו זהה למתודה המקבילה בגרף עמודות. היא מקבלת כארגומנט מערך של ערכים.

מתודת set_colours

המתודה מקבלת כארגומנט מערך של צבעים ואיתו היא צובעת את מערך הערכים בהתאמה.

מתודת set_gradient_fill

המתודה הזו שלא מקבלת פרמטרים גורמת לאפקט gradient בגרף העוגה.

מתודת start_angle

המתודה קובעת את הזווית שמתחילים איתה באנימציה הדיפולטיבית של גרף העוגה. היא מקבלת מספר של מעלות מ-0 עד 360.

מתודת set_tooltip

המתודה הזו עובדת בדיוק כמו מתודת set_tooltip שהוסברה בפירוט בגרף העמודות. המתודה מקבלת אובייקט מסוג tooltip שקובע איך הטקסט המרחף מעל כל ערך יראה.

מתודת set_alpha

מתודה הקובעת שקיפות שעובדת בדיוק כמו מתודת set_alpha שהוסברה בפירוט בגרף העמודות. המתודה מקבלת מספר מ0 (ללא שקיפות ועד 1 (שקיפות מלאה).

מתודת set_no_labels

מתודה שמבטלת את המקרא.

מתודת radius

מתודה שקובעת את הרדיוס של העיגול. היא מקבלת ארגומנט אחד של מספר בפיקסלים שהוא הרדיוס.

מתודת add_animation

המתודה הזו משמשת להוספת אנימציה כאשר העכבר עולה על חלק מסוים בגרף העוגה. המתודה מקבל ארגומנט אחד והוא אובייקט האנימציה.
ישנן שני אובייקטים של אנימציה שניתן להשתמש בהם בגרף מסוג עוגה:

אובייקט אנימציה מסוג pie_bounce

האובייקט הזה גורם לחלק שמעליו העכבר נמצא לזוז. ה-constructor של האובייקט מקבל רק ארגומנט אחד שקובע את מספר הפיקסלים של התזוזה.

אובייקט אנימציה מסוג new pie_fade

האובייקט הזה גורם לחלק שמעליו העכבר נמצא להפוך ללא שקוף. שימושי אם השתמשנו כבר במתודת set_alpha.

כפי שאנו רואים בדוגמא, ניתן להוסיף את שני האובייקטים גם יחד לגרף עוגה.

במאמר הבא אנו נלמד על גרף קווי.

אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. 🙂

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: , , פורסם בקטגוריה: Open Flash Chart

אל תשארו מאחור! יש עוד מה ללמוד!