代码之家 › 专栏 › 技术社区 › barciewicz

将动态创建的绘图表并排放置

plotly css javascript

barciewicz · 技术社区 · 6 年前

下面的代码创建了四个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>

1 回复 | 直到 6 年前

Naren Murali 6 年前

因为您正在用类创建DIV顶部的绘图 side-by-side 该类将被移除,请参阅下面的示例,其中实现了并排表的效果。

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>