javascript - 动态设置Plotly.js表格组件的高度

Question

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

现在高度是根据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 社区提供的信息很少，也许这里有人遇到过类似的问题。谢谢

Answer 1

我找到了某种解决方案。 我的表格结构如下:标题(1 line)、内容(n lines)和摘要(1 line)。因此我的 table 的高度应该足以包含 n + 2行。

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

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

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

额外 150px来自地 block 的边缘。