สําคัญ: ตั้งแต่วันที่ 20 เมษายน 2012 เราได้เลิกใช้งานส่วน "แผนภูมิรูปภาพ" ของเครื่องมือแผนภูมิของ Google เลิกใช้งานอย่างเป็นทางการแล้ว และจะทํางานต่อไปตามนโยบายการเลิกใช้งาน
ภาพรวม
แผนภูมิวงกลมที่แสดงผลเป็นรูปภาพโดยใช้ 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 มิติ |
ป้ายกำกับ | สตริง | "ไม่มี" | ป้ายกํากับที่จะแสดง (หากมี) สําหรับแต่ละสไลด์ เลือกจากค่าต่อไปนี้
|
คําอธิบาย | สตริง | "ขวา" | ตําแหน่งของคําอธิบายในแผนภูมิ เลือกจากค่าใดค่าหนึ่งต่อไปนี้: "ด้านบน", "ด้านล่าง", "ซ้าย", "ขวา", "ไม่มี" |
title | สตริง | ไม่มีชื่อ | ข้อความที่จะแสดงเหนือแผนภูมิ |
ความกว้าง | number | ความกว้างของคอนเทนเนอร์ | ความกว้างของแผนภูมิเป็นพิกเซล |
เมธอด
วิธีการ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|
draw(data, options) |
ไม่มี | วาดแผนภูมิ |
เหตุการณ์
คุณสามารถลงทะเบียนเพื่อฟังเหตุการณ์ที่อธิบายไว้ในหน้าแผนภูมิรูปภาพทั่วไป
นโยบายข้อมูล
โปรดอ่านนโยบายการบันทึก API ของแผนภูมิ