使谷歌圖表響應，同時保持父元素的縱橫比不變

Question

我目前有一個頂部有 4 列的儀表板，網格元素設置為 padding-top 100% 以保持完美的正方形（可能會更改為 75%，但解決方案應該適用於任何縱橫比）。 我希望圓環圖適合父 div 並且不會溢出到隱藏中，而是縮小圖表以使高度適合父 div 內。 目前，圖表確實縮小了，因為我將寬度設置為 100%，但圓環圖的底部在大多數分辨率下都被隱藏了。 如果我單擊以刷新頁面，它將完美加載。 我添加了 javascript 以使圖表響應，但似乎沒有解決折疊頁面時的溢出問題。 我在想，因為 flex 的子元素應該是 flex 項目，所以我不能垂直使用 flex-grow 來填充第二個項目的列，即谷歌圖表嗎？ 我可能會一起考慮這個錯誤，並且非常感謝一些反饋。

看這篇文章似乎引用了文森特在評論中的類似問題，但沒有寫出確切的解決方案。

谷歌圖表重繪/縮放 window 調整大小

HTML

    <link rel="stylesheet" href="~/css/dashboard.css" />

<div class="grid-4-2-1 grid-square">
    <grid-child-1 class="grid-child">
        <div class="grid-content">
            <div class="chart-container">
                <h4>Title 1</h4>
                <div id="title1-donut-chart" class="chart"></div>
            </div>
        </div>
    </grid-child-1>
    <grid-child-2 class="grid-child">
        <div class="grid-content">
            <div class="chart-container">
                <h4>Title 2</h4>
                <div id="title2-donut-chart" class="chart"></div>
            </div>
        </div>
    </grid-child-2>
    <grid-child-3 class="grid-child">
        <div class="grid-content">
            <div class="chart-container">
                <h4>Title 3</h4>
                <div id="title3-donut-chart" class="chart"></div>
            </div>
        </div>
    </grid-child-3>
    <grid-child-4 class="grid-child">
        <div class="grid-content">

        </div>
    </grid-child-4>
</div>

@section Scripts
{
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="~/js/dashboard.js"></script>
    <script type="text/javascript">
        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChartPrimary);
        google.charts.setOnLoadCallback(drawChartSecondary);
        google.charts.setOnLoadCallback(drawChartSupervising);
    </script>

CSS

.chart-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column
}
.chart-container h4{
    margin-bottom: 10px;
}

.grid-4-2-1 {
    display: grid;
    grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 10px;
    margin: 10px;
}

.grid-3-1 {
    display: grid;
    grid-template-areas: "grid-child-1 grid-child-2 grid-child-3";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
    margin: 20px;
}

.grid-child {
    position: relative;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    position: relative;
    border: .5px solid #e6e6e6;
}

.grid-child .grid-content {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow:hidden;
    padding: 10px;
}

.grid-square .grid-child {
    padding-top: 100%;
}

.chart {
    height: 100%;
    width: auto;
}


/*javascript made @media queries without sidebar*/
.width-480-768 .grid-4-2-1 {
    grid-template-areas: "grid-child-1 grid-child-2" "grid-child-3 grid-child-4";
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.width-0-480 .grid-4-2-1 {
    grid-template-areas: "grid-child-1" "grid-child-2" "grid-child-3" "grid-child-4";
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.width-0-480 .grid-3-1 {
    grid-template-areas: "grid-child-1" "grid-child-2" "grid-child-3";
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

Javascript

window.addEventListener("resize", function () {
    drawChartTitle1();
    drawChartTitle2();
    drawChartTitle3();
});

document.querySelector('#main-subnav-menu').addEventListener('transitionend', function () {
    drawChartTitle1();
    drawChartTitle2();
    drawChartTitle3();
});

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages': ['corechart'] });

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChartTitle1() {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['stuff1', 11],
        ['stuff2', 2]
    ]);

    // Set chart options
    var options = {
        legend: 'none',
        pieSliceText: 'label',
        legend: 'none',
        pieHole: 0.3,
        chartArea: { 'width': '100%', 'height': '100%' }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('title1-donut-chart'));
    chart.draw(data, options);
}

function drawChartTitle2() {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['stuff1', 11],
        ['stuff2', 2]
    ]);

    // Set chart options
    var options = {
        legend: 'none',
        pieSliceText: 'label',
        legend: 'none',
        pieHole: 0.3,
        chartArea: { 'width': '100%', 'height': '100%' }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('title2-donut-chart'));
    chart.draw(data, options);
}

function drawChartTitle3() {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['stuff1', 11],
        ['stuff2', 2]
    ]);

    // Set chart options
    var options = {
        legend: 'none',
        pieSliceText: 'label',
        legend: 'none',
        pieHole: 0.3,
        chartArea: { 'width': '100%', 'height': '100%' }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('title3-donut-chart'));
    chart.draw(data, options);
}

Answer 1

我能找到的唯一解決方案是在調整大小事件和轉換事件中繪制圖表時將以下內容添加到 javascript 函數中。

document.getElementById('title1-review-donut-chart').innerHTML = '';

事實證明，您必須先刪除所有內容，以便瀏覽器可以先調整 div 的大小。 我的問題中發布的鏈接對此有所暗示，但這將是純粹的 javascript 方法。