- เคล็ดลับเครื่องมือ: บทนํา
- การระบุประเภทเคล็ดลับเครื่องมือ
- เคล็ดลับเครื่องมือมาตรฐาน
- การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ
- การใช้เครื่องมือเคล็ดลับ HTML
- การปรับแต่งเนื้อหา HTML
- เคล็ดลับเครื่องมือการหมุนเวียน
- การวางแผนภูมิในเคล็ดลับเครื่องมือ
- การดําเนินการสําหรับเคล็ดลับเครื่องมือ
- คําอธิบายประกอบข้อมูล
- แผนภูมิที่รองรับ
เคล็ดลับเครื่องมือ: บทนํา
เคล็ดลับเครื่องมือคือกล่องเล็กๆ ที่ปรากฏขึ้นเมื่อวางเมาส์เหนือบางสิ่ง (นามบัตรลอยเป็นคําทั่วไปและอาจปรากฏที่ใดก็ได้บนหน้าจอ เคล็ดลับเครื่องมือจะแนบไปกับองค์ประกอบบางอย่าง เช่น จุดในแผนภูมิกระจายหรือแถบบนแผนภูมิแท่ง)
ในเอกสารนี้ คุณจะได้เรียนรู้วิธีสร้างและปรับแต่งเคล็ดลับเครื่องมือใน Google Charts
การระบุประเภทเคล็ดลับเครื่องมือ
Google Charts จะสร้างเคล็ดลับเครื่องมือสําหรับแผนภูมิหลักทั้งหมดโดยอัตโนมัติ
รายงานจะแสดงผลเป็น SVG โดยค่าเริ่มต้น ยกเว้นภายใต้ IE 8 ที่จะแสดงผลเป็น VML คุณจะสร้างเคล็ดลับเครื่องมือ HTML ในแผนภูมิหลักได้ด้วยการระบุ tooltip.isHtml: true
ในตัวเลือกแผนภูมิที่ส่งไปยังการเรียก Draw()
ซึ่งจะช่วยให้สร้างการทํางานของเคล็ดลับเครื่องมือได้ด้วย
เคล็ดลับเครื่องมือมาตรฐาน
หากไม่มีเนื้อหาที่กําหนดเอง ระบบจะสร้างเนื้อหาเคล็ดลับเครื่องมือขึ้นโดยอัตโนมัติตามข้อมูลพื้นฐาน โดยคุณจะดูเคล็ดลับเครื่องมือได้โดยวางเมาส์เหนือแถบในแผนภูมิ
การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ
ในตัวอย่างนี้ เราจะเพิ่มเนื้อหาที่กําหนดเองลงในเคล็ดลับเครื่องมือโดยเพิ่มคอลัมน์ใหม่ลงใน 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 หากต้องการเปิดใช้ฟีเจอร์นี้ คุณต้องทํา 2 สิ่งต่อไปนี้
-
ระบุ
tooltip.isHtml: true
ในตัวเลือกแผนภูมิ ซึ่งจะบอกให้แผนภูมิวาดเคล็ดลับเครื่องมือใน HTML (แทนที่จะเป็น SVG) -
ทําเครื่องหมายทั้งคอลัมน์หรือเซลล์ที่ต้องการในตารางข้อมูลด้วยพร็อพเพอร์ตี้ที่กําหนดเอง
html
คอลัมน์ Datatable ที่มีบทบาทเคล็ดลับเครื่องมือและพร็อพเพอร์ตี้ HTML จะมีลักษณะดังนี้
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
หมายเหตุ: การดําเนินการนี้ไม่ได้ใช้ได้กับการแสดงภาพแผนภูมิฟองอากาศ เนื้อหาของเคล็ดลับเครื่องมือ HTML ของแผนภูมิฟองอากาศจะปรับแต่งไม่ได้
สําคัญ: ตรวจสอบว่า HTML ในเคล็ดลับเครื่องมือมาจากแหล่งที่มาที่เชื่อถือได้
หากเนื้อหา HTML ที่กําหนดเองมีเนื้อหาที่สร้างโดยผู้ใช้ การ Escape เนื้อหานั้นเป็นสิ่งสําคัญ มิเช่นนั้น การแสดงภาพที่สวยงามอาจเปิดการโจมตี 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 Charts จะหมุนเวียนได้ด้วย CSS ในแผนภูมิด้านล่าง เคล็ดลับเครื่องมือจะหมุนตามเข็มนาฬิกา 30° โดยใช้ CSS ในบรรทัดนี้ก่อน div ของแผนภูมิ ดังนี้
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>