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

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

  1. ภาพรวม
  2. ตัวอย่าง
  3. กำลังโหลด
  4. รูปแบบข้อมูล
  5. ตัวเลือกการกำหนดค่า
  6. เมธอด
  7. เหตุการณ์
  8. นโยบายข้อมูล

ภาพรวม

เส้นประกายเดี่ยวหรือหลายเส้นที่แสดงผลพร้อมกับรูปภาพโดยใช้ 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);

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

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

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
สี string ระบุสีที่จะใช้กับแผนภูมิทั้งหมด สตริงในรูปแบบ #rrggbb เช่น "#00cc00" ใช้เมื่อไม่ได้ระบุตัวเลือก colors เท่านั้น
สี อาร์เรย์ของสตริง สีเริ่มต้น สีที่จะใช้กับคอลัมน์ข้อมูล อาร์เรย์ของสตริงโดยที่องค์ประกอบแต่ละรายการเป็นสตริงในรูปแบบ #rrggbb เช่น "#00cc00" สี i ใช้กับคอลัมน์ข้อมูล i หากจำนวนสีน้อยกว่าจำนวนคอลัมน์ การเลือกสีจะล้อมรอบภาพ
เติม boolean false หาก "จริง" จะเติมพื้นที่ใต้เส้นด้วยสี
ส่วนสูง ตัวเลข ความสูงของคอนเทนเนอร์ ความสูงของรูปภาพเป็นพิกเซล
labelPosition string ไม่มี ตำแหน่งของป้ายกำกับ ค่าที่รองรับคือ "none", "left", "right"
สูงสุด อาร์เรย์ของตัวเลข ค่าข้อมูลสูงสุดของ Sparkline แต่ละเส้น ค่าสูงสุดสำหรับช่วงค่าข้อมูลของ Sparkline แต่ละเส้น ดัชนีในอาร์เรย์ต้องตรงกับดัชนีคอลัมน์ในตาราง DataTable หากค่าทั้งหมดเป็นค่าว่าง นี่จะเป็นค่าสูงสุดในชุด
นาที อาร์เรย์ของตัวเลข ค่าข้อมูลต่ำสุดของ Sparkline แต่ละเส้น ค่าต่ำสุดสำหรับช่วงค่าข้อมูลของ Sparkline แต่ละเส้น ดัชนีในอาร์เรย์ต้องตรงกับดัชนีคอลัมน์ในตาราง DataTable หากค่าทั้งหมดเป็น Null นี่จะเป็นค่าต่ำสุดในชุด
showAxisLines boolean จริง หากจริง จะแสดงเส้นแกน หากเป็น "เท็จ" จะไม่ใช่ และค่าเริ่มต้นของ showValueLabels คือ false
showValueLabels boolean true ยกเว้นเมื่อ showAxisLines มีค่าเป็น false หากเป็น "จริง" ป้ายกำกับแกนค่าจะแสดงขึ้นมา
title อาร์เรย์ของสตริง ไม่มีชื่อปรากฏ ชื่อที่จะใช้สำหรับแต่ละ Sparkline
ความกว้าง ตัวเลข ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล
เลย์เอาต์ string "v" เลย์เอาต์แนวตั้งหรือแนวนอน: "v" สำหรับแนวตั้ง, "h" สำหรับแนวนอน

วิธีการ

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

กิจกรรม

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

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

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