ฝังแดชบอร์ด

นำไปใช้กับ Tableau Cloud, Tableau Server

โค้ดฝังสำหรับ Tableau Server 2022.3 และใหม่กว่านั้นและ Tableau Cloud ได้เปลี่ยนไปใช้ “การฝัง API v3” แล้ว หากต้องการข้อมูลปัจจุบันเกี่ยวกับเค้าโครงแบบเฉพาะเจาะจงของอุปกรณ์และขนาดของแดชบอร์ด โปรดดูที่กำหนดค่าออบเจ็กต์การฝังและส่วนประกอบในความช่วยเหลือเกี่ยวกับการฝัง API ข้อมูลในหัวข้อนี้มีไว้สำหรับการฝังเวอร์ชันก่อนหน้า (โดยใช้ Tableau JavaScript API v1 และ v2)

ฝังแดชบอร์ดโดยใช้การฝังเวอร์ชันก่อนหน้า

คุณสามารถฝังแดชบอร์ด Tableau ในเว็บไซต์ของคุณหรือหน้า Wiki และแสดงในการจัดวางที่ต่างกันไปตามขนาดของ iframe ได้

ในการทำให้การจัดวางที่เหมาะสมแสดงขึ้นมาให้กับผู้ใช้แต่ละรายโดยอัตโนมัติ ไม่ว่าผู้ใช้นั้นจะใช้อุปกรณ์ใด ให้สร้างการจัดวางสำหรับอุปกรณ์นั้นๆ ให้กับแดชบอร์ดของคุณบน Tableau Desktop เมื่อดำเนินการดังกล่าว Tableau Server และ Tableau Cloud จะแสดงการจัดวางที่เหมาะสมตามขนาด iframe โดยอัตโนมัติ ให้ความกว้างและความสูง 100% ของ iframe แทนที่จะเป็นค่าพิกเซล (ดูด้านล่าง)
เพื่อให้แสดงการจัดวางดังกล่าวเสมอ ไม่ว่า iframe จะมีขนาดเท่าใด โปรดให้พารามิเตอร์ device ในโค้ดฝังของคุณ

ในตัวอย่างต่อไปนี้ โค้ดฝังจะแสดงแดชบอร์ดที่กว้าง 800 พิกเซลและสูง 600 พิกเซล ค่าความกว้างและความสูงนั้นๆ เป็นส่วนหนึ่งของโค้ดฝังตามค่าเริ่มต้นที่คุณจะใช้เมื่อคลิกที่ปุ่มแบ่งปันที่ด้านบนของมุมมองหรือแดชบอร์ด

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' style='width: 800px; height: 600px;' >
  <object class='tableauViz' width='800' height='600' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

ในตัวอย่างนี้ เมื่อแดชบอร์ดใช้การจัดวางสำหรับอุปกรณ์เฉพาะ แอตทริบิวต์รูปแบบของคลาส Div นั้นได้ถูกลบออกและค่าคลาสของอ็อบเจ็กต์สำหรับความกว้างและสูงนั้นถูกแทนที่ด้วย 100% ในกรณีส่วนใหญ่ การจัดวางที่ถูกต้องจะแสดงขึ้นมา หากความกว้างและความสูงไม่ได้ถูกควบคุมไว้ที่ส่วนอื่นใน CSS

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

หากไม่แสดงการจัดวางที่ถูกต้อง อาจเป็นเพราะว่าหน้า HTML ที่คุณใช้สำหรับการฝังนั้นมีแท็ก <!DOCTYPE html> และแท็กนั้นป้องกันไม่ให้รายการในส่วนเนื้อหาของหน้าปรับขนาดเป็น 100% (ดู รายละเอียดของแสตกล้น(ลิงก์จะเปิดในหน้าต่างใหม่)) การแก้ปัญหาคือการเพิ่มโค้ดต่อไปนี้ไปยังส่วนเนื้อหาของหน้า HTML:

<style>
  html, body { height: 100% }
</style>

ตัวอย่างต่อไปนี้คือสถานการณ์สมมติว่าแดชบอร์ดที่ฝังนั้นมีการจัดวางสำหรับอุปกรณ์เฉพาะ พารามิเตอร์ device นั้นกำหนดไว้ว่าเป็น phone ซึ่งหมายความว่า ไม่ว่าจะใช้อุปกรณ์ใดแสดงแดชบอร์ด การจัดวางที่สร้างสำหรับอุปกรณ์โทรศัพท์มือถือก็จะเป็นเหมือนการจัดวางที่แสดง

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />
  <param name='device' value='phone' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

มิติข้อมูลของ ifram และการจัดวางอุปกรณ์

การจัดวางแดชบอร์ดที่อุปกรณ์แสดงจะขึ้นอยู่กับมิติข้อมูลที่เล็กที่สุด (ความสูงหรือความกว้าง) ของ iframe ซึ่งมุมมอง Tableau จะปรากฏขึ้น บางครั้งการจัดวางแบบเดสก์ท็อป แท็บเล็ต หรือโทรศัพท์ก็อาจปรากฏบนอุปกรณ์ประเภทอื่นได้ ตัวอย่างเช่น การจัดวางแบบแท็บเล็ตอาจปรากฏบนคอมพิวเตอร์เดสก์ท็อปได้ หากจอแสดงผลหรือหน้าต่างเบราว์เซอร์มีขนาดเล็ก

หากมิติข้อมูล iframe ที่เล็กที่สุดเป็น ...	การจัดวางอุปกรณ์นี้แสดงเป็น ...
500 พิกเซลหรือน้อยกว่า	โทรศัพท์
ระหว่าง 501 ถึง 800 พิกเซล	แท็บเล็ต
มากกว่า 800 พิกเซล	เดสก์ท็อป

สำหรับรายละเอียดวิธีการสร้างแดชบอร์ดที่ใช้การจัดวางสำหรับอุปกรณ์เฉพาะ โปรดดูสร้างการสร้างการจัดวางแดชบอร์ดสำหรับประเภทอุปกรณ์ต่างๆ

ย้อนกลับไปด้านบน

ขอบคุณสำหรับข้อเสนอแนะของคุณ

ส่งข้อเสนอแนะของคุณเรียบร้อยแล้ว ขอขอบคุณ

Tableau Desktop และความช่วยเหลือในการเขียนเว็บ

ฝังแดชบอร์ด

มิติข้อมูลของ ifram และการจัดวางอุปกรณ์