การแสดงภาพ: แผนภูมิวงกลม (เวอร์ชันเก่า)

เลิกใช้

ระบบได้แทนที่การแสดงภาพนี้ด้วยเวอร์ชันใหม่ โปรดใช้เวอร์ชันดังกล่าวแทน โปรดดูหน้าบันทึกประจำรุ่นเพื่อให้ย้ายข้อมูลได้อย่างง่ายดาย

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

ภาพรวม

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

โดย Google

ตัวอย่าง

เขียนโค้ดเองใน Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

กำลังโหลด

ชื่อแพ็กเกจ google.load คือ "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

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

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

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

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

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
backgroundColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังสำหรับพื้นที่หลักของแผนภูมิ ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
  • สตริงที่มีสีที่ HTML รองรับ เช่น "แดง" หรือ "#00cc00" หรือ
  • คำอธิบายของออบเจ็กต์ n ที่มีพร็อพเพอร์ตี้ต่อไปนี้
    • stroke - สตริงสี HTML ที่อธิบายสีเส้นขอบของแผนภูมิ
    • fill - สตริงสี HTML ที่อธิบายสีพื้นหลังของแผนภูมิ
    • strokeSize - ตัวเลขที่อธิบายความหนาของเส้นขอบแผนภูมิ หน่วยเป็นพิกเซล หากไม่ต้องการเส้นขอบ ให้กำหนดค่านี้เป็น 0
      ตัวอย่าง: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}
borderColor สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบของแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
สี อาร์เรย์ของสตริงหรือออบเจ็กต์ สีเริ่มต้น

อาร์เรย์ของสี โดยที่องค์ประกอบแต่ละรายการจะระบุสีของ 1 ชุด คุณควรระบุองค์ประกอบอาร์เรย์ 1 รายการสำหรับแต่ละชุด

  • หากเป็น is3D=false จะเป็นอาร์เรย์ของสี HTML ตัวอย่างเช่น สี:['#00FF00','orange']
  • หากเป็น is3D=true นี่จะเป็นอาร์เรย์ของสี HTML หรือวัตถุประเภทนี้ {color:face_color, darker:shade_color} โดยที่ color คือสีใบหน้าขององค์ประกอบและ darker เป็นสีเฉดสี แต่หากคุณระบุสี HTML สำหรับวัตถุ 3 มิติ ด้านและเฉดสี จะเป็นสีเดียวกัน และเอฟเฟ็กต์ 3 มิติจะลดลง ตัวอย่าง: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean จริง หากตั้งค่าเป็น "จริง" เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้คลิกที่ส่วนแบ่ง
focusBorderColor สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบของแผนภูมิที่อยู่ในโฟกัส (ชี้ด้วยเมาส์) ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
ส่วนสูง ตัวเลข ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
เป็น 3 มิติ boolean false หากตั้งค่าเป็น "จริง" จะแสดงแผนภูมิ 3 มิติ
คำอธิบาย string "ขวา" ตำแหน่งและประเภทของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "ขวา" - ทางด้านขวาของแผนภูมิ
  • "ซ้าย" - ทางด้านซ้ายของแผนภูมิ
  • "top" - เหนือแผนภูมิ
  • "bottom" - ใต้แผนภูมิ
  • "label" - ป้ายกำกับใกล้ส่วนต่างๆ
  • "none" - ไม่แสดงคำอธิบาย
legendBackgroundColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังของส่วนคำอธิบายแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
legendFontSize ตัวเลข อัตโนมัติ ขนาดแบบอักษรของคำอธิบายในหน่วยพิกเซล
legendTextColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีข้อความของคำอธิบาย ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
pieJoinAngle ตัวเลข 0 ส่วนแบ่งที่น้อยกว่ามุมนี้จะรวมกันเป็นส่วนแบ่งทั่วไปที่มีป้ายกำกับว่า "อื่นๆ"
pieMinimalAngle ตัวเลข 0

