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

Question

我为我的网站使用 google 图表列并将其放在响应式 div.Its 中，在大型 screen.If 上运行良好 screen.If 我通过拖动它来调整浏览器大小，使其变小响应式溢出像这样工作得很好。

普通屏幕（工作）：

较小的屏幕（工作）：

我希望图表像上图一样，即使在屏幕上也能响应 small.The 问题是，如果我在较小的屏幕上刷新页面，尺寸图表会缩小，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'
    }
  };

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

how to not let google chart width size shrink if screen size small

javascript

php

charts

codeigniter