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

גרפים עם Open Flash Chart – שליטה על סביבת הגרף

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

במאמר זה אנו לומדים כיצד לשלוט על הצבע והצורה של הצירים והרקע של Open Flash Chart

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

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

כזכור למי שקרא את המאמרים הקודמים, המטרה שלנו היא לייצר אובייקט JSON שאותו אנו מעבירים לאובייקט פלאשי באמצעות פרמטר או באמצעות JavaScript. אובייקט ה-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) );
$bar->set_colour( '#0048CA');
$bar->set_key('whats up', 14);
$bar->set_alpha(0.5);
$bar->set_tooltip('This is my #val#');

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

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

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

מתודת יצירת כותרת ואובייקט title

מתודת יצירת כותרת היא set_title והיא מקבלת כארגומנט את אובייקט title.
לאובייקט title יש קונסטרקטור שמקבל ארגומנט של הטקסט שיהיה בו ומתודה אחת בלבד set_style שהארגומנט שלה הוא מחרוזת טקסט הכוללת תכונות CSS שאפשר להצמיד לכותרת שלנו.

מתודת יצירת ציר y

על מנת ליצור את ציר y, אני משתמש במתודת set_y_axis שמקבלת כארגומנט אובייקט מסוג ציר y. שמו של האובייקט הוא y_axis. לאובייקט זה יש מספר מתודות שבאמצעותן אנו יכולים לשנות את המראה של התגיות, הערכים שלהן וכו’ וכו’.

המתודות כולן נמצאות במקום המתאים בדוקומנטציה של open flash chart, אך אנו נעבור עליהן בקצרה. הנה דוגמא לציר y ששיניתי אותו כמעט לחלוטין:

הקוד שיוצר את ה-JSON לגרף הזה הוא:


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

//יצירת אובייקט כותרת 
$title = new title('My Title'); 
$title->set_style('color: #FF0707; padding-bottom: 20px;');

//יצירת אובייקט ציר
$y_axis = new y_axis();
$y_axis->set_range(-5, 30, 4);
$y_axis->set_label_text	("#val# Millions");
$y_axis->set_colours('#FF0707', '#000000');
$y_axis->set_stroke(2) ;
$y_axis->set_tick_length(20);

//יצירת אובייקט גרף עמודות
$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#');

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

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

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

קביעת טווח – set_range

קביעת הטווח מאפשרת לנו לקבוע את הטווח שבו ציר ה-y יעבוד. בדרך כלל ה-Open Flash Chart בוחר אוטומטית את הטווח עבורנו אך אנו יכולים לשנות אותו – שימושי מאד אם אנו רוצים לרווח את הגרף. המתודה הזו מקבל 3 ארגומנטים – ערך מינימום (מהיכן שהגרף מתחיל), ערך מקסימום (היכן שהגרף נגמר) וגודל צעד (המרווח בין היחידות השונות).

שינוי צבע של תגיות – set_colour

שימוש במתודה זו מאפשרת לנו לשנות את הצבע של התגיות בלבד. המתודה מקבל ארגומנט של צבע.

שינוי צבע של תגיות ושל הסרגל – set_colours

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

שינוי טקסט של תגיות – set_label_text

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

שינוי עובי קו הסרגל – set_stroke

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

שינוי רוחב של סמני היחידות – set_tick_length

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

יצירת ציר y ימני עבור גרפים בעברית

יצירת ציר y ימני (ומחיקת ציר ה-y השמאלי) היא קריטית כאשר מדובר על גרפים בעברית. כאשר אני רוצה לעשות את זה, אני יוצר ציר y כרגיל, אך מצמיד אותו באמצעות מתודת set_y_axis_right שיוצרת ציר ימני. על מנת למחוק את הציר השמאלי הדפולטיבי, אני יוצר ציר שמאלי ריק ללא טקסט עם צבע גריד נייטרלי שלא יבלוט:

וכך נראה הקוד:


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

//יצירת אובייקט כותרת 
$title = new title('My Title'); 
$title->set_style('color: #FF0707; padding-bottom: 20px;');

//יצירת אובייקט ציר
$y_axis = new y_axis_right();
$y_axis->set_range(-5, 30, 4);
$y_axis->set_label_text	("#val# Millions");
$y_axis->set_colours('#FF0707', '#000000');
$y_axis->set_stroke(2) ;
$y_axis->set_tick_length(2);

