引导卡中的响应式PlotlyJS图表

时间：2019-07-17 07:38:00

标签： javascript css twitter-bootstrap plotly.js

以下是我的js代码，用于使用PlotlyJS绘制响应图。

var trace1 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [20, 14, 23, 20, 14, 23, 34, 26],
  marker: {
    color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
  },
  name: 'Item 1',
  type: 'bar'
};

var trace2 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
  },
  name: 'Item 2',
  type: 'bar'
};

var trace3 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
  },
  name: 'Item 3',
  type: 'bar'
};

var data = [trace1, trace2, trace3];

var layout = {
  barmode: 'stack',
};

Plotly.newPlot('myDivPlotly', data, layout);

// code to make plotlyjs responsive
(function() {
  var d3 = Plotly.d3;
  var WIDTH_IN_PERCENT_OF_PARENT = 100,
      HEIGHT_IN_PERCENT_OF_PARENT = 100;

  var gd3 = d3.selectAll(".responsive-plot")
      .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

        height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
        'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
      });

  var nodes_to_resize = gd3[0]; //not sure why but the goods are within a nested array
  window.onresize = function() {
    for (var i = 0; i < nodes_to_resize.length; i++) {
      Plotly.Plots.resize(nodes_to_resize[i]);
    }
  };

})();

以下是我的HTML代码，用于在Bootstrap卡中绘制plotlyJS图表。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <h5 class="card-header">Featured</h5>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <h5 class="card-header">Featured</h5>
        <div class="card-body">
          <div class="responsive-plot" id="myDivPlotly">
        </div>
      </div>
    </div>
  </div>
</div>

该图表现在是响应式的，但问题是该图的上方和下方都有许多空白空间。如何删除情节周围的空白区域或减小卡片的高度。

enter image description here

请帮助。谢谢。

3 个答案:

答案 0 :(得分：0)

您可以使用layout.margin中的属性：

var trace1 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [20, 14, 23, 20, 14, 23, 34, 26],
  marker: {
    color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
  },
  name: 'Item 1',
  type: 'bar'
};

var trace2 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
  },
  name: 'Item 2',
  type: 'bar'
};

var trace3 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
  },
  name: 'Item 3',
  type: 'bar'
};

var data = [trace1, trace2, trace3];

var layout = {
  barmode: 'stack',
  margin: {
    l: 60,
    r: 10,
    b: 10,
    t: 10,
    pad: 4
  }
};

Plotly.newPlot('myDivPlotly', data, layout);

// code to make plotlyjs responsive
(function() {
  var d3 = Plotly.d3;
  var WIDTH_IN_PERCENT_OF_PARENT = 100,
    HEIGHT_IN_PERCENT_OF_PARENT = 100;

  var gd3 = d3.selectAll(".responsive-plot")
    .style({
      width: WIDTH_IN_PERCENT_OF_PARENT + '%',
      'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

      height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
      'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
    });

  var nodes_to_resize = gd3[0]; //not sure why but the goods are within a nested array
  window.onresize = function() {
    for (var i = 0; i < nodes_to_resize.length; i++) {
      Plotly.Plots.resize(nodes_to_resize[i]);
    }
  };

})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <h5 class="card-header">Featured</h5>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <h5 class="card-header">Featured</h5>
        <div class="card-body">
          <div class="responsive-plot" id="myDivPlotly">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

最后我得到了答案，我所要做的只是以下几点：

var data = [trace1, trace2, trace3];

var layout = {
  barmode: 'stack',
  margin: {
    t: 0
  },
  autosize: true // set autosize to rescale
};

var config = {
  'displayModeBar': false
}

Plotly.newPlot('myDivPlotly', data, layout, config);

// update the layout to expand to the available size
// when the window is resized
window.onresize = function() {
    Plotly.relayout('myDivPlotly', {
        'xaxis.autorange': true,
        'yaxis.autorange': true
    });
};

答案 2 :(得分：0)

您必须做一件事以删除底部的空格。但是在顶部边缘有一个隐藏的条形图，该条形图是隐藏的，仅当鼠标悬停在其上时才显示。 您必须在.js文件中进行更改。

var gd3 = d3.selectAll(".responsive-plot")
        .style({
          width: 'fit-content',
          'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

          height: 'fit-content',
          'margin-top': '0vh'
        });
相关问题
最新问题