tableau-api - 将 tableau 仪表板嵌入到 React 中会弄乱仪表板的格式

Question

我有一个 Tableau 仪表板，我正在尝试使用 tableau-api npm package 将其嵌入到 React 网站中。虽然它在公共(public) Tableau 上看起来不错，但当我嵌入它时布局会发生变化。当我将其嵌入到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

您应该考虑几个选项

1. 将仪表板的大小从自动更改为固定(引用 here )。如果您的仪表板中有 float 元素，这将会有所帮助
2. 将您喜欢的设备添加到仪表板面板

将适合选项更改为整个 View

如果这些选项都不起作用，我建议您分享仪表板和代码的照片，以便能够进行调试