html - 增加行高以在其中一列中放置原始尺寸图

Question

我正在尝试将饼图的原始大小 (900x500) 放在 HTML 的右列中，但它不断被调整为更小的大小。我尝试使用 CSS 来调整它的大小并更改rowdiv 的高度，但没有成功。有小费吗？我也是 CSS 新手！

'use strict';


            //https://www.youtube.com/watch?v=y17RuWkWdn8&ab_channel=WebDevSimplified 
            // usar este video para criar uma função que faça append de um novo div com atributos semelhantes aos outros para permitir ao usuario adicionar novos ativos com o cloque de um butao 

            ////////////////////////////////////////////////////////////////////////////////////
            //Get all the values for each stock input and the quota variation (as "Perda potencial" increases, Quota decreases by a ratio of 1:5 and vice-versa)
            let perda;

            document.querySelector(".row").addEventListener("input", function (e) {
                const tgt = e.target;
                if (tgt.classList.contains("perda")) {
                    perda = Number(tgt.closest(".tr").querySelector(".quota").value =
                        20 - tgt.value * 0.2) //O 20 será alterado para a expressao de numero de quotas a dividir por 100%

                    console.log(perda)
                    // quota * perda potencial; var = quota * +- perda potencial / 100
                    //quota - var;
                    //let var = perda/risco potencial
                    //console.log(20 - perda);

                    //isto teria que atualizar sempre que a perda potencial % aumenta ou diminui. Neste momento, apenas faz a soma, nao retira o valor quando perda potencial % diminui e a quota aumenta
                }
            });

            ////////////////////////////////////////////////////////////////////////////////////
            //Load google chart graphs

            google.charts.load("current", { packages: ["corechart"] });
            google.charts.setOnLoadCallback(drawChart);

            ////////////////////////////////////////////////////////////////////////////////////
            //Function that will be passed by the "Desenhar grafico" button so that everytime the user clicks the button, it takes the new input values and updates the pie chart



            function drawChart() {

                let ativo1 = String(document.getElementById("ativo1").value)
                let ativo2 = document.getElementById("ativo2").value;
                let ativo3 = document.getElementById("ativo3").value;
                let ativo4 = document.getElementById("ativo4").value;
                let ativo5 = document.getElementById("ativo5").value;
                let ativosArray = [ativo1, ativo2, ativo3, ativo4, ativo5];

                let quota1 = Number(document.getElementById("quota1").value)
                let quota2 = Number(document.getElementById("quota2").value)
                let quota3 = Number(document.getElementById("quota3").value)
                let quota4 = Number(document.getElementById("quota4").value)
                let quota5 = Number(document.getElementById("quota5").value)
                let quotaArray = [quota1, quota2, quota3, quota4, quota5];
                console.log(quotaArray)

                ////////////////////////////////////////////////////////////////////////////////////
                //Create a "Perda" (Loss) variable that contains the inverse of "Quota". Example: If "Perda potencial" is at 20%, then our "Quota" will be at 16% and our "Perda" would be at 4% (20-16 = 4; original quota - updated quota = perda). This variable should be cumulative so that it will sum up the values for each alteration on the "Quota %" of each "Ativo" (Stock);

                let sum = 0.0;
                for (let i = 0; i < quotaArray.length; i++) {
                    sum += parseFloat(quotaArray[i]);
                };
                perda = 100.0 - sum;

                var data = new google.visualization.DataTable();
                data.addColumn("string", "Ativo");
                data.addColumn("number", "Quota");
                data.addRows([
                    [ativo1, parseFloat(quota1)],
                    [ativo2, parseFloat(quota2)],
                    [ativo3, parseFloat(quota3)],
                    [ativo4, parseFloat(quota4)],
                    [ativo5, parseFloat(quota5)],
                    ["Perda", parseFloat(perda)],
                ]);


                var options = {
                    title: "Calculadora",
                    pieHole: 0.3,
                    pieSliceText: 'value',
                    is3D: true,

                };

                var chart = new google.visualization.PieChart(
                    document.getElementById("piechart")
                );

                chart.draw(data, options);

                console.log(ativo1)
                console.log(quota1);

            }

{
        box-sizing: content-box;
    }

    /* Set additional styling options for the columns */
    .column {
        float: left;
    }

    /* Set width length for the left, right and middle columns */
    .left {
        width: 30%;
    }

    .right {
        width: 70%;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
        height: 100%;
    }

    .td {
        display: inline-block;
        width: 120px;
        text-align: center;
    }

    .button {

        width: 20%;
        margin-left: 35%;
        margin-right: 25%;
        margin-top: 10px
    }

    .piechart {
        width: 120%;
        height: 120%;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>

<body style="background-color:#DFCFBE">

    <div class="row">
        <div class="column left">
            <form id=" form">

                <div class="tr">
                    <div class="td">Ativo </div>
                    <div class="td">Quota % </div>
                    <div class="td">Perda Potencial % </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="TSLA" class="stock" id="ativo1"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota1"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda1" />
                    </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="AAPL" class="stock" id="ativo2"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota2"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda2" />
                    </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="MSFT" class="stock" id="ativo3"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota3"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda3" />
                    </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="EURUSD" class="stock" id="ativo4" />
                    </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota4" />
                    </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda4" />
                    </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="BITCOIN" class="stock" id="ativo5"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota5"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda5" />
                    </div>
                </div>
                <button class="button" type="button" onclick="drawChart();">Desenhar Gráfico</button>

            </form>
        </div>

        <div class="column right">
            <div class=" piechart" id="piechart" style="width: 900; height: 500;"></div>
        </div>
</body>

标签： htmlcss

Answer 1

对于任何有兴趣的人，这都成功了

let options = {
    'legend': 'right',
    pieHole: 0.3,
    pieSliceText: 'value',
    is3D: true,
    colors: ['#FBB117', '#6AA121', '#728FCE', '#4863A0', '#7D0552', '#FF0000'],
    backgroundColor: '#DFCFBE',
    chartArea: {
        left: 50,
        right: 50,
        top: 70
    }
};