如何在 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;。这是一个 link 的好指南：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>

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

How to show two Plotly charts side-by-side in JavaScript

html

javascript

plotly