如何在 JavaScript 中并排显示两个 Plotly 图表

Question

我想让两个 Plotly 图表彼此相邻地出现在同一行上。目前一张图表出现在另一张图表上方。

这是我的两个图表的 JavaScript 代码：

    var barData = [
    {
        x: x_names,
        y: y_data,
        text: y_names,
        marker: { color: 'rgba(202,210,211,.90)' },
        type: 'bar',
        orientation: 'v',
        width: 0.8,
        options: { offset: true }
    }];

var barLayout = {
    title: "<b>Arrears Balance Managed by CSM</b>",
    showlegend: false,
    xaxis: { tickangle: 45, zeroline: true },
    yaxis: { gridwidth: 1, zeroline: true },
    height: 400,
    width: 500,

};

Plotly.newPlot('bar', barData, barLayout);

var donutData = [{
    labels: y1_names,
    values: x1_data,
    hole: .4,
    type: "pie"
}];

var donutLayout = {
    height: 400,
    width: 500,
    margin: {"t": 0, "b": 0, "l": 0, "r": 0},
    showlegend: true
    }

Plotly.newPlot('pie', donutData, donutLayout);

以下内容来自我的html文档：

  <h3 class='display-4'>Graphs</h3>

  <div class="col-md-6">
    <div id="bar">
  </div>

  <div class="col-md-6">
    <div id="pie">
  </div>

有没有办法让两个图表并排排列？

预先感谢您的帮助。

Answer 1

如果您的网页使用现代浏览器。我建议您使用以下 CSS：

display: flex;

。这是一个很好的指南的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您还可以看到我在代码片段中制作的示例：

.graph-container {
  display: flex;
}

#bar {
  flex: 1;
  width: 50px;
  height: 50px;
  background-color: #FF0000;
}

#pie {
  flex: 1;
  width: 50px;
  height: 50px;
  background-color: #0000FF;
}

<h3 class='display-4'>Graphs</h3>
<div class='graph-container'>
  <div id="bar"></div>
  <div id="pie"></div>
</div>

Answer 2

这对我有用：

<div class="container row justify-content-center">
    <div id="bar" class="col-12 col-sm-6"></div>
    <div id="pie" class="col-12 col-sm-6"></div>
</div>