การแสดงภาพ: แผนภูมิวงกลม (รูปภาพ)

สําคัญ: ตั้งแต่วันที่ 20 เมษายน 2012 เราได้เลิกใช้งานส่วน "แผนภูมิรูปภาพ" ของเครื่องมือแผนภูมิของ Google เลิกใช้งานอย่างเป็นทางการแล้ว และจะทํางานต่อไปตามนโยบายการเลิกใช้งาน

  1. ภาพรวม
  2. ตัวอย่าง
  3. กำลังโหลด
  4. รูปแบบข้อมูล
  5. ตัวเลือกการกําหนดค่า
  6. เมธอด
  7. เหตุการณ์
  8. นโยบายข้อมูล

ภาพรวม

แผนภูมิวงกลมที่แสดงผลเป็นรูปภาพโดยใช้ Google Charts API

ตัวอย่าง

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "imagepiechart":

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

ชื่อคลาสของการแสดงภาพคือ google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(container);

รูปแบบข้อมูล

2 คอลัมน์ คอลัมน์แรกควรเป็นสตริงและติดป้ายกํากับนั้น คอลัมน์ที่ 2 ควรเป็นตัวเลขและมีค่าส่วนแบ่ง

ตัวเลือกการกําหนดค่า

คุณระบุตัวเลือกต่อไปนี้เป็นส่วนหนึ่งของออบเจ็กต์ option ที่ส่งไปยังเมธอด draw() ของการแสดงภาพได้

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
สีพื้นหลัง สตริง "#FFFFFF" (สีขาว) สีพื้นหลังของแผนภูมิในรูปแบบสี API ของแผนภูมิ
สี สตริง อัตโนมัติ ระบุสีฐานที่จะใช้กับชุดหนังสือแต่ละชุด สีจะระบุอยู่ในรูปแบบสี API ของแผนภูมิ ระบบจะละเว้นหากระบุ colors
สี อาร์เรย์<string> อัตโนมัติ ใช้เพื่อกําหนดสีเฉพาะให้กับชุดข้อมูลแต่ละชุด สีระบุอยู่ในรูปแบบสี API ของแผนภูมิ สี i ใช้กับคอลัมน์ข้อมูล i ซึ่งล้อมรอบจุดเริ่มต้นหากมีคอลัมน์ข้อมูลมากกว่าสี หากชุดสีเดียวยอมรับได้ทุกชุด ให้ใช้ตัวเลือก color แทน
เปิดใช้เหตุการณ์ บูลีน เท็จ ทําให้แผนภูมิส่งเหตุการณ์ที่ทริกเกอร์ผู้ใช้ เช่น การคลิกหรือเมาส์ รองรับเฉพาะแผนภูมิบางประเภทเท่านั้น ดูเหตุการณ์ด้านล่าง
ความสูง number ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
3 มิติ บูลีน เท็จ หากตั้งค่าเป็น "จริง" จะแสดงแผนภูมิแบบ 3 มิติ
ป้ายกำกับ สตริง "ไม่มี"

ป้ายกํากับที่จะแสดง (หากมี) สําหรับแต่ละสไลด์ เลือกจากค่าต่อไปนี้

  • "none" - ไม่มีป้ายกํากับ
  • 'value' - ใช้ค่าส่วนแบ่งเป็นป้ายกํากับ
  • "name" - ใช้ชื่อส่วนย่อย (ชื่อคอลัมน์)
คําอธิบาย สตริง "ขวา" ตําแหน่งของคําอธิบายในแผนภูมิ เลือกจากค่าใดค่าหนึ่งต่อไปนี้: "ด้านบน", "ด้านล่าง", "ซ้าย", "ขวา", "ไม่มี"
title สตริง ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
ความกว้าง number ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ

เหตุการณ์

คุณสามารถลงทะเบียนเพื่อฟังเหตุการณ์ที่อธิบายไว้ในหน้าแผนภูมิรูปภาพทั่วไป

นโยบายข้อมูล

โปรดอ่านนโยบายการบันทึก API ของแผนภูมิ