אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » Open Flash Chart » גרף עוגה וגרפים מרובים של עמודות ב-Open Flash Chart

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

רן בר-זיק פברואר 23, 2010 7:24 am אין תגובות

מאמר המסביר על יצירת גרף עוגה וגרף מרובה עמודות ב-Open Flash Chart

אזהרה: Open Flash Chart נחשב כיום כמיושן ועדיף מאוד לא להשתמש בו. במידה ואתם רוצים להטמיע גרפים באתר שלכם, הפתרון הפופולרי הוא Google Charts.
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אזהרה: 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.
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
Open Flash Chart גרפים פלאש
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד