文章/答案/技术大牛

发布

社区首页 >问答首页 >将动态创建的Plotly表并排放置

问将动态创建的Plotly表并排放置
EN

Stack Overflow用户

提问于 2019-02-08 03:53:26

回答 1查看 421关注 0票数 0

下面的代码创建了四个Plotly.js表，并将它们放在另一个表的下面。

我希望代码或多或少保持原样，而是并排显示四个表。我如何才能做到这一点？

如下所示，我尝试过使用CSS的float: left，但我一定是做错了，因为它不会改变任何东西。

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<style>
    .side-by-side {
        float: left;
    }
</style>
<body>   
<script>

var table_titles = [
    'table 1',
    'table 2',
    'table 3',
    'table 4',
]

function create_table(div) {
    var data = [{
        type: 'table',
        header: {
            values: [['header1'], ['header2']],
        },
        cells: {
            values: [[1,2,3,4,5], ['a','b','c','d','e']],
        }
    }]
    var layout = {
        title: div.id,
    }
    Plotly.plot(div, data, layout)
}

function new_div(div_id) {
    var div = document.createElement('div')
    div.id = div_id
    div.class = 'side-by-side'
    return div
}

function create_tables() {
    table_titles.forEach((title) => {
        var div = new_div(title)
        document.body.appendChild(div)
        create_table(div)
    })
}   
create_tables()   

</script>
</body>
</html>

plotly

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-08 15:34:15

由于您正在使用类side-by-side在div顶部创建绘图，因此该类将被删除，请参考下面的示例，其中实现了并排表格效果。

css类应该是这样的。

.side-by-side > div{
    width: 25%;
    display:inline-block;
}

var table_titles = [
  'table 1',
  'table 2',
  'table 3',
  'table 4',
]

function create_table(div) {
  var data = [{
    type: 'table',
    header: {
      values: [
        ['header1'],
        ['header2']
      ],
    },
    cells: {
      values: [
        [1, 2, 3, 4, 5],
        ['a', 'b', 'c', 'd', 'e']
      ],
    }
  }]
  var layout = {
    title: div.id,
    margin: {
      t: 10,
      b: 10,
      l: 10,
      r: 10,
      pad: 0
    }
  }
  Plotly.plot(div, data, layout)
}

function new_div(div_id) {
  var div = document.createElement('div')
  div.id = div_id
  return div
}

function create_tables() {
  table_titles.forEach((title) => {
    var div = new_div(title)
    document.getElementsByClassName('side-by-side')[0].appendChild(div)
    create_table(div)
  })
}
create_tables()

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<style>
    .side-by-side > div{
        width: 25%;
        display:inline-block;
    }
</style>
<body> 
<div class="side-by-side">
  
</div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54581260

复制

相似问题

问将动态创建的Plotly表并排放置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将动态创建的Plotly表并排放置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将动态创建的Plotly表并排放置
EN