หน้านี้ได้รับการแปลโดย Cloud Translation API

โหลดไลบรารี

หน้านี้แสดงวิธีโหลดไลบรารีของ Google แผนภูมิ

การโหลดคลังพื้นฐาน

โดยมีข้อยกเว้นบางประการ หน้าเว็บทั้งหมดที่มี Google แผนภูมิควรมีบรรทัดต่อไปนี้ใน <head> ของหน้าเว็บ

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

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

อาร์กิวเมนต์ตัวแรกของ google.charts.load คือชื่อหรือหมายเลขเวอร์ชัน เป็นสตริง หากคุณระบุ 'current' ระบบจะโหลด Google Charts เวอร์ชันอย่างเป็นทางการล่าสุด หากต้องการลองใช้เวอร์ชันที่รอเปิดตัวในรุ่นถัดไป ให้ใช้ 'upcoming' แทน โดยทั่วไปแล้ว 2 เวอร์ชันนี้แทบจะไม่แตกต่างกันเลย และจะเป็นเวอร์ชันเดียวกันทั้งหมด ยกเว้นในกรณีที่กำลังดำเนินการเปิดตัวเวอร์ชันใหม่ เหตุผลที่พบบ่อยในการใช้ upcoming คือคุณต้องการทดสอบแผนภูมิประเภทใหม่หรือฟีเจอร์ที่ Google กำลังจะเปิดตัวในอีก 1-2 เดือนข้างหน้า (เราประกาศการเปิดตัวที่กำลังจะมีขึ้นในฟอรัมของเรา และขอแนะนำให้คุณลองใช้เมื่อประกาศ เพื่อให้แน่ใจว่าการเปลี่ยนแปลงแผนภูมิจะยอมรับได้)

