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

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

ผู้ชม

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

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

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

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

เลือกเนมสเปซ

คุณจะฝังแผนภูมิในหน้าที่โฮสต์แผนภูมิอื่นหรือ 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 วิธีคือตัวสร้าง และเมธอดDraw() คุณยังแสดงวิธีการเพิ่มเติมที่เหมาะสำหรับแผนภูมิของคุณให้กับผู้ใช้ได้ด้วย เพียงอย่าลืมว่าการใช้งานที่ง่ายขึ้นนั้นดีกว่า

เครื่องมือสร้าง

แผนภูมิควรแสดงตัวสร้างเดี่ยวที่ใช้พารามิเตอร์เดียว ซึ่งเป็นองค์ประกอบ DOM ที่จะใช้วาดแผนภูมิ โดยปกติแล้ว แผนภูมิจะจัดเก็บสำเนาองค์ประกอบนี้ในเครื่องไว้ในตัวสร้างเพื่อการใช้งานในภายหลัง

function example.MyTable(container) {
  this.container = container
}

เมธอด draw()

คลาสแผนภูมิของคุณควรมีเมธอด draw() อยู่ในต้นแบบของคลาสแผนภูมิ เมธอด draw() ยอมรับพารามิเตอร์ 2 รายการ ได้แก่

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