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

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

  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 ควรเป็นตัวเลขและมีค่าของสไลซ์

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

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

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

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

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

วิธีการ

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

กิจกรรม

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

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

โปรดดูนโยบายการบันทึก Chart API