หน้านี้จะอธิบายวิธีพัฒนาประเภทแผนภูมิของคุณเองและทําให้ผู้ใช้เข้าถึงได้
ผู้ชม
หน้านี้จะถือว่าคุณอ่านหน้าการใช้แผนภูมิแล้ว และจะถือว่าคุณคุ้นเคยกับ JavaScript และการเขียนโปรแกรมที่เน้นออบเจ็กต์ บทแนะนํา JavaScript จํานวนมากอยู่ในเว็บ
การสร้างแผนภูมิ
แผนภูมิจะปรากฏแก่ผู้ใช้ผ่านไลบรารี JavaScript ที่คุณสร้าง ขั้นตอนการสร้างไลบรารีแผนภูมิมีดังนี้
- เลือกเนมสเปซสําหรับโค้ด หน้าอื่นๆ จะโฮสต์โค้ดของคุณ คุณควรพยายามหลีกเลี่ยงการตั้งชื่อขัดแย้งกัน
- ใช้ออบเจ็กต์แผนภูมิ ใช้ออบเจ็กต์ JavaScript ที่แสดงข้อมูลต่อไปนี้
- เครื่องมือสร้าง
- เมธอด
draw()
เพื่อวาดออบเจ็กต์ภายในองค์ประกอบ DOM ที่ส่งไปยังตัวสร้าง - วิธีมาตรฐานอื่นๆ ที่ลูกค้าสามารถใช้ เช่น
getSelection()
และ - วิธีที่กําหนดเองที่คุณต้องการเปิดเผยต่อลูกค้า
- [ไม่บังคับ] ใช้เหตุการณ์ใดก็ได้ที่คุณต้องการเริ่มทํางานเพื่อให้ลูกค้าตรวจจับได้
- เขียนเอกสารประกอบสําหรับแผนภูมิ หากคุณไม่ได้บันทึกเอกสารไว้ ผู้อื่นอาจฝังเอกสารนั้นไม่ได้
- โพสต์แผนภูมิในแกลเลอรีแผนภูมิ
เคล็ดลับ
- คุณสามารถดาวน์โหลดคําจํากัดความคลาส API และวิธีการของ
goog.visualization
เพื่อเปิดใช้การเติมข้อมูลอัตโนมัติใน IDE (ตัวแก้ไขโค้ด) ดาวน์โหลดไฟล์จาก http://www.google.com/uds/modules/gviz/gviz-api.js และบันทึกลงในโปรเจ็กต์ IDE ส่วนใหญ่จะจัดทําดัชนีโดยอัตโนมัติและเปิดใช้การเติมข้อมูลอัตโนมัติ แม้ว่า IDE อาจแตกต่างกัน โปรดทราบว่าไฟล์อาจไม่เป็นข้อมูลล่าสุดเสมอไป โปรดดูหน้าข้อมูลอ้างอิงเพื่อดูการอ้างอิง API ล่าสุด
เลือกเนมสเปซ
คุณฝังแผนภูมิไว้ในหน้าเว็บที่โฮสต์แผนภูมิอื่นๆ หรือ JavaScript อื่นๆ ที่ไม่เกี่ยวข้องได้ เพื่อหลีกเลี่ยงการตั้งชื่อที่ขัดแย้งกับโค้ดหรือชื่อคลาส CSS อื่นๆ คุณควรเลือกเนมสเปซที่ไม่ซ้ํากันสําหรับโค้ดแผนภูมิ ตัวเลือกที่ดีสําหรับเนมสเปซคือ URL ที่จะใช้โฮสต์สคริปต์ (ลบ WWW และส่วนขยายทั้งหมด) เช่น หากโพสต์แผนภูมิที่ www.example.com คุณจะใช้ example
เป็นเนมสเปซที่ไม่ซ้ํากัน คุณสามารถเพิ่มคําต่อท้ายเพิ่มเติมโดยคั่นด้วย . เพื่อจัดกลุ่มแผนภูมิ (แผนภูมิทั้งหมดของ Google มีเนมสเปซ google.visualization
)
ใช้ออบเจ็กต์เนมสเปซเพื่อจัดเก็บออบเจ็กต์แผนภูมิ รวมถึงตัวแปรร่วมที่อาจจําเป็น
ต่อไปนี้คือตัวอย่างการสร้างออบเจ็กต์เนมสเปซเพื่อคงคลาสแผนภูมิชื่อ MyTable รวมถึงตัวแปรร่วมที่ต้องใช้
// Namespace, implemented as a global variable. var example = {}; // MyTable class constructor. example.MyTable = function(container) { // ... } // MyTable.draw() method. example.MyTable.prototype.draw = function(data, options) { // ... }
การหลีกเลี่ยงความขัดแย้งของ CSS
หากใช้ CSS โปรดตรวจสอบว่าไม่ได้เขียนกฎ CSS ที่อาจส่งผลต่อแผนภูมิอื่นๆ ในหน้าเว็บ ตัวอย่างเช่น ไม่แนะนําให้สร้างกฎอย่าง td {color: blue;}
เนื่องจากจะส่งผลต่อองค์ประกอบ <td>
อื่นๆ ในหน้าเว็บ ไม่ใช่เฉพาะในแผนภูมิ วิธีหนึ่งที่อาจแก้ไขปัญหานี้ได้คือใส่แผนภูมิทั้งหมดใน <div>
ที่มีชื่อคลาส และให้กฎ CSS ทั้งหมดมีผลกับองค์ประกอบที่สืบทอดจากองค์ประกอบที่มีชื่อคลาสนั้นๆ เท่านั้น เช่น กฎ CSS ต่อไปนี้จะส่งผลต่อองค์ประกอบ <td>
ที่มีองค์ประกอบซึ่งมีชื่อคลาสเป็น "example" เป็นระดับบน
td.example {color: blue;}
จากนั้นจึงรวมแผนภูมิใน <div>
ด้วยสิ่งต่อไปนี้
<div class="example"> ... </div>
ใช้งานแผนภูมิ
คุณจะต้องใช้แผนภูมิเป็นออบเจ็กต์ JavaScript ที่แสดงวิธีการมาตรฐานที่อธิบายไว้ในส่วนอ้างอิง วิธีสร้างมี 2 วิธีคือตัวสร้างและเมธอดวาด() นอกจากนี้ยังแสดงวิธีการเพิ่มเติมแก่ผู้ใช้ที่เหมาะกับแผนภูมิได้ด้วย อย่าลืมว่าการใช้งานที่ง่ายดายนั้นดีกว่า
เครื่องมือสร้าง
แผนภูมิของคุณควรแสดงเครื่องมือสร้างเดียวที่ใช้พารามิเตอร์เดียว ซึ่งเป็นองค์ประกอบ DOM ที่คุณจะวาดแผนภูมิ โดยปกติแล้ว แผนภูมิจะจัดเก็บสําเนาองค์ประกอบนี้ไว้ในตัวสร้างเพื่อใช้ในภายหลัง
function example.MyTable(container) { this.container = container }
เมธอด draw()
คลาสแผนภูมิของคุณควรกําหนดวิธี draw()
ไว้ในต้นแบบของแผนภูมิ
เมธอด draw()
ยอมรับพารามิเตอร์ 2 รายการ ได้แก่
DataTable
ที่มีข้อมูลที่จะแสดง- แผนที่ตัวเลือกชื่อ/ค่าสําหรับแผนภูมิของคุณ (ไม่บังคับ) คุณจะกําหนดชื่อและประเภทค่าของตัวเลือกให้กับแผนภูมิที่ต้องการ เช่น ในตัวอย่างแผนภูมิแผนภูมิด้านล่างจะแสดงแผนภูมิที่รองรับตัวเลือกชื่อ "showLineNumber" ด้วยค่าประเภทบูลีน คุณควรรองรับค่าเริ่มต้นสําหรับตัวเลือกแต่ละรายการเผื่อในกรณีที่ผู้ใช้ไม่ส่งค่าสําหรับตัวเลือกนั้นๆ พารามิเตอร์นี้เป็นแบบไม่บังคับ ดังนั้นคุณควรเตรียมตัวใช้ค่าเริ่มต้นทั้งหมดหากผู้ใช้ไม่ส่งในพารามิเตอร์นี้ (ข้อมูลเพิ่มเติม)
example.MyTable.prototype.draw = function(data, options) { // Process data and options and render output into the container element. ... }
สวัสดี อันดับ
ต่อไปนี้เป็นแผนภูมิแบบง่ายที่แสดงข้อมูล DataTable
เป็นตาราง HTML
นี่คือโค้ดการติดตั้ง
// Declare a unique namespace. var example = {}; // Class constructor. Parameter container is a DOM elementon the client that // that will contain the chart. example.MyTable = function(container) { this.containerElement = container; } // Main drawing logic. // Parameters: // data is data to display, type google.visualization.DataTable. // options is a name/value map of options. Our example takes one option. example.MyTable.prototype.draw = function(data, options) { // Create an HTML table var showLineNumber = options.showLineNumber; // Boolean configuration option. var html = []; html.push('<table border="1">'); // Header row html.push('<tr>'); if (showLineNumber) { html.push('<th>Seq</th>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>'); } html.push('</tr>'); for (var row = 0; row < data.getNumberOfRows(); row++) { html.push('<tr>'); if (showLineNumber) { html.push('<td align="right">', (row + 1), '</td>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>'); html.push(this.escapeHtml(data.getFormattedValue(row, col))); html.push('</td>'); } html.push('</tr>'); } html.push('</table>'); this.containerElement.innerHTML = html.join(''); } // Utility function to escape HTML special characters example.MyTable.prototype.escapeHtml = function(text) { if (text == null) return ''; return text.replace(/&/g, '&').replace(/</g, '<') .replace(/>/g, '>').replace(/"/g, '"'); }
การรวมแผนภูมิในหน้าเว็บ
หากต้องการใช้แผนภูมิก่อนหน้า ให้บันทึกแผนภูมิในไฟล์ .js ที่เข้าถึงจากเบราว์เซอร์ของคุณได้
จากนั้นบันทึกโค้ดต่อไปนี้ โดยเปลี่ยนพารามิเตอร์แหล่งที่มาของ <script>
ให้ชี้ไปยังไฟล์ JavaScript
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="mytablevis.js"></script> <script type="text/javascript"> google.charts.load("current"); // Set callback to run when API is loaded google.charts.setOnLoadCallback(drawVisualization); // Called when the Chart API is loaded. function drawVisualization() { // Create and populate a data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Daily Hours'); data.addRows(5); data.setCell(0, 0, 'Work'); data.setCell(0, 1, 11); // Add more data rows and cells here // Instantiate our table object. var vis = new example.MyTable(document.getElementById('mydiv')); // Draw our table with the data we created locally. vis.draw(data, {showLineNumber: true}); } </script> <title>MyTable example page</title></head> <body> <div id="mydiv"></div> <p>This page demonstrates hosting a table visualization.</p> </body> </html>
ติดตั้งใช้งานเหตุการณ์
หากต้องการให้แผนภูมิเริ่มทํางานเหตุการณ์ที่มีประโยชน์ (เช่น เหตุการณ์ตัวจับเวลา หรือเหตุการณ์ที่เริ่มต้นโดยผู้ใช้ เช่น การคลิก) คุณจะต้องเรียกใช้ฟังก์ชัน google.visualization.events.trigger
พร้อมรายละเอียดของเหตุการณ์ (ชื่อ พร็อพเพอร์ตี้ที่จะส่ง ฯลฯ) ดูรายละเอียดได้ในหน้าเหตุการณ์
คุณแสดงรายละเอียดเหตุการณ์แก่ลูกค้าได้โดยเพิ่มพร็อพเพอร์ตี้ลงในออบเจ็กต์เหตุการณ์ หรืออาจเปิดเมธอด get... บางประเภทในแผนภูมิก็ได้ และไคลเอ็นต์จะเรียกใช้เมธอดนั้นเพื่อรับรายละเอียดเหตุการณ์ได้ ไม่ว่าจะเป็นกรณีใด ให้บันทึกเมธอดหรือพร็อพเพอร์ตี้เหตุการณ์ไว้เป็นอย่างดี
บันทึกแผนภูมิ
หากไม่ได้บันทึกแผนภูมิอย่างถูกต้อง คุณอาจไม่ได้รับผู้ใช้มากนัก โปรดตรวจสอบว่าคุณได้บันทึกเอกสารต่อไปนี้
- อธิบายวิธีทั้งหมดที่คุณสนับสนุน เมธอด
draw()
มักใช้กับแผนภูมิทั้งหมด แต่แต่ละแผนภูมิจะรองรับเมธอดเพิ่มเติมของตนเอง (คุณอาจไม่ต้องบันทึกเครื่องมือสร้างของคุณ เว้นแต่ว่าเครื่องมือดังกล่าวจะมีลักษณะการทํางานที่ไม่เป็นไปตามมาตรฐาน) ดูรายการเมธอดที่คาดไว้ได้ในหน้าข้อมูลอ้างอิง - อธิบายตัวเลือกทั้งหมดที่เมธอด
draw()
ของคุณรองรับ ซึ่งรวมถึงชื่อของตัวเลือกแต่ละรายการ ประเภทค่าที่คาดไว้ และค่าเริ่มต้น - อธิบายเหตุการณ์ทั้งหมดที่คุณเรียกให้แสดง ซึ่งหมายถึงชื่อและพร็อพเพอร์ตี้ของแต่ละเหตุการณ์ และเมื่อมีการทริกเกอร์แต่ละเหตุการณ์
- โปรดระบุ URL ของไลบรารีแผนภูมิที่ควรใช้ในคําสั่ง
<script>
ของไคลเอ็นต์และระบุ URL ของเอกสารประกอบ - ตั้งชื่อแผนภูมิที่สมบูรณ์ในตัวเอง
- สร้างหน้าตัวอย่างที่สาธิตวิธีใช้แผนภูมิด้วยตัวเลือกที่รองรับ เหตุการณ์ และเมธอดที่กําหนดเอง
- อธิบายนโยบายข้อมูลของแผนภูมิให้ชัดเจน แผนภูมิส่วนใหญ่ประมวลผลข้อมูลภายในเบราว์เซอร์ แต่แผนภูมิบางรายการอาจส่งข้อมูลไปยังเซิร์ฟเวอร์ เช่น เพื่อสร้างรูปภาพแผนภูมิหรือแผนที่ หากคุณส่งข้อมูลไปยังเซิร์ฟเวอร์ ให้ทําดังนี้
- กําหนดข้อมูลที่จะส่งอย่างชัดเจน
- ตรวจสอบระยะเวลาในการบันทึกข้อมูลบนเซิร์ฟเวอร์
- บันทึกว่าเอนทิตีใดจะมีสิทธิ์เข้าถึงข้อมูล เช่น บริษัท XYZ ฯลฯ
- ระบุว่าจะมีการบันทึกและระยะเวลาหรือไม่
เอกสารจะโฮสต์อยู่ในตําแหน่งเดียวกับโค้ดแผนภูมิ (ดูส่งแผนภูมิไปยังแกลเลอรีด้านล่าง)
ส่งแผนภูมิไปยังแกลเลอรี
หลังจากที่คุณเขียนแผนภูมิแล้ว ให้ส่งแผนภูมิเพื่อโพสต์ในส่วน "แผนภูมิเพิ่มเติม" ของแกลเลอรีของเรา การส่งแผนภูมิหมายความว่าคุณจะต้องลงนามในข้อตกลงกับเราว่าไม่ต้องการสร้างซอฟต์แวร์ที่เป็นอันตรายหรือใช้ข้อมูลผู้ใช้ในทางที่ผิด แกลเลอรีเป็นเพียงรายการตัวชี้ในแผนภูมิที่เราสร้างไว้ หรือที่คุณตรวจสอบไปแล้ว คุณสามารถเลือกโฮสต์ไลบรารี JavaScript และเอกสารจริงบนเว็บไซต์ของคุณเอง หรือจะให้ Google โฮสต์ไลบรารีและเอกสารให้ก็ได้ ระบุว่าคุณต้องการให้เราโฮสต์แผนภูมิหรือไม่เมื่อคุณโพสต์ลงในแกลเลอรี
การแก้ปัญหา
หากโค้ดของคุณใช้ไม่ได้ ให้ตรวจสอบวิธีต่อไปนี้อาจช่วยแก้ปัญหาให้คุณได้
- มองหาการพิมพ์ผิด โปรดทราบว่า JavaScript คือภาษาที่คํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- ใช้โปรแกรมแก้ไขข้อบกพร่อง JavaScript ใน Firefox คุณสามารถใช้คอนโซล JavaScript, เครื่องแก้ไขข้อบกพร่อง Venkman หรือส่วนเสริม Firebug ใน IE คุณสามารถใช้โปรแกรมแก้ไขข้อบกพร่องของ Microsoft Script ได้
- ค้นหากลุ่มสนทนาของ Google Chart API หากไม่พบโพสต์ที่ตอบคําถามของคุณ ให้โพสต์คําถามกับกลุ่มนั้นพร้อมลิงก์ไปยังหน้าเว็บที่แสดงถึงปัญหา
การแปล
หากต้องการให้ผู้คนในหลายประเทศใช้แผนภูมิของคุณ คุณอาจต้องการออกแบบแผนภูมิให้เข้ากับภาษาและวัฒนธรรมต่างๆ การแปลเนื้อหาพื้นฐานที่สุดคือการแปลสตริงข้อความมาตรฐานใน UI ตามการตั้งค่าเบราว์เซอร์ของผู้ใช้ รูปแบบการแปลขั้นสูงขึ้นคือการเปลี่ยนรูปแบบตัวเลขโดยขึ้นอยู่กับเวอร์ชันภาษา หรือแม้กระทั่งการออกแบบ UI หากเลือกแปลแผนภูมิ ให้แสดงรายการภาษาที่แผนภูมิรองรับในเอกสารประกอบ และระบุการตั้งค่าเริ่มต้นของภาษาที่ใช้กันโดยทั่วไป นอกจากนี้ คุณยังควรใส่ปุ่ม "เปลี่ยนภาษา" ใน UI ของแผนภูมิด้วยเผื่อว่าภาษาผิด วิธีทั่วไปในการตรวจหาภาษาของเบราว์เซอร์คือการดูส่วนหัว HTML ภาษาที่ยอมรับ