การสร้างประเภทแผนภูมิ

หน้านี้จะอธิบายวิธีพัฒนาประเภทแผนภูมิของคุณเองและทําให้ผู้ใช้เข้าถึงได้

ผู้ชม

หน้านี้จะถือว่าคุณอ่านหน้าการใช้แผนภูมิแล้ว และจะถือว่าคุณคุ้นเคยกับ JavaScript และการเขียนโปรแกรมที่เน้นออบเจ็กต์ บทแนะนํา JavaScript จํานวนมากอยู่ในเว็บ

การสร้างแผนภูมิ

แผนภูมิจะปรากฏแก่ผู้ใช้ผ่านไลบรารี JavaScript ที่คุณสร้าง ขั้นตอนการสร้างไลบรารีแผนภูมิมีดังนี้

1. เลือกเนมสเปซสําหรับโค้ด หน้าอื่นๆ จะโฮสต์โค้ดของคุณ คุณควรพยายามหลีกเลี่ยงการตั้งชื่อขัดแย้งกัน
2. ใช้ออบเจ็กต์แผนภูมิ ใช้ออบเจ็กต์ JavaScript ที่แสดงข้อมูลต่อไปนี้
   • เครื่องมือสร้าง
   • เมธอด draw() เพื่อวาดออบเจ็กต์ภายในองค์ประกอบ DOM ที่ส่งไปยังตัวสร้าง
   • วิธีมาตรฐานอื่นๆ ที่ลูกค้าสามารถใช้ เช่น getSelection() และ
   • วิธีที่กําหนดเองที่คุณต้องการเปิดเผยต่อลูกค้า
3. [ไม่บังคับ] ใช้เหตุการณ์ใดก็ได้ที่คุณต้องการเริ่มทํางานเพื่อให้ลูกค้าตรวจจับได้
4. เขียนเอกสารประกอบสําหรับแผนภูมิ หากคุณไม่ได้บันทึกเอกสารไว้ ผู้อื่นอาจฝังเอกสารนั้นไม่ได้
5. โพสต์แผนภูมิในแกลเลอรีแผนภูมิ

เคล็ดลับ

• คุณสามารถดาวน์โหลดคําจํากัดความคลาส 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 รายการ ได้แก่

1. DataTable ที่มีข้อมูลที่จะแสดง
2. แผนที่ตัวเลือกชื่อ/ค่าสําหรับแผนภูมิของคุณ (ไม่บังคับ) คุณจะกําหนดชื่อและประเภทค่าของตัวเลือกให้กับแผนภูมิที่ต้องการ เช่น ในตัวอย่างแผนภูมิแผนภูมิด้านล่างจะแสดงแผนภูมิที่รองรับตัวเลือกชื่อ "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 ภาษาที่ยอมรับ