如何调整Tableau嵌入仪表盘高度，避免HTML中内容被截断

你的问题出在嵌入代码的JavaScript部分对高度的限制上，以下是具体修改方案：

核心问题分析 #

当前代码中通过maxHeight限制了仪表盘的最大显示高度（1227px），同时响应式逻辑里的高度比例计算（宽度*0.75）可能无法匹配仪表盘的真实高度，导致内容超出后被截断。

修改方案 #

方案1：移除高度限制并设置足够的固定高度 #

直接调整JavaScript部分的高度设置，去掉maxHeight限制，同时设置足够覆盖仪表盘内容的固定高度：

<div class='tableauPlaceholder' id='viz1700944984488' style='position: relative'>
  <noscript>
    <a href='#'>
      <img alt='Price paid data ' src='https://public.tableau.com/static/images/Ho/Housepricepaiddata/Dashboard1/1_rss.png' style='border: none' />
    </a>
  </noscript>
  <object class='tableauViz'  style='display:none;'>
    <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> 
    <param name='embed_code_version' value='3' /> 
    <param name='site_root' value='' />
    <param name='name' value='Housepricepaiddata&#47;Dashboard1' />
    <param name='tabs' value='no' />
    <param name='toolbar' value='yes' />
    <param name='static_image' value='https://public.tableau.com/static/images/Ho/Housepricepaiddata/Dashboard1/1.png' /> 
    <param name='animate_transition' value='yes' />
    <param name='display_static_image' value='yes' />
    <param name='display_spinner' value='yes' />
    <param name='display_overlay' value='yes' />
    <param name='display_count' value='yes' />
    <param name='language' value='en-GB' />
  </object>
</div>                
<script type='text/javascript'>
  var divElement = document.getElementById('viz1700944984488');
  var vizElement = divElement.getElementsByTagName('object')[0];
  // 根据仪表盘实际高度调整数值，比如设为1500px
  vizElement.style.width='100%';
  vizElement.style.height='1500px';
  var scriptElement = document.createElement('script');
  scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
  vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>

方案2：优化响应式逻辑（保留多屏幕适配） #

如果需要保留不同屏幕尺寸的适配，可调整minHeight和maxHeight的值，确保足够容纳仪表盘内容：

var divElement = document.getElementById('viz1700944984488');
var vizElement = divElement.getElementsByTagName('object')[0];
if (divElement.offsetWidth > 800) {
  vizElement.style.width='800px';
  vizElement.style.minHeight='1500px'; // 调大最小高度
  // 移除maxHeight限制，或设置足够大的值
  // vizElement.style.maxHeight='2000px';
  vizElement.style.height='1500px'; // 用固定高度替代比例计算
} else if (divElement.offsetWidth > 500) {
  vizElement.style.width='800px';
  vizElement.style.minHeight='1500px';
  vizElement.style.height='1500px';
} else {
  vizElement.style.width='100%';
  vizElement.style.height='2227px'; // 小屏可按需调整
}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);

调整建议 #

1. 先设置一个较大的高度值（比如1500px），预览后根据实际显示效果微调，直到内容完整显示。
2. 若仪表盘内容会动态变化，可考虑使用Tableau JavaScript API的getVizSize()方法动态获取高度，但实现相对复杂，适合需要高度自适应的场景。

内容的提问来源于stack exchange，提问作者elksie5000