การเขียนโค้ดฝังสำหรับมุมมอง
โค้ดฝังสำหรับ Tableau Server 2022.3 และใหม่กว่านั้นและ Tableau Cloud ได้เปลี่ยนไปใช้ “การฝัง API v3” แล้ว หากต้องการข้อมูลปัจจุบันเกี่ยวกับวิธีการฝังมุมมองด้วยการฝัง API v3 โปรดดูที่การฝังขั้นพื้นฐานในความช่วยเหลือเกี่ยวกับการฝัง API ข้อมูลในหัวข้อนี้มีไว้สำหรับการฝังเวอร์ชันก่อนหน้า (โดยใช้ Tableau JavaScript API v1 และ v2)
หากคุณกำลังเขียนโค้ดสำหรับฝังของคุณเอง คุณสามารถใช้วิธีใดวิธีหนึ่งจากสองวิธีต่อไปนี้
ใช้ Tableau JavaScript: ซึ่งเป็นวิธีที่แนะนำ ใช้โค้ดฝังที่ Tableau สร้างเป็นจุดเริ่มต้นสำหรับโค้ดของคุณ เพิ่มหรือแก้ไขพารามิเตอร์ออบเจ็กต์ที่ควบคุมแถบเครื่องมือ แท็บ และอื่นๆ โค้ดฝังตามค่าเริ่มต้น ซึ่งใช้ไฟล์ Tableau JavaScript เป็นวิธีเดียวที่จะควบคุมลำดับการโหลดของมุมมองฝังหลายมุมมอง
ระบุ URL ของมุมมอง: ฝังมุมมองโดยใช้ iframe หรือแท็กรูปภาพ โดยแหล่งที่มาคือ URL ที่คุณได้รับเมื่อคุณคลิกแชร์บนมุมมองแล้วจึงคลิกคัดลอกลิงก์ คุณอาจต้องทำขั้นตอนนี้ หากคุณไม่สามารถใช้ JavaScript บนเว็บไซต์ได้ อาจมีบางกรณีที่คุณระบุได้เฉพาะ URL เท่านั้น
เมื่อคุณฝังมุมมอง คุณควรกำหนดความกว้างและความสูงที่มุมมองจะแสดง มิฉะนั้นเบราว์เซอร์ไคลเอ็นต์จะเลือกความกว้างและความสูงโดยไม่มีกฎเกณฑ์
หมายเหตุ: เมื่อคุณต้องการระบุชื่อเซิร์ฟเวอร์สำหรับ Tableau Cloud ในโค้ดฝัง (ตัวอย่างเช่น เพื่อชี้ไปที่ตำแหน่งของ JavaScript API) ให้ใช้ URL https://online.tableau.com
ใช้ Tableau JavaScript
โค้ดต่อไปนี้จะแสดงตัวอย่างของโค้ดฝังที่สร้างขึ้นเมื่อคุณคลิกแชร์บนมุมมองที่เผยแพร่ ตัวอักษรพิเศษในพารามิเตอร์ host_url
คือ URL ที่เข้ารหัส และตัวอักษรพิเศษใน site_root
และ name
จะระบุเป็นการอ้างอิงอักขระตัวเลข HTML
ตัวอย่างของ Tableau Server
<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> <param name='site_root' value=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
ตัวอย่างของ Tableau Cloud
<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> <param name='site_root' value='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> </object> </div>
แหล่งข้อมูลสำหรับแท็ก <script>
คือ URL สำหรับไฟล์ Tableau Server และ Tableau Cloud JavaScript ที่ชื่อ viz_v1.js ไฟล์ JavaScript จะจัดการรวบรวม URL แบบเต็มของมุมมองที่แสดงสำหรับผู้ใช้ของคุณ ต้องใช้พารามิเตอร์ของออบเจ็กต์ name
และ site_root
เท่านั้น พารามิเตอร์อื่นๆ เป็นตัวเลือกที่ไม่บังคับ
ระบุ URL ของมุมมอง
นี่คือตัวอย่างของการฝังมุมมองเดียวกันโดยใช้ iframe ซึ่งแหล่งข้อมูลคือ URL ที่คุณจะได้รับเมื่อคลิกแชร์บนมุมมอง แล้วจึงคลิกคัดลอกลิงก์
ตัวอย่างของ Tableau Server
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
ตัวอย่างของ Tableau Cloud
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
จำเป็นต้องใช้พารามิเตอร์ URL embed
และคุณสามารถเลือกเพิ่มพารามิเตอร์ที่ควบคุมแถบเครื่องมือและและเปลี่ยนกลับตัวเลือกต่างๆ จากตัวเลือกอื่นๆ ได้ คุณสามารถเพิ่มตัวกรองลงใน URL ที่ควบคุมข้อมูลเฉพาะซึ่งจะแสดงเมื่อมีการโหลดข้อมูลพร็อพเพอร์ตี้ได้เช่นกัน
คำแนะนำ: เมื่อใช้วิธีการนี้ ให้เพิ่มแอตทริบิวต์ HTML allowfullscreen="true"
ลงในองค์ประกอบ iframe เพื่อเปิดใช้งานปุ่ม “เต็มหน้าจอ” บนมุมมอง