动态设置 Plotly.js 表格组件的高度答案

【问题标题】：Dynamically set the height of Plotly.js table component动态设置 Plotly.js 表格组件的高度
【发布时间】：2019-05-24 00:15:38
【问题描述】：

我遇到过如果行数超过表格高度，表格会变得可滚动的问题。

现在高度是根据clientHeigth 属性动态设置的

<Plot
  data={[
    {
      type: "table",
      columnwidth: [4, 1],
      header: {
        values: headerValues,
        font: { size: 24, family: "Montserrat" },
        height: 50,
        align: ["center", "center"],
        fill: { color: "rgb(179, 180, 180);" }
      },
      cells: {
        values: cellValues,
        align: ["left", "center"],
        font: { size: 24, family: "Montserrat" },
        height: 50,
        fill: { color: [tableColors] }
      }
    }
  ]}
  layout={{
    hoverlabel: { bgcolor: "salmon" },
    width: document.documentElement.clientWidth * 0.8,
    height: document.documentElement.clientHeight * 2.5,
    font: {
      family: "Montserrat",
      size: 20
    },
    paper_bgcolor: "#eaeaea",
    opacity: 0.01,
    plot_bgcolor: "#eaeaea"
  }}
/>

我遇到的解决方法是将height 设置为document.documentElement.clientHeight * 2.5，这样它会大于任何情况下 中的行数，但该解决方案非常难看，而且不是都是动态的。

我的问题是 - 有没有办法根据内容动态设置表格高度以避免滚动？

我不确定这是不是问这个问题的正确地方，但是 plotly.js 社区信息量很少，也许这里有人遇到过类似的问题。谢谢

【问题讨论】：

标签： javascript reactjs plotly.js

【解决方案1】：

我找到了一种解决方案。我的表格结构如下：标题（1 line）、内容（n lines）和摘要（1 line）。因此，我的桌子的高度应该足以包含n + 2 行。

从代码中我们可以看到，n 行中要显示的所有数据都包含在cellValues 变量中，该变量具有以下结构[ [], [], [] ]，其中每个内部数组代表一列。

所以要计算n 行，我们需要取cellValues[0].length

然后计算所需的整个高度，我将50px作为1行的高度，答案是将<Plot />的layout属性中的height设置为height: (cellValues[0].length + 2) * 50 + 150。

额外的150px 来自情节的边缘。

【讨论】：