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

问题描述

我目前有一个顶部有 4 列的仪表板，网格元素设置为 padding-top 100% 以保持完美的正方形（可能会更改为 75%，但解决方案应该适用于任何纵横比）。我希望圆环图适合父 div 并且不会溢出到隐藏中，而是缩小图表以使高度适合父 div 内。目前，图表确实缩小了，因为我将宽度设置为 100%，但圆环图的底部在大多数分辨率下都被隐藏了。如果我单击以刷新页面，它会完美加载。我添加了 javascript 以使图表具有响应性，但似乎无法解决折叠页面时的溢出问题。我在想，因为 flex 的子元素应该是 flex 项目，所以我不能垂直使用 flex-grow 来填充第二个项目的列，即谷歌图表吗？我可能会一起考虑这个错误，并且非常感谢一些反馈。

看这篇文章似乎引用了文森特在评论中的类似问题，但没有写出确切的解决方案。

谷歌图表重绘/缩放窗口调整大小

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);
}

标签： javascripthtmlcss

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

问题描述

解决方案

推荐阅读