ส่วนใดๆ ที่เล็กกว่ามุมนี้จะไม่วาดในแผนภูมิวงกลม (แต่จะยังได้รับรายการคำอธิบาย) ชิ้นส่วนที่เหลือจะขยายเพื่อเติมพายในสัดส่วนคงที่ หมายเหตุ: การดำเนินการนี้อาจทำให้ค่าที่ปรากฏบิดเบี้ยว โดยเฉพาะอย่างยิ่งเมื่อตัวเลขนี้สูง เนื่องจากมีการนําจํานวนออกจากวงกลม

หากต้องการคำนวณขนาดของสไลซ์ มุมแรกที่เล็กกว่า piejoinAngle จะรวมกับสไลซ์ "อื่นๆ" แล้วก็วาดสไลซ์ทั้งหมดที่มีขนาดใหญ่กว่า pieMinimalAngle ด้วย
title string ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
titleColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีของชื่อแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
titleFontSize ตัวเลข อัตโนมัติ ขนาดแบบอักษรของชื่อแผนภูมิเป็นพิกเซล

tooltipFontSize		 ตัวเลข 11 ขนาดแบบอักษรของข้อความเคล็ดลับเครื่องมือ ซึ่งอาจลดลงหากเคล็ดลับเครื่องมือมีขนาดเล็กเกินกว่าที่จะคงข้อความในแบบอักษรที่ระบุไว้ได้
tooltipHeight
 ตัวเลข 60 ความสูงของเคล็ดลับเครื่องมือในหน่วยพิกเซล ความสูงของเคล็ดลับเครื่องมือจะคงที่ โดยจะไม่ขยายหรือหดให้พอดีกับความยาวหรือขนาดแบบอักษรของข้อความ แต่หากมีความสูงเกิน 1/3 ของแผนภูมิจะถูกครอบตัด
tooltipWidth ตัวเลข 120 ความกว้างของเคล็ดลับเครื่องมือ หน่วยเป็นพิกเซล ความกว้างของเคล็ดลับเครื่องมือจะคงที่ โดยจะไม่ขยายหรือหดให้พอดีกับความยาวหรือขนาดแบบอักษรของข้อความ แต่สิ่งที่มากกว่าความกว้างของแผนภูมิจะถูกครอบตัด
ความกว้าง ตัวเลข ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล

วิธีการ

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ
getSelection() อาร์เรย์ขององค์ประกอบการเลือก การใช้ getSelection() แบบมาตรฐาน องค์ประกอบที่เลือกคือองค์ประกอบแถวและเซลล์ ผู้ใช้เลือกหลายแถวและ/หรือเซลล์เดียวได้ครั้งละ 1 เซลล์
setSelection() ไม่มี การใช้ setSelection() แบบมาตรฐาน แต่รองรับการเลือกหลายแถวและ/หรือเซลล์เดียว จะถือว่าทุกรายการที่เลือกเป็นแถวหรือเซลล์ที่เลือก

กิจกรรม

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
onmouseover เริ่มทำงานเมื่อผู้ใช้วางเมาส์เหนือชิ้นส่วน และผ่านดัชนีแถวและคอลัมน์ของเซลล์ที่เกี่ยวข้อง แถว, คอลัมน์
onmouseout เริ่มทำงานเมื่อผู้ใช้เลื่อนเมาส์ออกจากสไลซ์ และผ่านไปในดัชนีแถวและคอลัมน์ของเซลล์ที่เกี่ยวข้อง แถว, คอลัมน์
ready แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น ไม่มี
select

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

หมายเหตุ: การคลิกสไลซ์ไม่ได้เป็นการสลับระหว่างการเลือกและการยกเลิกการเลือกเซลล์ การคลิกสไลซ์จะเป็นการเลือกสไลซ์เสมอ ในทางกลับกัน การคลิกรายการคำอธิบายจะเป็นการสลับระหว่างการเลือกและการยกเลิกการเลือกแถว

ไม่มี

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

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