以下是我的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>
该图表现在是响应式的,但问题是该图的上方和下方都有许多空白空间。如何删除情节周围的空白区域或减小卡片的高度。
请帮助。谢谢。
答案 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'
});