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

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

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

ภาพรวม

แผนภูมิแบบไดนามิกสำหรับสำรวจตัวบ่งชี้ต่างๆ ในช่วงเวลาหนึ่ง และจะแสดงผลแผนภูมิภายในเบราว์เซอร์โดยใช้ 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 ต้องมีค่าเวลา เวลาอาจอยู่ในรูปแบบใดก็ได้ต่อไปนี้
- ปี - ประเภทคอลัมน์: "ตัวเลข" ตัวอย่างเช่น 2008
- เดือน วัน และปี - ประเภทคอลัมน์: "date" ค่าควรเป็นอินสแตนซ์ JavaScript Date
- Week number- ประเภทคอลัมน์: 'string' ค่าควรใช้รูปแบบ YYYYWww ซึ่งสอดคล้องกับ ISO 8601 เช่น "2008W03"
- ไตรมาส - ประเภทคอลัมน์: "สตริง" ค่าควรมีรูปแบบ YYYYQq ซึ่งสอดคล้องกับ ISO 8601 ตัวอย่างเช่น "2008Q3"
คอลัมน์ต่อมาอาจเป็นประเภท "ตัวเลข" หรือ "สตริง" คอลัมน์ตัวเลขจะแสดงในเมนูแบบเลื่อนลงสำหรับแกน X, Y, สี และขนาด คอลัมน์สตริงจะปรากฏในเมนูแบบเลื่อนลงสำหรับสีเท่านั้น โปรดดูตัวอย่างข้างต้น

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

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

เปิดแผนภูมิที่ใช้งานได้และกำหนดการตั้งค่าที่คุณต้องการบันทึก การตั้งค่าที่คุณสามารถระบุ ได้แก่ ระดับความทึบแสง การซูม และการปรับขนาดบันทึกเทียบกับการปรับขนาดเชิงเส้น
เปิดแผงการตั้งค่าโดยคลิกที่สัญลักษณ์เครื่องมือที่มุมขวาล่างของแผนภูมิ
คลิกลิงก์ขั้นสูงที่มุมล่างซ้ายเพื่อเพิ่มแผงขั้นสูงในชุด
ขยายแผง Advanced และคัดลอกเนื้อหาของกล่องข้อความ State ไปยังคลิปบอร์ด (หมายเหตุ: แทนที่จะใช้เมนูตามที่อธิบายไว้ในขั้นตอนที่ 2-4 คุณอาจแทรกปุ่มในหน้าเว็บที่เรียกใช้ getState() และแสดงสถานะปัจจุบันของกล่องข้อความได้)
กำหนดสตริงสถานะที่คุณคัดลอกในขั้นตอนก่อนหน้าให้กับพารามิเตอร์ตัวเลือก "state" ในโค้ดของคุณดังที่แสดงที่นี่ เมื่อส่งผ่านไปยังเมธอด 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);

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

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
ส่วนสูง	ตัวเลข	300	ความสูงของแผนภูมิเป็นพิกเซล
ความกว้าง	ตัวเลข	500	ความกว้างของแผนภูมิเป็นพิกเซล
state	string	ไม่มี	สถานะการแสดงผลเริ่มต้นของแผนภูมิ นี่คือออบเจ็กต์ JSON แบบอนุกรมซึ่งอธิบายระดับการซูม มิติข้อมูลที่เลือก ลูกโป่ง/เอนทิตีที่เลือก และคำอธิบายสถานะอื่นๆ ดูการตั้งค่าสถานะเริ่มต้นเพื่อดูวิธีตั้งค่า
showChartButtons	boolean	จริง	"เท็จ" จะซ่อนปุ่มที่ควบคุมประเภทของแผนภูมิ (ลูกโป่ง / เส้น / คอลัมน์) ที่มุมขวาบน
showHeader	boolean	จริง	"เท็จ" จะซ่อนป้ายกำกับชื่อของเอนทิตี (มาจากป้ายกำกับของคอลัมน์แรกในตารางข้อมูล)
showSelectListComponent	boolean	จริง	"เท็จ" จะซ่อนรายการเอนทิตีที่มองเห็นได้
showSidePanel	boolean	จริง	"เท็จ" จะซ่อนแผงด้านขวา
showXMetricPicker	boolean	จริง	"เท็จ" จะซ่อนเครื่องมือเลือกเมตริกสำหรับ x
showYMetricPicker	boolean	จริง	"เท็จ" จะซ่อนเครื่องมือเลือกเมตริกสำหรับ y
showXScalePicker	boolean	จริง	"เท็จ" จะซ่อนเครื่องมือเลือกการปรับขนาดสำหรับ x
showYScalePicker	boolean	จริง	"เท็จ" จะซ่อนเครื่องมือเลือกการปรับขนาดสำหรับ y
showAdvancedPanel	boolean	จริง	false ปิดใช้ส่วนตัวเลือกในแผงการตั้งค่า

วิธีการ

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

กิจกรรม

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

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

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

หมายเหตุ

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