תרשימים אינטראקטיביים

מאת |

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

– תרשימים אינטראקטיביים הכוללים גם tooltips ומידע שכבתי

– מגוון רחב מאוד של תרשימים, סוגי תרשימים ועיצובי תרשימים (תרשימים מסוג line, pie, area, column, bar, 3D ועוד המון…)

– תאימות לכל סוגי הדפדפנים וגרסאותיהם

– שמירת התרשימים כקובץ jpg, pdf, png, svg דרך תפריט מוטמע

– ניתן להזין לתרשימים אלו מידע ממקור חיצוני: CVS, JSON, XML …

– והכי חשוב – חינמי לחלוטין !

 

לפני שנצלול פנימה בעבודה עם ה-API שהם מספקים, בואו נראה דוגמא קטנה ממה שהם מציעים, תרשים מסוג 3D Pie הנותן לנו מידע על כמות המשתמשים בדפדפנים בעולם.

 

בואו נראה כיצד ניתן להשתמש ב-API שלהם.

תחילה ניצור קובץ HTML , אשר לתוך ה-HEAD שלו נקשר את ספריות ה-HighCharts, מדובר ב-2 ספריות JS:

1. HighCharts

2. Exporting

3. אם נרצה לעבוד עם קריאת נתונים מבחוץ, נשתמש גם בספרית Data

4. אל דף זה כמובן שיש לקשר גם את ספריית jQuery (מומלץ תמיד להשתמש בגרסה האחרונה)

5. עד עכשיו קראנו לספריות כלליות של highCharts, ספריות אותן נצטרך לקשר לכל תרשים שלהם, כעת נרצה גם לשייך את ספריית התרשים הספציפי עליו נעבוד, נקרא לו: myChart.js (בהמשך נראה כיצד ממשים את הסקריפט הזה).

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

<head>
   <title>Learning HighCharts</title>	
   <meta charset="utf-8" />
   <script src="scripts/highcharts.js"></script>
   <script src="scripts/data.js"></script>
   <script src="scripts/exporting.js"></script>		
   <script src="scripts/jquery.min.js"></script>
   <script src="scripts/myChart.js"></script>
</head>

איזור ה-body של דף ה-HTML שלנו לא אמור להיות כזה מסובך, אנו בסה"כ נקרא ל-div עם מאפיינים מסוימים (כמו גובה \ רוחב) ביניהם אחד חשוב ביותר: id=container  , כך:

div id="container" style="width: 100%; height: 400px; margin: 0 auto;"

 

את רוב העבודה שלנו נבצע בקובץ myChart.js שהוא כאמור המימוש שלנו לתרשים, בו נעבוד עם ה-API של HighCharts.

חשוב לציין: בדוגמא הנוכחית אראה רק חלק קטן מהפונקציונליות ש-HighChart מספקים, בשביל ללמוד את כל הפונקציונליות, היכנסו לעמוד הדוקומנטציה של ה-API

אל הפונקציה ניתן לשלוח כמה פרמטרים:

Chart: יקבל ערכים של סוג התרשים – bar, column, pie וכו'.

Title: שם כותרת התרשים

Subtitle: שם כותרת המשנה של התרשים

xAxis: הפרמטרים לציר המאוזן של התרשים, יקבל לרוב categories ובו יפורטו הקטגוריות להצגה, כמו כן שם, label , וכן פרמטרים מתמטיים

yAxis: הפרמטרים לציר המאונך של התרשים, יקבל ערכי מינ\מקס, labels, ופרמטרים מתמטיים

tooltip: בדרך כלל נשלח לפה פונקציית JS שתיתן לנו מידע מרוכז על האזור בו אנו עומדים

plotOptions: ישלוט על העיצוב של התרשים, כמו למשל גודל ה-border , סוג הפויינט של העכבר, עומק התצוגה וכו'

series: במידה ולא נשתמש בקובץ data חיצוני, זהו המקום אליו נכניס את הערכים שלנו עליהם תתבסס התצוגה הגרפית של התרשים, בד"כ נכניס לפה ערכים של name ו-data.

ניתן לראות כאן דוגמא של קובץ JS כזה המציג את אותו תרשים pie וניתן למעלה:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

 

בדוגמא הקודמת ראינו כיצד ניתן לקרוא את הנתונים מתוך קובץ ה-JS ולפרסס אותם לתצוגה גרפית, כעת נראה כיצד ניתן לקרוא את הנתונים ממקור חיצוני, למשל מטבלת HTML.

לצורך העניין יצרתי תרשים חדש ובו רשימת הנכסים של המשפחות העשירות בישראל (כמובן שהנתונים פיקטיביים, אין לי שמץ שלך מושג מהן הנתונים האמיתיים), נראה קודם את התרשים וסביר אותו אח"כ:

 

 

בתוך קובץ ה-HTML נכתוב טבלה ובה נרשום את הנתונים:

<table id="datatable" dir="rtl">
	<thead>
		<tr>
			<th></th>
			<th>אריסון</th>
			<th>עופר</th>
			<th>תשובה</th>
			<th>ורטהיימר</th>
			<th>דנקנר</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>בתים</th>
			<td>8 </td>
			<td>5</td>
			<td>4</td>
			<td>6</td>
			<td>2</td>
		</tr>
		<tr>
			<th>יאכטות</th>
			<td>2</td>
			<td>1</td>
			<td>4</td>
			<td>3</td>
			<td>6</td>
		</tr>
		<tr>
			<th>רכבים</th>
			<td>5</td>
			<td>11</td>
			<td>8</td>
			<td>6</td>
			<td>4</td>
		</tr>
		<tr>
			<th>מטוסים</th>
			<td>2</td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>1</td>
		</tr>
		<tr>
			<th>משרדים</th>
			<td>12</td>
			<td>5</td>
			<td>8</td>
			<td>3</td>
			<td>6</td>
		</tr>		
	</tbody>
</table>

שימו לב – החלק החשוב בטבלה הוא ה-id שלה בו הכנסנו את הערך datatable

וקובץ ה-JS שלנו אמור להיראות כך:

$(function () {
    $('#container').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'רשימת עשירי ישראל'
        },
		subtitle: {
            text: 'רשימת הנכסים של המשפחות העשירות בישראל , כמובן שהכל מפוברק'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'יחידות'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });
});

 

Scroll to Top
דילוג לתוכן