将 tableau 仪表板嵌入到 react 中会破坏仪表板的格式

Question

我有一个画面仪表板，我正在尝试使用 tableau-api npm package 将其嵌入到反应网站中。虽然它在公共画面上看起来不错，但当我嵌入它时布局会发生变化。当我将布局嵌入到 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）。如果您的仪表板中有浮动元素，这将有所帮助
2. 将您的首选设备添加到仪表板面板

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

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