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

גרפים עם Open Flash Chart – גרף עמודות

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

במאמר זה מוסבר כיצד ליצור גרף עמודות באמצעות ספרית PHP5 של OFC.

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

בחלקים הקודמים למדנו איך להציב את הפלאש של Open Flash Chart בצד הקליינט ואיך לשלוט בו באמצעות פרמטרים או JavaScript. עכשיו נעבור ל-server side. בחלקים הקודמים השתמשנו ב-php דמה שמדפיס אובייקט JSON. אובייקט ה-JSON הזה שולט על כל אספקט שיש בגרף – צורתו הבסיסית (עמודות, קו, עוגה, רדיו וכו'), הצבעים השונים, ציר ה-x, ציר ה-y, הערכים ועוד. בעוד שבאופן תיאורטי אנו יכולים להקליד את הקובץ באופן ידני, זה יהיה לא יעיל ולא נכון לעשות זאת. במיוחד כאשר יש לנו גרפים דינמיים שיש צורך שיתעדכנו כל הזמן מה-MySQL או ממקורות אחרים.

אנו נתמקד במאמר זה ביצירת אובייקט ה-JSON. באופן עקרוני, סופו של התהליך זהה גם בקובץ הדמה – הדפסה של קובץ. אך בעוד בקובץ הדמה ההדפסה היא של הארד טקסט שאני הכנסתי, אנו נלמד כיצד לקבוע את כל הפרמטרים באופן דינמי על ידי הספריה של Open Flash Chart שמהווה בעצם את ה-API של ה-OFC בסיומו של התהליך צריך להיות לנו הדפסה של קובץ JSON שאותו נוכל להציב בפלאש שלנו.

בקובץ ה-Open Flash Chart שהורדנו נמצאת תיקיה בשם php5-ofc-library. אנו נשתמש בה בשרת שלנו על מנת ליצור את אובייקט ה-JSON.

בכל הדוגמאות אני משתמש במספרים שהם הארד קופי במקום מספרים רנדומליים. כמובן שבחיים האמיתיים יהיו שם משתנים שהמידע שלהם יילקח ממקום אחר (בדרך כלל אובייקט MySQLi או אובייקט אחר).

גרף עמודות פשוט

ניצור קובץ PHP ונשמור אותו בשרת. לצורך הדוגמא קובץ ה-PHP שלי הוא ofc-json-A1.php. הדבר הראשון שאני כותב בו (לאחר ה-php?>) הוא:

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

זה מכניס את כל הקבצים והאובייקטים שאני צריך לקובץ ה-PHP שלי. עכשיו כל מה שנותר לי הוא ליצור אובייקט של גרף הכולל תכונות חשובות כמו כותרת ואובייקטים נוספים כמו עמודות (שכוללות תכונות כגון צבעים וכו').

ראשית אנו יוצרים את כל האובייקטים שיש בגרף – title למשל ו-bar במקרה ומדובר בגרף עמודות, אחרי כן נגדיר אובייקט chart ונשתמש במתודת add_element על מנת להכליל את כל האלמנטים שיש בו. לבסוף מתודת toPrettyString תעזור לנו להמיר את התוצאה לאובייקט JSON שמיוצג כמחרוזת טקסט ו… זהו.

נשמע מסובך? הכל פשוט עם דוגמה:


< ?php

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

$title = new title('My Title');

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

print $chart->toPrettyString();

ואם אני אכניס את אובייקט ה-JSON הזה לגרף כפי שהראיתי במאמרים הקודמים – הגרף יראה כך.

אז מה הולך פה בעצם? מלבד הגדרת ה-title שנעשית עם אובייקט title, אני מגדיר אובייקט bar ובאמצעות מתודה מכניס לו ערכים. הערכים נכנסים בתוך מערך. המתודה הזו היא המתודה הבסיסית ביותר בכל אובייקט bar (ואובייקטים אחרים כגון pie). אחרי שהשתמשתי בה, אני צריך ליצור אובייקט של גרף ולהשתמש בשתי מתודות – set_title שמקבלת את אובייקט ה-title ו-add_element שמוסיפה לגרף את אובייקט ה-bar.

המתודה האחרונה $chart->toPrettyString() מחזירה לי אובייקט JSON שאותו אני מכניס כפרמטר. איך אובייקט ה-JSON נראה?


{ "elements": [ { "type": "bar", "values": [ 9, 8, 7, 6, 5, 4, 3, 2, 1 ] } ], "title": { "text": "My Title" } }

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

מתודות של bar

המתודות השונות של ה-bar מאפשרות לנו לשנות כרצוננו את התכונות של גרף העמודות – את הצבע, השקיפות, ה-tooltip ואפילו להכניס אנימציה.

ראשית, הנה דוגמא לגרף – אם תרפרשו את העמוד תוכלו לראות שהעמודות בגרף מתחילות להופיע אחרי 10 שניות בערך.

איך עשיתי את זה? השתמשתי בסקריפט הבא:


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

//יצירת אובייקט כותרת ואובייקט אנימציה של קווים
$title = new title('My Title'); 
$line_on_show = new line_on_show('fade-in', 10, 10);

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

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

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

ראשית יצרתי אובייקט חדש של אנימציה קווית new line_on_show. אובייקט זה שאנו משתמשים בו לא רק בגרף עמודות אלא בגרפים נוספים, מגדיר לנו את האנימציה שבה העמודות מופיעות בגרף. הוא מקבל את שלושת הארגומנטים הבאים:
1. סוג האנימציה:
'pop-up'
'explode'
'mid-slide'
'drop'
'fade-in'
'shrink-in'
2. משך האנימציה (בדוגמא שלנו 10 שניות).
3. מתי האנימציה מתחילה (בדוגמא שלנו 10 שניות).

אחרי שיצרתי אותו ויצרתי את אובייקט הכותרת, יכולתי לגשת בשקט למלאכת הרכבת אובייקט ה-bar שלי.

מתודת set_values – מקבלת מערך של ערכים (במקרה הזה סתם מערך של מספרים ששמתי לדוגמא).

מתודת set_colour – מקבלת מחרוזת טקסט של צבע בפורמט HTML פשוט. במקרה הזה בחרתי בצבע כחול.

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

מתודת set_alpha – קובעת את השקיפות של העמודה. מקבלת מספר מ-1 (שקוף לחלוטין) ועד 0 (לא שקוף).

מתודת set_tooltip – קובעת את ה-tooltip. המתודה יכולה להיות כל מחרוזת טקסט ולהחיל גם את מילת הקסם ##value## שמכניסה את הערך של העמודה.

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

שאר הקוד שכולל יצירה של אובייקט chart והדפסת ה-JSON הוסברו לעיל.

הבעיה בה"א הידיעה של Open Flash Chart הוא דוקומנטציה בעייתית לגישה. אם אתם רוצים לבדוק בעצמכם את המתודות שיש לכל אובייקט, יש דוקומנטציה חלקית באתר הזה.

במאמר הבא אנו נלמד על שליטה על מאפייני הגרף עצמו וכן על גרף עוגה.

אזהרה: 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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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