Question

我正在plotly.js使用<div id="plotDiv"></div>尝试使用高度有点大的情节。我想把它放到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>，这样：

ini_set('display_errors',true); require_once "pdfparser-master/src/Smalot/PdfParser/Parser.php"; $parser = new \Smalot\PdfParser\Parser(); $pdf = $parser->parseFile('sample.pdf'); $pages = $pdf->getPages(); // Loop over each page to extract text. foreach ($pages as $page) { echo $page->getText(); }

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

Answer 1

只需在#plotdiv周围添加一个新div。试试下面的代码。

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

Answer 2

正如某人所建议的那样（在我尝试接受他的答案之前已经删除了他的答案），请点击此处的链接：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是列表。

在div的最大高度中拟合一个图

2 个答案: