javascript - 使绘图适合 div 的最大高度

Question

我正在尝试 div 中的 plotly 使用 plotly.js高度有点大。我想让它适合 div 的高度。如果我使用

<div id="plotDiv"></div>

和

var trace1 = {
            x: ['giraffes', 'orangutans', 'monkeys'],
            y: [20, 14, 23],
            name: 'SF Zoo',
            type: 'bar'
        };

        var trace2 = {
            x: ['giraffes', 'orangutans', 'monkeys'],
            y: [12, 18, 29],
            name: 'LA Zoo',
            type: 'bar'
        };

        var data = [trace1, trace2];

        var layout = {
            autosize:true,
            barmode: 'stack',
            xaxis: {
                tickangle: -45
            },
        };

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

地 block 的高度有点大，所以我放了一个max-height在 div ，这样:

<div id="plotDiv" style="max-height:300px"></div>

但这不符合div中的 plotly ，隐藏了一些 plotly 。如何将完整的绘图放入 div 中？

Answer 1

根据某人的建议(后来在我尝试接受他的回答之前，他删除了他的回答)，点击此处的链接:example , 我能够调整 plotly 的大小，:

var approved = {
                x: approvedX,
                y: approvedY,
                name: 'Approved',
                type: 'bar'
            };

            var unApproved = {
                x: unApprovedX,
                y: unApprovedY,
                name: 'UnApproved',
                type: 'bar'
            };

            var data = [approved, unApproved];

            var layout = {
                barmode: 'stack',
                xaxis: {
                    tickangle: -20
                },
                // title: 'Applications Comparison'
            };
            // Plotly.newPlot('plotDiv', data, layout);

            var d3 = Plotly.d3;

            var HEIGHT_IN_PERCENT_OF_PARENT = 80;

            var gd3 = d3.select('#plot2').append('div').style({
                 height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
                'margin-top': 0 + 'vh',
                'margin-bottom': 10 + 'vh'
            });

            var gd = gd3.node();
            Plotly.plot(gd, data, layout);
            window.onresize = function() {
                Plotly.Plots.resize(gd);
            };

其中 approvedX, approvedY, unApprovedX, unApprovedY 是列表。