ตัวอย่างข้างต้นสมมติว่าคุณต้องการแสดง corechart (แท่ง คอลัมน์ เส้น พื้นที่ พื้นที่แบบขั้นบันได ฟอง วงกลม โดนัท คอมโบ แท่งเทียน ฮิสโตแกรม กระจาย) หากต้องการใช้แผนภูมิประเภทอื่นหรือเพิ่มแผนภูมิ ให้แทนที่หรือเพิ่มชื่อแพ็กเกจที่เหมาะสมแทน corechart ด้านบน (เช่น {packages: ['corechart', 'table', 'sankey']} คุณดูชื่อแพ็กเกจได้ในส่วน "การโหลด" ของหน้าเอกสารประกอบสำหรับแต่ละแผนภูมิ

ตัวอย่างนี้ยังถือว่าคุณมีฟังก์ชัน JavaScript ที่มีชื่อว่า drawChart กำหนดไว้ที่ใดที่หนึ่งในหน้าเว็บด้วย คุณตั้งชื่อฟังก์ชันนั้นว่าอะไรก็ได้ แต่ต้องไม่ซ้ำกับฟังก์ชันอื่นทั่วโลกและต้องมีการกําหนดก่อนที่คุณจะใช้อ้างอิงในgoogle.charts.setOnLoadCallback

หมายเหตุ: Google Charts เวอร์ชันเก่าใช้โค้ดที่แตกต่างจากด้านบนเพื่อโหลดไลบรารี หากต้องการอัปเดตแผนภูมิที่มีอยู่เพื่อใช้โค้ดใหม่ โปรดดูอัปเดตโค้ดโหลดไลบรารี

ต่อไปนี้คือตัวอย่างที่สมบูรณ์ของการวาดแผนภูมิวงกลมโดยใช้เทคนิคการโหลดพื้นฐาน

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

กำลังโหลดรายละเอียด

ก่อนอื่น คุณต้องโหลดตัวโหลดเอง ซึ่งทําได้ในแท็ก script แยกต่างหากที่มี src="https://www.gstatic.com/charts/loader.js" แท็กนี้อาจอยู่ในheadหรือbodyของเอกสาร หรืออาจแทรกลงในเอกสารแบบไดนามิกขณะที่โหลดหรือหลังจากโหลดเสร็จแล้วก็ได้

<script src="https://www.gstatic.com/charts/loader.js"></script>

หลังจากโหลดโปรแกรมโหลดแล้ว คุณจะโทรหา google.charts.load ได้เลย ตำแหน่งที่คุณเรียกใช้อาจเป็นแท็ก script ใน head หรือ body ของเอกสาร และคุณเรียกใช้ขณะที่เอกสารยังโหลดอยู่หรือเรียกใช้ได้ทุกเมื่อหลังจากโหลดเสร็จแล้ว

ตั้งแต่เวอร์ชัน 45 เป็นต้นไป คุณจะอาจเรียกใช้ google.charts.load ได้มากกว่า 1 ครั้งเพื่อโหลดแพ็กเกจเพิ่มเติม แต่คุณควรหลีกเลี่ยงการเรียกใช้ดังกล่าวเนื่องจากจะปลอดภัยกว่า คุณต้องระบุหมายเลขเวอร์ชันและการตั้งค่าภาษาเดียวกันทุกครั้ง

ตอนนี้คุณใช้พารามิเตอร์ URL autoload ของ JSAPI แบบเก่าได้แล้ว แต่ค่าของพารามิเตอร์นี้ต้องใช้การจัดรูปแบบ JSON และการเข้ารหัส URL ที่เข้มงวด ใน JavaScript คุณสามารถเข้ารหัส jsonObject ด้วยโค้ดนี้ encodeURIComponent(JSON.stringify(jsonObject))

ข้อจำกัด

หากคุณใช้เวอร์ชันก่อน v45 การโหลด Google แผนภูมิจะมีข้อจำกัดเล็กๆ น้อยๆ ที่สำคัญบางประการดังนี้

คุณจะโทรหา google.charts.load ได้ครั้งเดียว แต่คุณแสดงแพ็กเกจทั้งหมดที่จะต้องใช้ในการโทรครั้งเดียวได้ จึงไม่จำเป็นต้องโทรแยกต่างหาก
หากใช้ ChartWrapper คุณต้องโหลดแพ็กเกจทั้งหมดที่จําเป็นอย่างชัดเจน แทนที่จะให้ ChartWrapper โหลดให้คุณโดยอัตโนมัติ
สำหรับแผนภูมิภูมิศาสตร์และแผนภูมิแผนที่ คุณต้องโหลดทั้งตัวโหลดไลบรารีเก่าและตัวโหลดไลบรารีใหม่ โปรดทราบว่าการดำเนินการนี้มีไว้สำหรับเวอร์ชันก่อน v45 เท่านั้น และคุณไม่ควรทำเช่นนี้กับเวอร์ชันที่ใหม่กว่า
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

โหลดชื่อหรือหมายเลขเวอร์ชัน

อาร์กิวเมนต์แรกของการเรียก google.charts.load คือชื่อหรือหมายเลขเวอร์ชัน ขณะนี้มีชื่อเวอร์ชันพิเศษเพียง 2 ชื่อและเวอร์ชันที่หยุดให้บริการแล้วหลายเวอร์ชัน

current: ข้อมูลนี้สำหรับรุ่นอย่างเป็นทางการล่าสุดซึ่งจะเปลี่ยนแปลงทุกครั้งที่เราเผยแพร่รุ่นใหม่ เวอร์ชันนี้ได้รับการทดสอบอย่างละเอียดและไม่มีข้อบกพร่องแล้ว แต่คุณอาจต้องการระบุเวอร์ชันที่หยุดพัฒนาแล้วแทนเมื่อมั่นใจว่าเวอร์ชันดังกล่าวใช้งานได้
เร็วๆ นี้: ข้อมูลนี้สำหรับรุ่นถัดไปขณะที่รุ่นดังกล่าวยังอยู่ระหว่างการทดสอบและก่อนที่จะกลายเป็นรุ่นปัจจุบันอย่างเป็นทางการ โปรดทดสอบเวอร์ชันนี้เป็นประจำเพื่อให้ทราบโดยเร็วที่สุดว่ามีปัญหาใดที่ต้องแก้ไขก่อนเวอร์ชันนี้จะกลายเป็นรุ่นอย่างเป็นทางการหรือไม่

เมื่อเราเปิดตัว Google Charts เวอร์ชันใหม่ การเปลี่ยนแปลงบางอย่างจะส่งผลอย่างมาก เช่น แผนภูมิประเภทใหม่ทั้งหมด ส่วนการเปลี่ยนแปลงอื่นๆ นั้นเล็กน้อย เช่น การปรับปรุงลักษณะที่ปรากฏหรือลักษณะการทํางานของแผนภูมิที่มีอยู่

ครีเอเตอร์ Google Chart หลายคนปรับแต่งรูปลักษณ์ของแผนภูมิจนกว่าจะตรงกับที่ต้องการ ครีเอเตอร์บางรายอาจรู้สึกสบายใจขึ้นเมื่อรู้ว่าชาร์ตของตนจะไม่มีการเปลี่ยนแปลง ไม่ว่าเราจะปรับปรุงอะไรในอนาคตก็ตาม สําหรับผู้ใช้เหล่านั้น เรารองรับ Google Charts ที่หยุดชั่วคราว

แผนภูมิเวอร์ชันหยุดนิ่งจะระบุด้วยตัวเลข และอธิบายไว้ในรุ่นอย่างเป็นทางการของเรา หากต้องการโหลดเวอร์ชันที่ตรึงไว้ ให้แทนที่ current หรือ upcoming ในการโทร google.charts.load ด้วยหมายเลขเวอร์ชันที่ตรึงไว้ ดังนี้

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

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

โหลดการตั้งค่า

พารามิเตอร์ที่ 2 ในคําเรียก google.charts.load คือออบเจ็กต์สําหรับระบุการตั้งค่า การตั้งค่ารองรับพร็อพเพอร์ตี้ต่อไปนี้

พัสดุ

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

ภาษา

รหัสภาษาหรือภาษาท้องถิ่นที่ควรใช้เพื่อปรับแต่งข้อความที่อาจเป็นส่วนหนึ่งของแผนภูมิ ดูรายละเอียดเพิ่มเติมที่ภาษา

Callback

ฟังก์ชันที่จะเรียกใช้เมื่อโหลดแพ็กเกจแล้ว หรือจะระบุฟังก์ชันนี้ด้วยการเรียก google.charts.setOnLoadCallback ก็ได้ ดังที่แสดงในตัวอย่างด้านบน ดูรายละเอียดเพิ่มเติมได้ที่การติดต่อกลับ

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

mapsApiKey

(v45) การตั้งค่านี้ช่วยให้คุณระบุคีย์ที่อาจใช้กับแผนภูมิภูมิศาสตร์และแผนภูมิแผนที่ได้ คุณอาจต้องการดำเนินการนี้แทนที่จะใช้ลักษณะการทำงานเริ่มต้น ซึ่งอาจส่งผลให้มีการจำกัดบริการของผู้ใช้เป็นครั้งคราว ดูวิธีตั้งค่าคีย์ของคุณเองเพื่อใช้บริการ "Google Maps JavaScript API" ได้ที่นี่ รับคีย์/การตรวจสอบสิทธิ์ โค้ดจะมีลักษณะดังนี้

  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

safeMode

(v47) เมื่อตั้งค่าเป็น "จริง" แผนภูมิและเคล็ดลับเครื่องมือทั้งหมดที่สร้าง HTML จากข้อมูลจากผู้ใช้จะล้างข้อมูลโดยตัดองค์ประกอบและแอตทริบิวต์ที่ไม่ปลอดภัยออก หรือ (v49+) คุณสามารถโหลดไลบรารีในโหมดปลอดภัยโดยใช้ทางลัดที่ยอมรับการตั้งค่าการโหลดแบบเดียวกัน แต่โหลดเวอร์ชัน "ปัจจุบัน" เสมอ

  google.charts.safeLoad({ packages: ['corechart'] });

ภาษา

ภาษาใช้เพื่อปรับแต่งข้อความสำหรับประเทศหรือภาษา ซึ่งจะส่งผลต่อการจัดรูปแบบค่า เช่น สกุลเงิน วันที่ และตัวเลข

โดยค่าเริ่มต้น Google แผนภูมิจะเต็มไปด้วยภาษา "en" คุณสามารถลบล้างค่าเริ่มต้นนี้ได้โดยการระบุภาษาอย่างชัดเจนในการตั้งค่าการโหลด

หากต้องการโหลดแผนภูมิที่จัดรูปแบบสำหรับภาษาที่เฉพาะเจาะจง ให้ใช้การตั้งค่า language ดังนี้

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

ไปที่ลิงก์นี้เพื่อดูตัวอย่างการใช้งานจริง

การติดต่อกลับ

คุณต้องรอให้โหลดเสร็จก่อนจึงจะใช้แพ็กเกจที่ google.charts.load โหลดได้ เพียงรอให้เอกสารโหลดเสร็จก็ยังไม่เพียงพอ คุณต้องลงทะเบียนฟังก์ชัน Callback เนื่องจากการโหลดนี้อาจใช้เวลาสักครู่จึงจะเสร็จ ซึ่งทำได้ 3 วิธี ระบุการตั้งค่า callback ในคําเรียก google.charts.load หรือเรียก setOnLoadCallback โดยส่งฟังก์ชันเป็นอาร์กิวเมนต์ หรือใช้ Promise ที่แสดงผลจากการเรียก google.charts.load

โปรดทราบว่าสำหรับวิธีเหล่านี้ทั้งหมด คุณต้องระบุคำจำกัดความของฟังก์ชัน แทนการเรียกใช้ฟังก์ชัน คําจํากัดความของฟังก์ชันที่คุณระบุอาจเป็นฟังก์ชันที่มีชื่อ (คุณจึงต้องตั้งชื่อ) หรือฟังก์ชันนิรนามก็ได้ เมื่อโหลดแพ็กเกจเสร็จแล้ว ระบบจะเรียกใช้ฟังก์ชัน Callback นี้โดยไม่มีอาร์กิวเมนต์ นอกจากนี้ ตัวโหลดจะรอให้เอกสารโหลดเสร็จก่อนที่จะเรียกใช้การเรียกกลับ

หากต้องการวาดแผนภูมิมากกว่า 1 รายการ คุณจะลงทะเบียนฟังก์ชัน Callback มากกว่า 1 รายการโดยใช้ setOnLoadCallback หรือจะรวมฟังก์ชันดังกล่าวไว้ในฟังก์ชันเดียวก็ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธี dibujan múltiples gráficos en una página

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

การเรียกกลับผ่าน Promise

อีกวิธีหนึ่งในการลงทะเบียนการติดต่อกลับคือการใช้ Promise ที่ส่งคืนจากการเรียกใช้ google.charts.load ซึ่งทำได้โดยการเพิ่มการเรียกใช้เมธอด then() ที่มีโค้ดมีลักษณะดังต่อไปนี้

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

ประโยชน์อย่างหนึ่งของการใช้ Promise คือคุณจะวาดแผนภูมิเพิ่มเติมได้อย่างง่ายดายเพียงใช้การเรียก .then(anotherFunction) เพิ่มเติม การใช้ Promise ยังเชื่อมโยงการเรียกกลับกับแพ็กเกจที่เฉพาะเจาะจงซึ่งจําเป็นสําหรับการเรียกกลับนั้นด้วย ซึ่งเป็นสิ่งที่สําคัญหากคุณต้องการโหลดแพ็กเกจเพิ่มเติมด้วยการเรียกใช้ google.charts.load() อีกครั้ง

อัปเดตโค้ดโปรแกรมโหลดคลัง

Google แผนภูมิเวอร์ชันก่อนหน้าใช้โค้ดที่แตกต่างกันในการโหลดห้องสมุด ตารางด้านล่างแสดงรหัสโปรแกรมโหลดไลบรารีแบบเก่าเทียบกับแบบใหม่

โค้ดตัวโหลดคลังเก่า
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); </script>
รหัสโปรแกรมโหลดไลบรารีใหม่
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

โค้ดตัวโหลดคลังเก่า

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>

รหัสโปรแกรมโหลดไลบรารีใหม่

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>

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

ถัดไป: การเตรียมข้อมูล