Положите динамически созданные таблицы Plotly рядом - PullRequest
Новая
       7

Положите динамически созданные таблицы Plotly рядом

0 голосов
/ 07 февраля 2019

Приведенный ниже код создает четыре таблицы 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 Ответ

0 голосов
/ 08 февраля 2019

Поскольку вы создаете график поверх элемента 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...