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）。因此，我桌的高度应足以容纳n + 2行。

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

因此，要计算n行，我们需要采用cellValues[0].length

然后计算所需的总高度，我以50px作为1行的高度，答案是将height的{{1}}属性中的<Plot />设置为 layout。

额外的height: (cellValues[0].length + 2) * 50 + 150来自情节的边缘。

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

1 个答案: