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

สําคัญ: ตั้งแต่วันที่ 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:["imagelinechart"]});
      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.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

กําลังโหลด

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

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

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

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

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

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

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

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

เมธอด

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

เหตุการณ์

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

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

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