如果屏幕尺寸小，如何不让谷歌图表宽度缩小

Question

我将谷歌图表列用于我的网站，并将其放在响应式 div 中。它在大屏幕上运行良好。如果我通过拖动浏览器使其变小来调整浏览器的大小，响应式溢出就可以像这样正常工作。

正常屏幕（工作）：

较小的屏幕（工作）：

我希望图表像上面的图像一样，即使屏幕很小也能响应。问题是，如果我在较小的屏幕上刷新页面，尺寸图表将缩小，2021 年的数据不会像这样显示（刷新时屏幕较小）：

我已经尝试使用此设置大小值，但仍然无法正常工作：

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
      ,height: 1000
      ,width: 1000
    }
  };

这是我的代码：

 <div class="mb-2 align-items-center overflow-auto">
    <div class="card shadow mb-4">
      <div class="card-body">
        <div class="row">
          <div id="columnchart_material" class="col-12" style="height: 500px;"></div>
        </div>
      </div> 
    </div>
  </div>

  <script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350],
    ['2018', 1030, 540, 350],
    ['2019', 1030, 540, 350],
    ['2020', 1030, 540, 350],
    ['2021', 1030, 540, 350]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
      ,height: 1000
      ,width: 1000
    }
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

Answer 1

我通过不在图表内但在选项内添加宽度来解决问题

   var options = {
    width: 1500,
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
    }
  };