ראשית, היסטוריה קצרה:
עם איסוף הנתונים והשימוש בו ממשיכים לגדול באופן אקספוננציאלי, הצורך לדמיין נתונים אלה הופך להיות חשוב יותר. מפתחים מבקשים לאחד מיליוני רשומות מסדי נתונים לתרשימים ולוחות מחוונים יפים שבני אדם יכולים לפרש במהירות ובאינטואיציה.
הטכנולוגיה להדמיית נתונים המשיכה להשתפר בעשור האחרון וספריות תרשים מתקדמות רבות זמינות כעת לצרכנים. בתחילת שנות האלפיים, ייצור התרשימים נשלט על ידי תרשימי מפת סיביות של תמונות השרת. תוספים כמו פלאש וסילברלייט הציעו חוויית תרשימים אינטראקטיבית יותר אך עם מחיר כבד מהירות ההורדה, חיי הסוללה ומשאבי המערכת.
עם התפוצצות השימוש בניידים ובטאבלטים, תוספים כבר לא נתמכו בפלטפורמות הגדולות והמפתחים נאלצו לעבור לטכנולוגיות צד לקוח פתוחות שיכולות לרוץ בכל מקום. יחד עם זאת, הופעתם של מסכים ברזולוציה גבוהה מאוד והתקרבות נפוצה יותר באמצעות תנועות מגע הביאו לראשונה תרשימים וקטוריים עצמאיים ברזולוציה.
היכנס לעידן הנוכחי של ויזואליזציה של נתונים הנשלט על ידי JavaScript ו- SVG (Scalable Vector Graphics). תרשימים פועלים כעת בכל הדפדפנים, ללא תוספים מיוחדים, תומכים באינטראקטיביות ואנימציות ונראים חדים גם במכשירים ברזולוציה הגבוהה ביותר. סקרו מעל 50 ספריות הדמיה, 9 מוצרים אלה בלטו:
D3.js
D3.js היא ספריית JavaScript גרפית נרחבת ועוצמתית מאוד. זה מאפשר לך לאגד נתונים שרירותיים למודל אובייקט מסמך (DOM), ואז להחיל טרנספורמציות מונעות נתונים על המסמך.
D3 חורג בהרבה מספריות תרשימים אופייניות, כולל הרבה מודולים טכניים קטנים יותר כגון צירים, צבעים, היררכיות, קווי מתאר, הקלות, מצולעים ועוד. כל זה גורם לעקומת למידה תלולה.
ניסיון ליצור תרשים פשוט יכול להיות מסובך. יש להגדיר במפורש את כל האלמנטים כולל הצירים ופריטי תרשים אחרים. דוגמאות רבות מראות כיצד ניתן להשתמש ב- CSS לעיצוב אלמנטים בתרשים. אין תכונות מבוססות תרשים חלות באופן אוטומטי. אם אתה רוצה להיכנס לעשבים שוטים ולהשתמש ביצירתיות כדי לשלוט באופן מלא בכל אלמנט, זו הבחירה הטובה ביותר. עבודה נגד השעון כדי לעמוד בדרישות הפרויקט להדמיית נתונים, זו אולי לא הבחירה הטובה ביותר שמתחילה מאפס.
D3.js יכול להיות אבן בניין לספריית תרשימים. מפתחים השתמשו ב- D3 כדי להקל על השימוש בפתרונות תרשים שצורכים אותו, כמו NVD3.
D3.js הוא קוד פתוח וחינמי לשימוש.
JSCharting
ספריית התרשימים JSCharting תומכת במספר רב של סוגי תרשימים כולל מפות, gantt, מלאי ואחרים שלעתים קרובות נדרשים לשימוש ספריות נפרדות. הוא כולל מפות מובנות של כל מדינות העולם וספריית סמלי SVG. חבילה של תרשימי מיקרו עצמאיים יכולה להופיע בכל תוויות תרשים או בכל רכיב div בעמוד. פקדי ממשק המשתמש (UiItems) כלולים גם המאפשרים תרשימים אינטראקטיביים עשירים יותר. קל לשלוט בנתונים או במשתני הדמיה בזמן אמת וניתן לייצא תרשימים לפורמטים SVG, PNG, PDF ו- JPG.
הגלריה מחולקת לסוג תרשים ודוגמאות תכונות. עיצוב הגרפים מלוטש ומניב כמה תרשימים נקיים למראה. הוויזואליות הכוללת מספקת חווית תרשימים נקייה ומקצועית.
דוגמאות כלולות משתמשות באובייקט תצורה כדי להתאים אישית תרשימים. ההגדרות ליצור ולשלוט בסוגי תרשים פשוטות מאוד לשימוש. יש צורך בהגדרות נכס מעטות כדי לציין סוגי תרשימים מורכבים יותר ול- JSCharting יש ברירות מחדל חזקות ודינמיות, כלומר היא מנסה לבחור את ההגדרות הטובות ביותר לתרחישים באופן אוטומטי.
התיעוד כולל מדריכים רבים ותיאורי יסוד API נכסים. מאפיינים רבים כוללים קישורים לדוגמא וקישורים לדוגמה.
JSCharting חינם לשימוש לא מסחרי ואישי ומציע גם אפשרויות רישיון מסחרי הכולל את כל סוגי התרשימים והמוצרים בתשלום אחד.
Highcharts
Highcharts היא ספריית תרשימים פופולרית של JavaScript המשמשת רבות מהחברות הגדולות בעולם. תרשימים נוצרים באמצעות SVG וחזרה ל- VML לצורך תאימות לאחור עד IE6 / IE8. תרשימי ההדגמה מדגימים סט תכונות עשיר למדי אך לא וואו חזותית. תיעוד כללי כולל הדרכות לנושאים רלוונטיים רבים ותיעוד ה- API יסודי.
התרשים משתמש באפשרויות תצורה ליצירת תרשימים וה- API קל לשימוש.
Highcharts חינם לשימוש לא מסחרי ואישי. רישוי מסחרי נדרש לשימוש אחר ותרשימי מלאי, מפות וגאנט מורשים בנפרד.
amCharts
amCharts פרסמה לאחרונה את גרסתם 4 המוסיפה מנוע אנימציה חזק של SVG המאפשר יצירת סצינות דומות לסרטים.
תרשימי ההדגמה נראים נחמדים מאוד. רוב ההדגמות מציעות מספר פלטות וממשק משתמש למחוון להתאמת משתני תרשים בזמן אמת. התיעוד כולל מדריכים רבים ותיאורי נכסי API מלאים.
יצירת תרשים מרגישה שונה במקצת מהגישה מבוססת התצורה, ובמקום זאת משתמשת בממשק API הצהרתי יותר. זה דורש קוד מעט יותר כדי להגדיר את התרשימים, אך נותן חוויה טובה יותר בהשלמת הקוד.
amCharts מציעה רישיון חינם עם תרשימים ממותגים ורישיונות בתשלום לשימוש אחר.
תרשימים של גוגל
תרשימי גוגל הם עוצמתיים וקלים לשימוש.
תרשימי המדגם נראים נקיים וקלים לעין. הגלריה והגלריה המורחבת מציגים סוגי תרשימים רבים, אך לחיצה על תפריט ההמבורגר מגלה סוגים נוספים (כמו לוח שנה) שאינם מוצגים ברשימות הגלריות הללו.
לכל סוג תרשים יש מדריך ייעודי עם דוגמאות חיות. ההדרכות כוללות קוד עבור התכונות הקשורות ורישומי API. זו חוויה נעימה להתחיל עם ספריית תרשימים חדשה.
תרשימים מותאמים אישית באמצעות אובייקט אפשרויות התצורה. מערכי הנתונים מאוכלסים באמצעות מחלקת נתונים אשר ניתנת לצריכה בכל התרשימים. לכל סוג תרשים יש אפשרויות ייחודיות המופיעות במדריך הספציפי לסוג. שמות נכסים הם סטנדרטיים ואפשרויות רבות עובדות בכל הסוגים.
התרשימים של גוגל הם בחינם, אך יש אזהרה. זהו שירות אינטרנט ולא ניתן לארח אותו באופן מקומי. בעבר גוגל פרשה ממשקי API ולכן אם השימוש שלך הוא קריטי למשימה, כדאי לך לבחור באפשרות אחרת.
זינג צ'רט
ZingChart מציע סוגי תרשימים רבים ומשתלב במסגרות זוויתיות, תגובות ואחרות. יש לו תכונה חזקה עם אפשרויות התאמה אישית רבות.
תרשימי ההדגמה מציגים מגוון של נושאי עיצוב, חלקם נראים טוב יותר מאחרים, אך האפשרויות לעצב אותם לפי הצורך קיימות. הדגמות אינן מדגימות את כל סוגי התרשימים הזמינים.
התיעוד כולל הדרכות לכל הסוגים הזמינים, מספר טוב של תכונות ורישום API מלא.
ZingChart משתמש באפשרויות תצורה כדי להתאים אישית תרשימים. דוגמאות כוללות הגדרות מאפיין רבות כגון עיצוב גופנים. אלה יכולים להפריע להבנה אילו הגדרות נדרשות לתרשים נתון.
ניתן להשתמש ב- ZingChart בחינם עם מיתוג. רישוי בתשלום זמין לשימוש שאינו ממותג.
FusionCharts
FusionCharts קיים כבר שנים רבות החל כתוסף פלאג מבוסס פלאש. זוהי ספריית הדמיה חזקה של תרשימים. הוא תומך בפורמטי נתונים רבים כולל XML, JSON ו- JavaScript, עובד בדפדפנים מודרניים ותואם לאחור חזרה ל- IE6. מסגרות JavaScript רבות ושפות תכנות בצד השרת נתמכות גם כן.
גלריית התרשימים כוללת מספר רב של דוגמאות והן בעלות מראה חזותי נקי.
התיעוד כולל תיאורי API טובים, ודוגמאות לכל סוג תרשים. מאפייני התצורה מקובצים לפי משימות ותכונות תרשים.
תרשימים נוצרים באמצעות אפשרויות מבוססות תצורה וקל יחסית לשימוש. רשימת המאפיינים יכולה להיות ארוכה כשעומקים יותר בממשק ה- API. כל מאפייני התצורה רדודים כגון {chartLeftMargin, showAlternateHGridColor}. זה נראה כמו ניסיון לשפר את השלמת הקוד.
FusionCharts זמין לשימוש אישי עם מיתוג תרשימים. רישוי בתשלום זמין לשימוש לא ממותג ומסחרי.
KOOLCHART
KoolChart היא ספריית תרשימי JavaScript מבוססת HTML 5 על בסיס קנבס. מוצר מיפוי ורשת זמין גם כן.
מהדורת V5 החדשה שלהם כוללת מערך תכונות אינטראקטיבי יותר ועיצוב מעודכן. הוויזואליה נקייה ומודרנית. השימוש בבד מציע ביצועים טובים יותר על חשבון היותו מבוסס רסטר.
הדוגמאות משתמשות ב- XML מבוסס מחרוזת כדי להחיל אפשרויות תרשים שנראות פחות פרקטיות מגישות אחרות. אפשרויות אלה נראות כמו HTML5 אך מוגדרות באמצעות מחרוזת JavaScript.
ה- API מתועד היטב עם תרשימים לדוגמה לכל נכס. מדריך PDF של 173 עמודים זמין גם כן.
תקופת ניסיון של חודשיים זמינה להערכה. רישוי נדרש לאחר תום תקופת הניסיון.
Chart.js
Chart.js היא ספריית JavaScript קוד פתוח התומכת בשמונה סוגי תרשימים. זוהי ספריית js קטנה בנפח 60 קילוגרם בלבד. הסוגים כוללים תרשימי קו, תרשימי עמודות, תרשימי שטח, מכ"ם, תרשימי עוגה, בועות, פיזור חלקות ומעורב. תומכת גם סדרת זמן. הוא משתמש באלמנט בד לעיבוד והוא מגיב על גודל החלון כדי לשמור על פירוט המידה. זה תואם לאחור ל- IE9. ניתן להשתמש במילוי מילוי לעבודה גם עם IE7.
הדמויות החזותיות למראה מודרניות למדי וכוללות אנימציות ראשוניות בעת ציור בפעם הראשונה. הוא מונפש בצורה חלקה בעת הוספת נקודות סדרה או נתונים בזמן אמת. ניתן לשנות אפשרויות תרשים לאחר קריאה לפונקציה עדכון () מחדש את התרשים.
קוד המקור לדוגמא אינו מוצג בגלריית האתרים, אך זמין ברשימת ה- GitHub. אפשרויות תצורה משמשות ליצירה ושינוי תרשימים. ממשק ה- API של אפשרויות נקי ואינטואיטיבי.
התיעוד יסודי וכולל הדרכות עם ממשק API של נכס וקטעי קוד.
Chart.js היא ספריית קוד פתוח וחינמית לשימוש לשימוש אישי ומסחרי וזה יתרון. מספר הסוגים המוגבל יכול להוות בעיה לדרישות לוח המחוונים המתקדמות יותר.
סיכום
המערכת האקולוגית של ספריות תרשימי JavaScript התפתחה במידה ניכרת בעשור האחרון. כיום ישנם מספר רב של מוצרי תרשימים העונים על דרישות מגוונות מאוד, ומשרתים מגוון רחב של פרויקטים, אם כי מאות סוגי תרשימים. רוב הספריות מספקות גרסת ניסיון בחינם או גרסה ממותגת המאפשרת לך להעריך את יעילות התרשים עם הנתונים שלך, הטעינה והמורכבות של הפרויקט שלך.
לרוב ספריות התרשימים קל להתמודד עם מערכי נתונים פשוטים והדמיות סטטיות. עם זאת, לא תמיד תרשימים יטפלו בצורה חלקה כאשר נתון דינמי מדויק בעולם האמיתי. יתכן ויהיה צורך בעבודה נוספת כדי להתאים ולסדר אלמנטים כך שהתרשימים יראו נכונים וניתוח ידני זה יכול להישבר עם הצגת נתונים דינמיים חדשים.
כדי לבחור את פתרון התרשים JS הטוב ביותר לצרכים הייחודיים שלך, אני ממליץ לבדוק את הנתונים שלך מול כמה מהספריות המפורטות לעיל כדי להבטיח התאמה אידיאלית לפרויקטים הנוכחיים והעתידיים שלך.