//עבור גרף בעברית

$y_axis_left = new y_axis();
$y_axis_left->set_colours('#EEEEEE', '#EEEEEE');
$y_axis_left->set_label_text("");

//יצירת אובייקט גרף עמודות
$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#');

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

$chart->add_element( $bar );

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

שינוי ציר X

אופן יצירת X זהה כמעט לחלוטין לציר Y. גם כאן אני יוצר אובייקט ציר x ומצמיד אותו ל-chart. הנה דוגמא למניפולציות שעשיתי בציר ה-x:

והקוד הוא:


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

//יצירת אובייקט כותרת 
$title = new title('My Title'); 
$title->set_style('color: #FF0707; padding-bottom: 20px;');

//יצירת אובייקט ציר
$x_axis = new x_axis();
$x_axis->set_range(0, 10);
$x_axis->set_steps(1);
$x_axis->set_labels_from_array(array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'));
$x_axis->set_colours('#FF0707', '#000000');
$x_axis->set_stroke(2) ;
$x_axis->set_tick_height(2);

//יצירת אובייקט גרף עמודות
$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#');

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

$chart->set_x_axis($x_axis);

$chart->add_element( $bar );

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

המתודות שהשתמשתי בהן הן:

מתודת יצירת טווח set_range

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

מתודת קביעת גודל צעד set_steps

מתודה זו קובעת את הצעדים בין תגית לתגית בציר ה-X.

מתודת קביעת תגיות – set_labels_from_array

המתודה הזו מקבל מערך של תגיות ומכניסה את המערך הזה לתוך הציר לפי הסדר. בדוגמא שלהלן השתמשתי במערך של ימים – יום ראשון, שני וכו’.

מתודת set_tick_height

שינוי גובה של סמני היחידות, המקבילה של set_tick_length בציר ה-y.

מתודות set_colours ו-set_stroke זהות למתודות המקבילות של ציר ה-y.

מתודות נוספות של אובייקט גרף

אנו יכולים לשלוט גם בצבע הרקע וב-tooltips:

ניתן לשלוט בצבע הרקע על ידי שימוש במתודת set_bg_colour שמקבלת ארגומנט של צבע.

ניתן לשלוט על איך שה-tooltip נראה. ה-tooltip הוא אותו קטע קצר של מידע שרואים כאשר אנו עוברים מעל העמודה הרלוונטית. השליטה היא באמצעות אובייקט tooltip שמשתמש במתודות הבאות:
set_background_colour – קובע את צבע הרקע של הטקסט.
set_colour – קובע את צבע הגבול.
set_shadow – קובע אם יש צל (true) או אין (false).
set_stroke – קובע את עובי הגבול בפיקסלים.

את אובייקט ה-tooltip שיצרנו אנו מכניסים לאובייקט הגרף באמצעות: set_tooltip.

והנה הדוגמא:

והקוד:


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

//יצירת אובייקט כותרת 
$title = new title('My Title'); 
$title->set_style('color: #FF0707; padding-bottom: 20px;');

//יצירת אובייקט tooltip
$tooltip = new tooltip();
$tooltip->set_background_colour('#ffffff');
$tooltip->set_colour('#DF0101');
$tooltip->set_shadow(true); 
$tooltip->set_stroke(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#');

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

$chart->set_tooltip($tooltip);

$chart->add_element( $bar );

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

במאמר הבא אנו נלמד על גרף עם כמה עמודות ויצירת גרף עוגה.

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

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

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
המאמרים האחרונים שהתפרסמו באינטרנט ישראל
  • התקנת hidden service ב-Tor על רספברי פיי

    התקנת hidden service ב-Tor על רספברי פיי

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

    רספברי פיי כשרת אינטרנט ביתי המאחסן וורדפרס

    דצמבר 27, 2020
    התקנת אתר אינטרנט מבוסס וורדפרס בשרת ביתי קטן ונחמד על רספברי פיי.
  • ניתוקים ואיטיות באינטרנט – מה עושים?

    ניתוקים ואיטיות באינטרנט – מה עושים?

    דצמבר 20, 2020
    שוב פעם אייקון הטעינה? צווחות מכל פינה בבית וטענות על ניתוקים? מאיפה מתחילים לטפל בזה? כך בודקים את העניין.
חיפוש
הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

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

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