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

สำคัญ: ส่วนแผนภูมิรูปภาพของเครื่องมือ 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:["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 คอลัมน์ทั้งหมด (ยกเว้นคอลัมน์แรก) ต้องเป็นตัวเลข ไม่มีการจำกัดจำนวนคอลัมน์

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

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

วิธีการ

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

กิจกรรม

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

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

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