使谷歌图表响应，同时保持父元素的纵横比不变

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 方法。