在 div 的最大高度中拟合绘图

Question

我正在尝试div使用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);

情节是在高度有点大，所以我把max-height在div，这种方式：

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

但这不适合 div 中的情节，并隐藏了一些情节。如何在 div 中拟合完整的图？

Answer 1

正如某人的建议（后来在我尝试接受他的答案之前，他删除了他的答案），按照此处的链接：example，我能够调整绘图的大小：

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。