טיפים לשימוש בכלי: מבוא
הסברים קצרים הם התיבות הקטנות שמופיעות כשמעבירים את העכבר מעל למשהו. (הכרטיסים המקיפים הם כלליים יותר, והם יכולים להופיע בכל מקום במסך. הסברים קצרים תמיד מקושרים למשהו, כמו נקודה בתרשים פיזור או עמודה בתרשים עמודות).
במסמכים אלה תלמדו איך ליצור ולהתאים אישית הסברים קצרים בתרשימים של Google.
ציון סוג ההסבר הקצר
התכונה 'תרשימים של Google' יוצרת באופן אוטומטי הסברים קצרים עבור כל תרשימי הליבה.
הם יעובדו כ-SVG כברירת מחדל, פרט ל-IE 8 שבהם הם יעברו עיבוד כ-VML. אפשר ליצור הסברים ב-HTML על גבי תרשימי ליבה על ידי ציון הערך tooltip.isHtml: true
באפשרויות התרשים שהועברו לקריאהdraw(), שגם תאפשר לכם ליצור פעולות ToolTip.
הסברים רגילים
כאשר לא קיים תוכן מותאם אישית, התוכן של ההסבר הקצר נוצר באופן אוטומטי על סמך הנתונים הבסיסיים. ניתן לראות את ההסבר הקצר על ידי מעבר עם העכבר מעל לעמודות בתרשים.
התאמה אישית של תוכן של הסברים
בדוגמה הזו, אנחנו מוסיפים תוכן מותאם אישית להסברים הקצרים על ידי הוספת עמודה חדשה ל-DataTable וסימון שלה באמצעות תפקיד ההסבר הקצר.
הערה: המאפיין הזה לא נתמך בתצוגה החזותית של תרשים בועות.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Year'); dataTable.addColumn('number', 'Sales'); // A column for custom tooltip content dataTable.addColumn({type: 'string', role: 'tooltip'}); dataTable.addRows([ ['2010', 600,'$600K in our first year!'], ['2011', 1500, 'Sunspot activity made this our best year ever!'], ['2012', 800, '$800K in 2012.'], ['2013', 1000, '$1M in sales last year.'] ]); var options = { legend: 'none' }; var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action')); chart.draw(dataTable, options); }
שימוש בהסברים קצרים על HTML
הדוגמה הזו מתבססת על האפשרות הקודמת, על ידי הפעלת הסברים קצרים ב-HTML. חשוב לשים לב להוספה של tooltip.isHtml: true
לאפשרויות התרשים.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Year'); dataTable.addColumn('number', 'Sales'); // A column for custom tooltip content dataTable.addColumn({type: 'string', role: 'tooltip'}); dataTable.addRows([ ['2010', 600,'$600K in our first year!'], ['2011', 1500, 'Sunspot activity made this our best year ever!'], ['2012', 800, '$800K in 2012.'], ['2013', 1000, '$1M in sales last year.'] ]); var options = { tooltip: {isHtml: true}, legend: 'none' }; var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip')); chart.draw(dataTable, options); }
זה לא נראה הרבה שונה, אבל עכשיו אנחנו יכולים להתאים אישית את ה-HTML.
התאמה אישית של תוכן HTML
בדוגמאות הקודמות השתמשנו בכל ההסברים הקצרים בתוכן טקסט פשוט, אבל העוצמה האמיתית של ההסברים הקצרים ב-HTML באה לידי ביטוי כשאתם יכולים להתאים אותם אישית באמצעות תגי עיצוב של HTML. כדי לעשות זאת, צריך:
-
עליך לציין את
tooltip.isHtml: true
באפשרויות התרשים. כך התרשים יתבסס על ההסברים הקצרים ב-HTML (ולא בפורמט SVG). -
יש לסמן עמודה שלמה או תא ספציפי בטבלת הנתונים באמצעות המאפיין המותאם אישית
html
. אחת מעמודות הטבלה עם תפקיד ההסבר הקצר ומאפיין ה-HTML תהיה:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
הערה: פעולה זו לא פועלת עם ההצגה החזותית של תרשים בועה. אי אפשר להתאים אישית את התוכן של תיאורי ה-HTML של תרשים הבועות.
חשוב: צריך לוודא שה-HTML של ההסברים הקצרים מגיע ממקור מהימן.
אם תוכן ה-HTML המותאם אישית כולל תוכן שנוצר על ידי משתמשים, הוספת התוכן הזה היא חיונית. אחרת, ייתכן שהצגת הנתונים החזותית היפהפיה שלך פתוחה
להתקפות XSS.
תוכן HTML מותאם אישית יכול להיות פשוט כמו הוספת תג <img>
או הדגשת טקסט כלשהו:
תוכן HTML בהתאמה אישית יכול לכלול גם תוכן שנוצר באופן דינמי. כאן אפשר להוסיף הסבר קצר שמכיל טבלה שנוצרת באופן דינמי לכל ערך של קטגוריה. מאחר שהסבר קצר שמצורף לערך השורה, ההסבר הקצר יופיע מעל כל אחת מהעמודות.
הדוגמה הזו מראה איך ניתן לצרף הסבר קצר של HTML מותאם אישית לעמודה של דומיין. (בדוגמאות הקודמות, הקובץ צורף לעמודת נתונים). כדי להפעיל את ההסבר הקצר על ציר הדומיין, הגדירו את האפשרות focusTarget: 'category'
.
function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Country'); // Use custom HTML content for the domain tooltip. dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); dataTable.addColumn('number', 'Gold'); dataTable.addColumn('number', 'Silver'); dataTable.addColumn('number', 'Bronze'); dataTable.addRows([ ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29], ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23], ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19] ]); var options = { title: 'London Olympics Medals', colors: ['#FFD700', '#C0C0C0', '#8C7853'], // This line makes the entire category's tooltip active. focusTarget: 'category', // Use an HTML tooltip. tooltip: { isHtml: true } }; // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options); } function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) { return '<div style="padding:5px 5px 5px 5px;">' + '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' + '<table class="medals_layout">' + '<tr>' + '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' + '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' + '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' + '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' + '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' + '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>'; }
הסברים קצרים בסבב
את הטיפים אפשר להציג בתרשימים של Google באמצעות CSS. בתרשים שלמטה,
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>