所以我有这个我创建的谷歌图表，在初始加载时，图表很小。我希望图表响应，这是当我改变屏幕大小，但不是在初始加载。
注意-我有一个按钮来选择不同的图表。
下面是帮助您查看的代码。
CSS：

#chart_div {
     width: 1200px !important;
     height: 700px !important;
 }

 @media (max-width: 992px) {
    
     #chart_div {
         width: 350px !important;
         height: 400px !important;
     }

    
 }

Html：

<div style="text-align: center;">
    <div id="chart_div" style="display: inline-block;"></div>
</div>

JS：

var currentChartType = 'total';
function drawChart() {
    
    data.addRows(rows);
    var options = {
        chart: {
            title: 'Acres Over Time for Serial Numbers',
            subtitle: 'Date vs Acres',
        },
        hAxis: {
            format: 'd MMM',
            gridlines: {
                count: rows.length
            },
            minorGridlines: {
                count: 0
            }
        },
        vAxis: {
            title: 'Total Area',
        }
    };
    var chartDiv = document.getElementById('chart_div');
    var chart1 = new google.visualization.LineChart(chartDiv);
    chart1.draw(data, options);
    window.addEventListener('resize', drawChart, false);
}

function drawChartTime() {
    // Populate data
    var rows = [];
    var dateMap = new Map();
    for (var i = 0; i < machines.length; i++) {
        var serialNumber = machines[i]['SerialNr'];
        var date = new Date(machines[i].Date);
        if (!dateMap.has(date)) {
            dateMap.set(date, {});
        }
        dateMap.get(date)[serialNumber] = machines[i].TotalTime;
    }

    dateMap.forEach((serialNumbersData, date) => {
        var row = [date];
        serialNumbers.forEach(serialNumber => {
            row.push(serialNumbersData[serialNumber] || null);
        });
        rows.push(row);
    });

    data.addRows(rows);

    var options = {
        chart: {
            title: 'Acres Over Time for Serial Number ' + serialNumber,
            subtitle: 'Total Duration (hr)',
        },
        hAxis: {
            format: 'd MMM',
            gridlines: {
                count: rows.length
            },
            minorGridlines: {
                count: 0
            }
        },
        vAxis: {
            title: 'Total Duration',
        }
    };

    var chartDiv = document.getElementById('chart_div');
    var chart2 = new google.visualization.LineChart(chartDiv);
    chart2.draw(data, options);
    window.addEventListener('resize', drawChartTime, false);
}

function drawSelectedChart(selectedChartType) {
    if (selectedChartType === 'default') {
        drawDefaultChart();
    } else if (selectedChartType === 'time') {
        drawChartTime();
    } else if (selectedChartType === 'total') {
        drawChart();
    }
}

function switchChart() {
    var chartSelector = document.getElementById('chartSelector');
    var selectedChartType = chartSelector.value;
    currentChartType = selectedChartType;
    drawSelectedChart(currentChartType);
}

      
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(function () {
    // Draw the default chart initially
    drawSelectedChart(currentChartType);
});

我试着在选项中硬编码大小，但不响应大小。我还做了CSS样式，这似乎是工作的响应，但在初始负载很小。