การแสดงภาพ: แผนภูมิแบบเคลื่อนไหว

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

ภาพรวม

แผนภูมิแบบไดนามิกสําหรับสํารวจตัวบ่งชี้ต่างๆ เมื่อเวลาผ่านไป แผนภูมิจะแสดงผลภายในเบราว์เซอร์โดยใช้ Flash

หมายเหตุสําหรับนักพัฒนาแอป: เนื่องจากการตั้งค่าความปลอดภัยของ Flash การทํางานลักษณะนี้ (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทํางานไม่ถูกต้องเมื่อเข้าถึงจากตําแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) แทนที่จะเป็น URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยปกติแล้วจะเป็นการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ Adobe

ตัวอย่าง

(โปรดทราบว่าโค้ดต่อไปนี้จะใช้งานไม่ได้เมื่อโหลดเป็นไฟล์ในเครื่อง แต่จะต้องโหลดจากเว็บเซิร์ฟเวอร์)

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

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

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

กําลังโหลด

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

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

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

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

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

  • คอลัมน์แรกต้องเป็นประเภท "สตริง" และมีชื่อเอนทิตี (เช่น "แอปเปิ้ล" "ส้ม" "กล้วย" ในตัวอย่างด้านบน)
  • คอลัมน์ที่ 2 ต้องมีค่าเวลา เวลาอาจแสดงในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
    • ปี - ประเภทคอลัมน์: "number" ตัวอย่าง: 2008
    • เดือน วัน และปี - ประเภทคอลัมน์: "date" และค่าควรเป็นอินสแตนซ์ Date ของ JavaScript
    • Week number- ประเภทคอลัมน์: 'string'; ค่าควรใช้รูปแบบ YYYYWww ซึ่งสอดคล้องกับ ISO 8601 ตัวอย่างเช่น "2008W03"
    • Quarter - ประเภทคอลัมน์: "string" โดยค่าควรมีรูปแบบ YYYYQq ซึ่งเป็นไปตาม ISO 8601 ตัวอย่างเช่น "2008Q3"
  • คอลัมน์ที่ตามมาอาจเป็นประเภท "ตัวเลข" หรือ "สตริง" คอลัมน์ตัวเลขจะแสดงในเมนูแบบเลื่อนลงสําหรับแกน X, Y, สี และขนาด คอลัมน์สตริงจะปรากฏในเมนูแบบเลื่อนลงสําหรับสีเท่านั้น ดูตัวอย่างด้านบน

การตั้งค่าสถานะเริ่มต้น

