文章/答案/技术大牛

发布

社区首页 >问答首页 >绘图响应式宽度，固定高度

问绘图响应式宽度，固定高度
EN

Stack Overflow用户

提问于 2020-03-02 22:12:20

回答 2查看 4.8K关注 0票数 4

我曾尝试制作一个适合可滚动父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/，我已经创建了一个响应图：

我希望绘图向下溢出，以便可以向下滚动，但是通过设置responsive: true，高度缺省为#p1的大小，即400px。

有没有一种简单的方法可以只响应宽度？我希望将手动高度保持为10*2.3*Object.keys(data.Index).length

plotly.js

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-28 05:32:29

将绘图设置为响应式，然后在调整父级大小时使用此函数(它会在浏览器中触发窗口大小调整事件)：

window.dispatchEvent(new Event('resize'));

票数 0

Stack Overflow用户

发布于 2020-03-04 04:01:47

看起来plotly还没有这个功能。为了解决这个问题，我需要做的是创建一个完全响应的图，并将其封装到一个额外的嵌套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') );
   })

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60490649

复制

相似问题

问绘图响应式宽度，固定高度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绘图响应式宽度，固定高度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绘图响应式宽度，固定高度
EN