使google图表响应，同时保持父元素的纵横比恒定

<div class="chart-container">
  <div id="google-chart"></div>
</div>

<style>
.chart-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 设置纵横比，例如4:3的纵横比为75% */
}

#google-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%; /* 保持纵横比 */
  max-height: 100%; /* 保持纵横比 */
}
</style>

<div class="chart-container">
  <canvas id="google-chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('google-chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3'],
    datasets: [{
      label: 'Dataset',
      data: [10, 20, 30],
      backgroundColor: ['red', 'green', 'blue']
    }]
  },
  options: {
    maintainAspectRatio: true, // 保持纵横比
    responsive: true // 响应式布局
  }
});
</script>