plotly - 响应宽度，固定高度

Question

I have attempted to make a plotly chart that fits within a scrollable parent 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>

Based on the documentation here https://plot.ly/javascript/responsive-fluid-layout/ , I have created a responsive plot:

I want the plot to overflow downwards, so that I can scroll down, but by setting responsive: true, the height defaults to the size of #p1, which is 400px.

Is there a straightforward way to make ONLY the width responsive? I would like to keep the manual height at 10*2.3*Object.keys(data.Index).length

Answer 1

it looks like plotly doesn't yet have that functionality. What I had to do to work around it was to make a fully responsive plot and wrap it into an additional nested div like so:

    <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>

Then I needed to make the div width responsive to its parent 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') );
   })