نصائح الأداة: مقدمة
تلميحات الأدوات هي الصناديق الصغيرة التي تنبثق عند تمرير مؤشر الماوس فوق شيء ما. (البطاقات العامة أكثر عمومية ويمكن أن تظهر في أي مكان على الشاشة؛ يتم دائمًا إرفاق تلميحات الأدوات بشيء، مثل نقطة على مخطط النقاط المبعثرة أو شريط في مخطط شريطي).
في هذا المستند، ستتعرّف على كيفية إنشاء تلميحات الأدوات وتخصيصها في مخططات Google.
تحديد نوع التلميح
تنشئ مخططات Google تلميحات أدوات لجميع المخططات الأساسية تلقائيًا.
وسيتم عرضها بشكل SVG افتراضيًا، باستثناء IE 8 حيث سيتم عرضها كـ VML. يمكنك إنشاء تلميحات HTML على الرسوم البيانية الأساسية من خلال تحديد tooltip.isHtml: true
في خيارات الرسم البياني التي تم تمريرها إلى استدعاء draw()، مما سيسمح لك أيضًا بإنشاء إجراءات التلميحات.
تلميحات الأدوات العادية
في حال عدم توفّر أي محتوى مخصّص، يتم إنشاء محتوى التلميح تلقائيًا استنادًا إلى البيانات الأساسية. ويمكنك رؤية التلميح بتمرير مؤشر الماوس فوق أي شريط في الرسم البياني.
تخصيص محتوى التلميح
في هذا المثال، نضيف محتوى مخصصًا إلى التلميحات عن طريق إضافة عمود جديد إلى جدول البيانات ووضع علامة عليه باستخدام دور الأداة.
ملاحظة: هذه الميزة غير متاحة في التمثيل البصري لفقاعة تفسيرية.
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.
يوضح هذا المثال كيف يمكن إرفاق تلميح 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. في المخطط أدناه، يتم تدوير تلميحات الأدوات بزاوية 30 درجة في اتجاه عقارب الساعة باستخدام شفرة CSS المضمنة هذه مباشرة قبل عنصر div للرسم البياني:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>