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

Posted 2023-02-18

【中文标题】动态设置 Plotly.js 表格组件的高度

【英文标题】：Dynamically set the height of Plotly.js table component

【发布时间】：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 社区信息量很少，也许这里有人遇到过类似的问题。谢谢

【参考方案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 来自情节的边缘。