Question

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

Answer 1

由于您正在使用类ArrayList<Node> successors = new ArrayList<Node>(); //generate a successor from moving the 0 to the right if (col < size-1) { int[][] right = Board.copyBoard(board); right[row][col] = right[row][col + 1]; right[row][col+1] = 0; successors.add(new Node(right)); } else if (col < size - 1) { int[][] left = Board.copyBoard(board); left[row][col] = left[row][col-1]; left[row][col-1] = 0; successors.add(new Node(left)); } else if (row < size-1) { int[][] down = Board.copyBoard(board); down[row][col] = down[row + 1][col]; down[row + 1][col] = 0; successors.add(new Node(down)); } else if (row < size - 1) { int[][] up = Board.copyBoard(board); up[row][col] = up[row-1][col]; up[row-1][col] = 0; successors.add(new Node(up)); } return successors;在div顶部创建图，因此将删除该类，因此请参考下面的示例，该示例实现了并排表格的效果。

css类应该是这样。

side-by-side

.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()

并排放置动态创建的Plotly表

1 个答案: