javascript - plotly - 响应宽度,固定高度
问题描述
我试图制作一个适合可滚动父 div 的绘图图表:
data = {
Name: {0:'name1', 1:'name2', 2: 'name3',
3:'n4',4:'ewf',5:'dgag', 6:'faf', 7:'dfss',
8:'345',9:'9',10:'23435', 11:'2e345',12:'3345', 13:'a345',
14:'34g5', 15:'3f45'},
Count: {0:1023, 1:2345, 3:3875,4:234,5:3456, 6:84, 7:7763,
8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345,
15:345},
Index: {0:35, 1:200, 2:160, 3:24,4:234,5:356, 6:84, 7:73,
8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345,
15:345}
}
$('#p1').html("");
console.log(data)
Plotly.newPlot('p1',
[{
type: 'bar',
x: Object.values(data.Count),
y: Object.values(data.Name),
base: 0,
orientation: 'h'
},{
type: 'bar',
x: Object.values(data.Index).map(function (e) {
e = e-100
return e
}),
y: Object.values(data.Name),
base: 100,
orientation: 'h',
xaxis: 'x2',
yaxis: 'y'
},],
{
height: 10*2.3*Object.keys(data.Index).length,
yaxis: {
automargin: true,
tickangle: 35
},
grid: {
rows: 1,
columns: 2,
subplots: [['xy', 'x2y']]
}
},
{
responsive: true
})
.col.tpcs{
overflow-y: scroll;
overflow-x: hidden;
display: inline-block;
height: 400px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row loading pt-5 mt-md-3 mb-5">
<div class="col tpcs" id='p1'></div>
</div>
根据此处的文档https://plot.ly/javascript/responsive-fluid-layout/,我创建了一个响应式绘图:
我希望绘图向下溢出,以便向下滚动,但通过设置响应:true,高度默认为 #p1 的大小,即 400px。
有没有一种简单的方法可以只使宽度响应?我想将手动高度保持在 10*2.3*Object.keys(data.Index).length
解决方案
看起来情节还没有那个功能。我必须做的是制作一个完全响应的情节并将其包装到一个额外的嵌套 div 中,如下所示:
<div class="row loading pt-5 mt-md-3 mb-5">
<div class="col tpcs" id='p1wrap'>
<div class="ph" id=p1></div>
</div>
</div>
然后我需要使 div 宽度响应其父 div:
function resP(id){
var d3 = Plotly.d3;
var parent_width = $("#"+id).parent().width()
var gd3 = d3.select(`div[id=${id}]`)
.style({
width: parent_width - 10,
//'margin-right': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + 'vh',
//'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});
return gd3.node();
}
window.addEventListener('resize', function(){
Plotly.Plots.resize( resP('p1') );
})
推荐阅读
- java - Log.d 方法之一不执行且不同时抛出异常
- docker - 错误:无法连接到 Docker 守护程序。您可能需要启动 Docker for Windows
- reactjs - 如何使用带有打字稿的 React-bootstrap 模态
- amazon-web-services - 在 AWS 中创建 Oracle 数据库
- vue.js - Vuex 存储状态在控制台中未定义,但 Vue 工具显示工作正常
- webdav - 在一个请求中将多个文件发送到 webdav 服务器
- ios - UIImageView 没有从 UITableView 中删除
- swift - 检查退出 TextField resignedFirstReponder?
- reactjs - 使用 Yarn 2 链接 React 组件时未找到模块错误
- python - 有没有办法比较 Python 中的列表,类似于 excel 中的 vlookup