การแสดงภาพ: แผนภูมิพื้นที่ (รูปภาพ)

สําคัญ: ตั้งแต่วันที่ 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:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

กําลังโหลด

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

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

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

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

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

แต่ละคอลัมน์แสดงเส้นในแผนภูมิ แต่ละรายการคือค่าแกน Y ที่จุดแกน X เดียวกัน และการแสดงภาพจะเชื่อมต่อด้วยเส้นตรง จากนั้นเติมในพื้นที่ด้านล่างเส้น

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

ข้อมูลทั้งหมดต้องเป็นประเภทตัวเลข ยกเว้นรายการแรก ซึ่งจะเป็นตัวเลขหรือสตริงก็ได้ หากคอลัมน์แรกเป็นประเภทสตริง คอลัมน์แรกจะแสดงเป็นป้ายกํากับใน X หากคอลัมน์แรกเป็นตัวเลข จะไม่มีป้ายกํากับแกน X คอลัมน์ทั้งหมด (ยกเว้นคอลัมน์แรก) ต้องเป็นตัวเลข ไม่มีการจํากัดจํานวนคอลัมน์

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
สีพื้นหลัง สตริง "#FFFFFF" (สีขาว) สีพื้นหลังของแผนภูมิในรูปแบบสี API ของแผนภูมิ
สี อาร์เรย์<string> อัตโนมัติ ใช้เพื่อกําหนดสีเฉพาะให้กับชุดข้อมูลแต่ละชุด สีระบุอยู่ในรูปแบบสี API ของแผนภูมิ สี i ใช้กับคอลัมน์ข้อมูล i ซึ่งล้อมรอบจุดเริ่มต้นหากมีคอลัมน์ข้อมูลมากกว่าสี หากชุดสีเดียวยอมรับได้ทุกชุด ให้ใช้ตัวเลือก color แทน
เปิดใช้เหตุการณ์ บูลีน เท็จ ทําให้แผนภูมิส่งเหตุการณ์ที่ทริกเกอร์ผู้ใช้ เช่น การคลิกหรือเมาส์ รองรับเฉพาะแผนภูมิบางประเภทเท่านั้น ดูเหตุการณ์ด้านล่าง
ความสูง number ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
คําอธิบาย สตริง "ขวา" ตําแหน่งและประเภทคําอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "right" - ทางด้านขวาของแผนภูมิ
  • "left" - ทางด้านซ้ายของแผนภูมิ
  • "ด้านบน" - เหนือแผนภูมิ
  • "bottom" - ที่อยู่ใต้แผนภูมิ
  • "none" - จะไม่แสดงคําอธิบาย
สูงสุด number อัตโนมัติ ค่าสูงสุดที่จะแสดงในแกน Y
นาที number อัตโนมัติ ค่าต่ําสุดที่จะแสดงในแกน Y
แสดงป้ายกํากับหมวดหมู่ บูลีน จริง หากตั้งค่าเป็น "เท็จ" ให้นําป้ายกํากับหมวดหมู่ออก (ป้ายกํากับแกน X)
แสดงป้ายกํากับค่า บูลีน จริง หากตั้งค่าเป็น "เท็จ" ให้นําป้ายกํากับของค่าออก (ป้ายกํากับแกน Y)
title สตริง ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
ระยะเวลาป้ายกํากับ number อัตโนมัติ ช่วงที่จะแสดงป้ายกํากับแกนค่า เช่น หาก min เท่ากับ 0, max คือ 100 และ valueLabelsInterval เท่ากับ 20 แผนภูมิจะแสดงป้ายกํากับแกนที่ (0, 20, 40, 60, 80 100)
ความกว้าง number ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล

เมธอด

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

เหตุการณ์

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

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

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