9 ספריות. כדי לבנות תרשימים אינטראקטיביים
אז יש בידך טונות של נתונים, עם מספר משתנים, כי אתה צריך איכשהו להעביר למישהו אחר. נתונים גולמיים, לא מאורגנים יהיה קשה להם להבין. זו הסיבה שאתה צריך עזרה תרשימים. עיצוב אתרים, תרשימים הם אחד הכלים הטובים ביותר להדמיה נתונים. קל לקריאה, קל על העיניים וקל יחסית להגדיר.
אבל בואו ניקח את הדברים למעלה: בואו להוסיף אנימציה אינטראקטיביות אלה תרשימים, כך שהקוראים יכולים לא רק ללמוד משהו חדש מהתרשים, אלא גם לשחק איתו. זה בעצם קל יותר ממה שזה נשמע, הודות למספר ספריות JS בחוץ. בואו נבדוק אותם.
1. תרשים JS
Chart.js היא ספריה ללא תלות לבנות תרשימים ב 6 סוגים שונים: תרשימי קו, תרשימי בר, תרשימים מכ"ם, תרשימי שטח הקוטב, תרנגולת ותרנגולת סופגניות. הספרייה היא גם לפצל לפי סוג תרשים כך הדפים שלך לא שקוע למטה עם מה לא נחוץ. הוא תומך בעיצוב גמיש ואתה יכול בקלות לשנות משתנים כמו צבע או אנימציה כדי להתאים אישית את ממשק התרשים.
2. Chartist JS
Chartist JS היא ספריה נהדרת לבנות תרשימים תגובה כי לעשות שימוש SVG. מלבד ההיענות שלו, Chartist נותן לך גמישות באמצעות הפרדה ברורה של חששות: סגנון עם CSS ושליטה עם JS. כדי להקל על ההתאמה האישית, קובצי SASS כלולים. הדבר הגדול כאן יש לך אפשרויות בלתי מוגבל כדי הנפשת התרשים שלך באמצעות API אנימציה Chartist, SMIL, אשר נותן לך אפשרויות אנימציה נוספות.
3. C3 JS
C3 JS היא ספרייה לבנות תרשימים המבוססים על D3 JS. זה wraps את הקוד הנדרש כדי לבנות תרשימים עם D3 JS, כך שאתה יכול לדלג על כתיבת קוד D3, ופשוט קלט את הנתונים. C3 מגיע עם מגוון של API שניתן להשתמש בו כדי לשלוט בקלות בתרשימים שלך. כדי להתאים אישית את התרשים שלך, הגדר סגנונות מותאמים אישית משלך לכיתות CSS הנתונות. בניית תרשימים מתוך תרשימי קו פשוט למדוד תרשימים. עיין בדף זה כדי לראות כיצד פועלת הספרייה.
4. נקודה
נקודה הוא plguin jQuery ליצירת תרשימים עם אלמנטים אינטראקטיביים כמו הפעלת סדרה או ביטול, אינטראקציה נקודות נתונים, פנורמי, זום ועוד. הצומת מגיע עם מגוון רחב של אפשרויות סוג תרשים ואם אתה רוצה יותר יכולת על התרשים שלך, הנה כמה תוספים אתה יכול להשתמש גם כן. התרשימים יעבדו היטב עם דפדפנים התומכים בבדיקות HTML.
5. EChart
Echart היא ספריה מקיפה להפליא מסין התומכת בטכניקות מרובות של תרשימים, יכולה לעבד נתונים גדולים (מתכננים עד 200,000 נקודות נתונים בתרשים קרטזית), יש היקף נדידה, היכולת לחלץ, לשלב, להחליף נתונים בין תרשימים מרובים, המאפשר אחד לעבור בקלות בין סוג נתונים אחד למשנהו, ועוד הרבה.
6. רחמים
רחמים יוסיף תרשים מיני לדף האינטרנט שלך. זהו תוסף jQuery קטן שהופך אלמנט לתוך מיני svg קו, בר, סופגנייה או תרשים עוגה. אתה רק צריך ליצור אלמנט ולתת ערך כמו 1/5 ולבצע שיחה ("פאי") על אלמנט זה כדי ליצור תרשים עוגה מיני. לדוגמה, כדי ליצור תרשים סופגנייה כי הוא רק חמישית מודגשת, הנה HTML:
1/5
אתה יכול להתאים אישית את צבע התרשים, רדיוס, רוחב וגובה, אבל כברירת מחדל זה מוצג בגודל קטן.
7. DC DC
DC JS יש דמיון עם C3 JS במונחים של מנוע בשימוש; שניהם משתמשים בספריית D3 כדי לעבד תרשימים ב- SVG. DC JS נוצר כדי לעזור לך לדמיין נתונים וניתוח עבור דפדפנים עבור התקנים ניידים. מאז הוא ממנף על J3 DS, זה מאפשר לך להוסיף אינטראקציה המשתמש לתרשים שלך. DC JS היא ספריה אחת חזקה כדי ליצור תרשימים פשוטים מורכבות גבוהה.
8. תרשים Google
תוכל ליצור תרשימים אינטראקטיביים וכלי נתונים באמצעות ממשק ה- API של Google Visualization באמצעות תרשים Google. יש גלריות תרשים כדי לבדוק את יכולות הצגת הנתונים של Google Chart. כדי להתחיל, להטביע JavaScript פשוטה לדף האינטרנט שלך לטעון את הספריות של Google Chart שאתה צריך. לאחר מכן רשום את הנתונים שברצונך לתרשים, ובצע כמה התאמות אישיות באמצעות אפשרויות התרשים. לבסוף ליצור אובייקט תרשים עם מזהה, ועל דף האינטרנט שלך, ליצור NVD3 היא קבוצה של תרשימים לשימוש חוזר רכיבי תרשים שנבנו עם D3 JS. ספריה זו היא לפיכך "תבנית" אשר יסייע להקל עליך לבנות תרשימים. בדוק את תרשימים מדגם רבים שנבנו עם NVD3 כאן.
9. NVD3
עכשיו קרא: JavaScript ספריות ליצור מפות אינטראקטיביות & מותאמים אישית
