将 tableau 仪表板嵌入到 react 中会弄乱仪表板的格式

Question

我有一个画面仪表板，我正尝试使用 tableau-api npm package 将其嵌入到 React 网站中。虽然它在 tableau public 上看起来不错，但当我嵌入它时布局会发生变化。嵌入react时如何保证布局不变？

编辑：这是我的代码。我用了this answer作为参考

import React, { Component } from 'react';
import tableau from 'tableau-api';
 
class Visualization extends Component {
  componentDidMount() {
    this.initTableau()
  }
 
  initTableau() {
    const vizUrl = 'url';
    const vizContainer = this.vizContainer;
    let viz = new window.tableau.Viz(vizContainer, vizUrl)
  }
 
  render() {
    return (
      <div ref={(div) => { this.vizContainer = div }}>
      </div>
    )
  }
}
 
export default Visualization;

Answer 1

有几个选项您应该看看

将仪表板的大小从自动更改为固定（参考 here）。如果您的仪表板中有浮动元素，这将有所帮助
将您的首选设备添加到控制面板

将适合选项更改为整个视图

如果这些选项中的 none 有效，我建议您分享您的仪表板和代码的照片以便能够调试

将 tableau 仪表板嵌入到 react 中会弄乱仪表板的格式

Embedding a tableau dashboard into react messes up the formatting of the dashboard

visualization

tableau-api