หน้านี้ได้รับการแปลโดย Cloud Translation API

การแสดงภาพ: Sparkline (รูปภาพ)

สําคัญ: ตั้งแต่วันที่ 20 เมษายน 2012 เราได้เลิกใช้งานส่วน "แผนภูมิรูปภาพ" ของเครื่องมือแผนภูมิของ Google เลิกใช้งานอย่างเป็นทางการแล้ว และจะทํางานต่อไปตามนโยบายการเลิกใช้งาน

ภาพรวม
ตัวอย่าง
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกําหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล

ภาพรวม

Sparkline รายการเดียวหรือหลายรายการที่แสดงผลด้วยรูปภาพโดยใช้ Google Charts API รูปภาพอยู่ในตาราง HTML

ตัวอย่าง

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

กําลังโหลด

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

  google.charts.load("current", {packages: ["imagesparkline"]});

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

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

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

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

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

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
สี	สตริง		ระบุสีที่จะใช้กับแผนภูมิทั้งหมด สตริงในรูปแบบ #rrggbb เช่น "#00cc00" ใช้เมื่อไม่ได้ระบุตัวเลือก `colors` เท่านั้น
สี	อาร์เรย์ของสตริง	สีเริ่มต้น	สีที่จะใช้สําหรับคอลัมน์ข้อมูล อาร์เรย์ของสตริงที่องค์ประกอบแต่ละรายการเป็นสตริงในรูปแบบ #rrggbb เช่น "#00cc00" สี i ใช้กับคอลัมน์ข้อมูล i หากจํานวนสีน้อยกว่าจํานวนคอลัมน์ การเลือกสีจะรวมอยู่รอบๆ
เติม	บูลีน	เท็จ	หากเป็นจริง ระบบจะเติมพื้นที่ใต้เส้นสี
ความสูง	number	ความสูงของคอนเทนเนอร์	ความสูงของรูปภาพเป็นพิกเซล
ตําแหน่งป้ายกํากับ	สตริง	ไม่มี	ตําแหน่งของป้ายกํากับ ค่าที่รองรับคือ "none", "left", "right"
สูงสุด	อาร์เรย์ของตัวเลข	ค่าสูงสุดของข้อมูลของแต่ละ Sparkline	ค่าสูงสุดของช่วงค่าของข้อมูล Sparkline แต่ละรายการ ดัชนีในอาร์เรย์ต้องตรงกับดัชนีคอลัมน์ในตารางข้อมูล หากค่าทั้งหมดเป็น Null ค่านี้จะเป็นค่าสูงสุดในชุดหนังสือ
นาที	อาร์เรย์ของตัวเลข	มูลค่าข้อมูลขั้นต่ําของแต่ละ Sparkline	ค่าต่ําสุดสําหรับช่วงมูลค่าของข้อมูล Sparkline แต่ละรายการ ดัชนีในอาร์เรย์ต้องตรงกับดัชนีคอลัมน์ในตารางข้อมูล หากค่าทั้งหมดเป็น Null ค่านี้จะเป็นค่าขั้นต่ําในชุด
แสดงสายAxisLine	บูลีน	จริง	หากเป็น "จริง" ระบบจะแสดงเส้นแกน หากเป็น "เท็จ" แสดงว่าไม่ใช่ และค่าเริ่มต้นสําหรับ ShowValueLabel เป็นเท็จ
แสดงป้ายกํากับค่า	บูลีน	true ยกเว้นเมื่อ ShowAxisLines เป็นเท็จ	หากเป็น "จริง" ระบบจะแสดงป้ายกํากับแกนค่า
title	อาร์เรย์ของสตริง	ไม่มีชื่อ	ชื่อที่จะใช้สําหรับ Sparkline แต่ละรายการ
ความกว้าง	number	ความกว้างของคอนเทนเนอร์	ความกว้างของแผนภูมิเป็นพิกเซล
เลย์เอาต์	สตริง	"v"	เลย์เอาต์แนวตั้งหรือแนวนอน: "v" สําหรับแนวตั้ง "h" สําหรับแนวนอน

เมธอด

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

เหตุการณ์

ชื่อ	คำอธิบาย	พร็อพเพอร์ตี้
เลือก	เหตุการณ์การเลือกมาตรฐาน	ไม่มี

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

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