---
schema_version: "1"
id: ad0f5fa5700c057bd1a28bda873e5af87d4c3f821133a0659dd3d893ff475d10
title: ฝังแดชบอร์ด
collection: tableau
version: current
locale: th-th
portal_url: https://docs.salesforce.com/tableau/current/th-th/pro/desktop/embed_dashboard.md
canonical_url: https://help.tableau.com/current/pro/desktop/th-th/embed_dashboard.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 42157d3b433df7345477d1d98e694de3750c3e836d90ba4db9dc48c23b41c9f7
description: โค้ดฝังสำหรับ Tableau Server 2022
---
[ข้ามไปยังเนื้อหาหลัก](#main-content)

# ฝังแดชบอร์ด

> [!TIP]
> 
> โค้ดฝังสำหรับ Tableau Server 2022.3 และใหม่กว่านั้นและ Tableau Cloud ได้เปลี่ยนไปใช้ “การฝัง API v3” แล้ว หากต้องการข้อมูลปัจจุบันเกี่ยวกับเค้าโครงแบบเฉพาะเจาะจงของอุปกรณ์และขนาดของแดชบอร์ด โปรดดูที่[กำหนดค่าออบเจ็กต์การฝังและส่วนประกอบ](https://help.tableau.com/current/api/embedding_api/th-th/docs/embedding_api_configure.html#table-of-properties-and-values-for-embedded-objects-and-components)ใน[ความช่วยเหลือเกี่ยวกับการฝัง API](https://help.tableau.com/current/api/embedding_api/th-th/index.html) ข้อมูลในหัวข้อนี้มีไว้สำหรับการฝังเวอร์ชันก่อนหน้า (โดยใช้ 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% (ดู [รายละเอียดของแสตกล้น](https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this)) การแก้ปัญหาคือการเพิ่มโค้ดต่อไปนี้ไปยังส่วนเนื้อหาของหน้า 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 จะปรากฏขึ้น บางครั้งการจัดวางแบบเดสก์ท็อป แท็บเล็ต หรือโทรศัพท์ก็อาจปรากฏบนอุปกรณ์ประเภทอื่นได้ ตัวอย่างเช่น การจัดวางแบบแท็บเล็ตอาจปรากฏบนคอมพิวเตอร์เดสก์ท็อปได้ หากจอแสดงผลหรือหน้าต่างเบราว์เซอร์มีขนาดเล็ก

<table style="width: 100%;"><colgroup><col><col></colgroup><tbody><tr><th style="text-align: left;">หากมิติข้อมูล iframe ที่เล็กที่สุดเป็น ...</th><th style="text-align: left;">การจัดวางอุปกรณ์นี้แสดงเป็น ...</th></tr><tr><td>500 พิกเซลหรือน้อยกว่า</td><td>โทรศัพท์</td></tr><tr><td>ระหว่าง 501 ถึง 800 พิกเซล</td><td>แท็บเล็ต</td></tr><tr><td>มากกว่า 800 พิกเซล</td><td>เดสก์ท็อป</td></tr></tbody></table>

สำหรับรายละเอียดวิธีการสร้างแดชบอร์ดที่ใช้การจัดวางสำหรับอุปกรณ์เฉพาะ โปรดดูสร้าง[การสร้างการจัดวางแดชบอร์ดสำหรับประเภทอุปกรณ์ต่างๆ](https://help.tableau.com/current/pro/desktop/th-th/dashboards_dsd_create.htm)