คุณระบุได้ว่าแผนภูมิการเคลื่อนไหวจะเริ่มต้นด้วยสถานะที่เฉพาะเจาะจง กล่าวคือ ชุดเอนทิตีที่เลือกและการปรับแต่งการดู หากต้องการทําเช่นนี้ คุณต้องสร้างและแสดงแผนภูมิก่อน จากนั้นจึงทําการเปลี่ยนแปลงสถานะที่ต้องการให้แผนภูมิแสดง (เลือกค่า เปลี่ยนการตั้งค่า ฯลฯ) จากนั้นส่งออกการตั้งค่าเหล่านี้เป็นสตริง และสุดท้ายใช้สตริงนี้ในโค้ด แล้วกําหนดตัวเลือก "สถานะ" ส่วน 2 ส่วนถัดไปจะอธิบายวิธีส่งออกและใช้รหัสสถานะ

  1. เปิดแผนภูมิที่ใช้งานได้และกําหนดการตั้งค่าที่ต้องการบันทึก การตั้งค่าที่คุณระบุได้รวมถึงระดับความทึบแสง การซูม และการบันทึกเทียบกับการปรับขนาดเชิงเส้น
  2. เปิดแผงการตั้งค่าโดยคลิกสัญลักษณ์ประแจที่มุมขวาล่างของแผนภูมิ
  3. คลิกลิงก์ขั้นสูงที่มุมซ้ายล่างเพื่อเพิ่มแผงขั้นสูงในชุด
  4. ขยายแผงขั้นสูงและคัดลอกเนื้อหาของกล่องข้อความสถานะไปยังคลิปบอร์ด (หมายเหตุ: แทนที่จะแทรกเมนูตามที่อธิบายไว้ในขั้นตอนที่ 2-4 คุณสามารถแทรกปุ่มในหน้าเว็บที่เรียกใช้ getState() และแสดงสถานะปัจจุบันของกล่องข้อความ)
  5. กําหนดสตริงสถานะที่คุณคัดลอกไว้ในขั้นตอนก่อนหน้าไปยังพารามิเตอร์ตัวเลือก "สถานะ" ในโค้ดดังที่แสดงที่นี่ เมื่อเข้าสู่เมธอด draw() แผนภูมิจะอยู่ในสถานะเริ่มต้นเมื่อเริ่มต้นใช้งาน
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
ความสูง number 300 ความสูงของแผนภูมิเป็นพิกเซล
ความกว้าง number 500 ความกว้างของแผนภูมิเป็นพิกเซล
รัฐ สตริง ไม่มี สถานะเริ่มต้นของแผนภูมิ นี่คือออบเจ็กต์ JSON แบบอนุกรมที่อธิบายระดับการซูม มิติข้อมูลที่เลือก บับเบิล/เอนทิตีที่เลือก และคําอธิบายสถานะอื่นๆ ดูวิธีการตั้งค่าได้ที่การตั้งค่าสถานะเริ่มต้น
แสดงปุ่มแผนภูมิ บูลีน จริง เท็จ ซ่อนปุ่มที่ควบคุมประเภทแผนภูมิ (กรอบ / เส้น / คอลัมน์) ที่มุมขวาบน
แสดงส่วนหัว บูลีน จริง false ซ่อนป้ายกํากับชื่อเอนทิตี (มาจากป้ายกํากับของคอลัมน์แรกในตารางข้อมูล)
แสดงรายการที่เลือกรายการคอมโพเนนต์ บูลีน จริง เท็จ ซ่อนรายการเอนทิตีที่มองเห็นได้
แสดงแผงด้านข้าง บูลีน จริง false ซ่อนแผงด้านขวามือ
แสดงXX Picker บูลีน จริง เท็จ ซ่อนเครื่องมือเลือกเมตริกสําหรับ x
แสดงเครื่องมือเลือกเมตริก บูลีน จริง เท็จ ซ่อนเครื่องมือเลือกเมตริกสําหรับ y
แสดงXScale Picker บูลีน จริง เท็จ ซ่อนเครื่องมือเลือกขนาดสําหรับ x
แสดงสเกลเครื่องมือเลือก บูลีน จริง เท็จ ซ่อนเครื่องมือเลือกการปรับขนาดสําหรับ y
แสดงแผงควบคุมขั้นสูง บูลีน จริง false ปิดใช้งานช่องตัวเลือกในแผงการตั้งค่า

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิด้วยตัวเลือกที่มีให้
getState() สตริง แสดงสถานะปัจจุบันของ Motionแผนภูมิ โดยเรียงลําดับเป็นสตริง JSON หากต้องการกําหนดสถานะนี้ให้กับแผนภูมิ ให้กําหนดสตริงนี้ไปยังตัวเลือก "state" ในเมธอด draw() ซึ่งมักจะใช้เพื่อระบุสถานะแผนภูมิที่กําหนดเองเมื่อเริ่มต้นใช้งาน แทนที่จะใช้สถานะเริ่มต้น

เหตุการณ์

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
error เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ รหัส, ข้อความ
พร้อม แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่จะเรียกใช้เมธอดการวาด แล้วเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น ไม่มี
การเปลี่ยนแปลงสถานะ ผู้ใช้ได้โต้ตอบกับแผนภูมิในทางใดทางหนึ่ง เรียกใช้ getState() เพื่อดูสถานะปัจจุบันของแผนภูมิ ไม่มี

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

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ

หมายเหตุ

เนื่องจากการตั้งค่าความปลอดภัยของ Flash กรณีนี้ (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทํางานไม่ถูกต้องเมื่อเข้าถึงจากตําแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) แทนที่จะเป็น URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยปกติแล้วจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ mediamedia