גרפיקה בJAVASCRIPT

[yair24]

גרפיקה בJAVASCRIPT

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

מה הדך הכי טובה לעשות את זה?

מצאתי למשל איזשהי ספריה שנקראת RAPHAEL אבל אין עליה כל כך מספיק תעוד.

ועכשיו מצאתי עוד ספריה שעוד לא התחלתי להיכנס אליה שנקראת JSGL אז חשבתי לשאול איך הכי כדאי להיכנס לנושא הזה.

האם כדאי לקחת איזשהי ספריה כזאת? או לנסות לתכנת את זה מSCRATCH בJAVASCRIPT?

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

 

[עוץליגוץלי]

לגרפים והסטוגרמות יש ספרייה בשם flot

הספרייה הזו מהווה תוסף לjquery.
&nbsp
על רפאל שמעתי טובות, אבל לא התנסיתי.
&nbsp
ספריית jsgl היא ספרייה שמקילה את העבודה עם רכיבים גרפיים, אישית לא מצאתי סיבה לעבוד איתה (למה להוסיף שכבה?)
&nbsp
השאלה גם לשם מה אתה רוצה - אם כדי ללמוד - הייתי מתחיל מscratch, ורק אחרי מידה מסויימת של רכישת יכולת, הייתי מנסה ספריות שונות.

 

[yair24]

הרכיב שעליו ניתן לצייר גרפיקה הוא

CANVAS
נכון?
&nbsp
האם גם הFLOT הזה משתמש ברכיב הנל?
כי הרפאל משתמש בDIV ומייצר איזשהו אובייקט בJAVASCRIPT שנקרא PAPER
ולא ראיתי שם שימוש בCANVAS
&nbsp
(למרות שאם היתי צריך לנחש אז לדעתי הPAER הזה כן משתמש בCANVAS אבל אולי אני טועה זו רק הנחה שלי...)
&nbsp
האם התגית CANVAS היא תגית תיקנית שנתמכת על ידי כל הדפדפנים וככה עושים את הדברים האלה?

 

[עוץליגוץלי]

לפי התיאור שלך

רפאל זו ספריה מאד ישנה ואם היא עובדת כפי שכתבת - אל תשתמש בה אלא אם כן אתה צריך תאימות לדפדפנים ישנים.
&nbsp
הflot לפי זכרוני הרעוע משתמש גם בcanvas וגם באלמנטים אחרים, קוד המקור שלו זמין:
https://github.com/flot/flot
&nbsp
תגית קנבס תקנית בHTML5 (יש דפדפנים עתיקים שאולי עדיין בשמוש שלא תומכים בה).
&nbsp
בקשר לתמיכה - הצץ באתר הבא: http://caniuse.com/#feat=canvas
&nbsp

 

[yair24]

תודה

 

[yair24]

אתה יכול לעזור לי בזה? משהו לא מצליח לי בכלל...

הורדתי את הספריה FLOT
פתחתי ספריית JS ושמתי בפנים את הספריה FLOT עם כל הקבצים שלה.
בספריה JS שמתי את JQUERY1.8.3 משהו כזה...
&nbsp
וניסיתי להפעיל איזה תוכנת דמו שמצאתי פה:
http://www.jqueryflottutorial.com/how-to-make-jquery-flot-line-chart.html
&nbsp
אבל משום מה לא רואים כלום...
&nbsp
אתה יכול להסתכל?
http://www.guesstheless.com/test1.php
&nbsp
תודה

 

[yair24]

אוווו סוף סוף עובד

היו חסרים לי כמה קבצים
&nbsp
ואגב אם כבר מדברים עלה קבצים האלה עד איזה רמה הרשיון שימוש בהם מאפשר להשתמש בהם?
אפשר להשתמש בהם בחינם לגמרי גם לשימושים מסחריים?

 

[עוץליגוץלי]

הם ברישוי כפול - MIT וGPL.

כעקרון רשיון הGPL מאפשר לך כל שמוש כולל גם שמוש מסחרי, אבל לקוח שמקבל ממך את התוכנה מקבל גם את הזכויות להשתמש בקוד, ולא רק "רשיון משתמש" (הוא יכול להעביר את הJQ הלאה), ואם עשית שינויים בקוד המקור שלהם, עליך למסור את המקור ששינית לכל מי שתיתן לו את התוכנה. לדעתי - הוגן.

 

[yair24]

אתה מכיר קצת את הJS הזה של הFLOT?

אני מנסה לשנות כמה דברים בקוד וחלק מהדברים שם לא מובנים לי
&nbsp
תראה פה בעמוד הזה:
&nbsp
http://www.jqueryflottutorial.com/how-to-make-jquery-flot-line-chart.html
&nbsp
יש איזשהי פופנקציה שנקראת
&nbsp
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
var month = new Date(x).getMonth();
//console.log(item);
if (item.seriesIndex == 0) {
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)");
} else {
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)");
}
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
&nbsp
מה זה הITEM הזה שיש שם?
לא ראיתי שום מקום שהאו מופיע בו...
מאיפה הוא בא ומה המטרה שלו בחיים?
אתה יודע?

 

[yair24]

ניסיון לשים את הקוד יותר יפה

אני אנסה לשים את הקוד יותר יפה

 $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();
 
                        var x = item.datapoint[0];
                        var y = item.datapoint[1];
 
                        var color = item.series.color;
                        var month = new Date(x).getMonth();
 
                        //console.log(item);
 
                        if (item.seriesIndex == 0) {
                            showTooltip(item.pageX,
                            item.pageY,
                            color,
                            "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)");
                        } else {
                            showTooltip(item.pageX,
                            item.pageY,
                            color,
                            "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)");
                        }
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

 

[עוץליגוץלי]

אולי מישהו מהחבר'ה שעובדים עם jquery יוכל לעזור לך.

 

[yair24]

אני רואה שהJAVASCRIPT הזה

זה חתיכת שפת תכנות...
&nbsp
אבל בכל מקרה הבנתי עכשיו איך זה עובד (בערך)
&nbsp
צריך להתחיל לחפור שם לעומק בשביל ללמוד את כל זה... אבל אפשר לעשות דברים ממש יפים עם זה...
תודה.