初始加载时的 Google 图表大小

Question

所以我创建了这个 Google 图表，在初始加载时，该图表很小。我希望图表能够响应，当我更改屏幕尺寸但不是初始加载时。

注意 - 我有一个下拉菜单来选择不同的图表。

这是帮助您查看的代码。

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 样式，它似乎对响应能力有效，但在初始负载上很小。

Answer 1

要使 Google 图表在初始加载时做出响应，您可以在绘制图表后触发调整大小事件或根据窗口大小显式设置尺寸。

JavaScript（绘制图表后添加）：

function drawChart() {
    // existing code
    chart1.draw(data, options);
    window.addEventListener('resize', drawChart, false);

    // Trigger a resize event to make the chart responsive on initial load
    window.dispatchEvent(new Event('resize'));
}

或

JavaScript（根据窗口大小设置尺寸）：

function setChartDimensions() {
    var chartDiv = document.getElementById('chart_div');
    if (window.innerWidth <= 992) {
        chartDiv.style.width = '350px';
        chartDiv.style.height = '400px';
    } else {
        chartDiv.style.width = '1200px';
        chartDiv.style.height = '700px';
    }
}

// Call setChartDimensions when setting up the chart
google.charts.setOnLoadCallback(function () {
    setChartDimensions();
    drawSelectedChart(currentChartType);
});

这些方法中的任何一种都应确保您的图表从初始加载开始即可响应。