javascript - 只有1个结果时如何限制Google条形图的宽度？

具有多个数据条目，该图表看起来很棒。

例：


现在，如果我只有一个输入，则如下所示：



我看过其他文章，但没有任何帮助，我已经阅读了this article，它似乎对该用户有用，但是我似乎无法在我的代码中实现它。

限制单个输入条的宽度的任何帮助将不胜感激。

我的代码是：

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

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['', 'Views'],
      <?php
      $query = "SELECT post_title, post_views_count FROM posts WHERE post_user = '{$username}' AND post_status = 'published' ORDER BY post_views_count DESC LIMIT 8";
      $select_views = mysqli_query($connection, $query);

      while ($row = mysqli_fetch_assoc($select_views)) {
        $post_title = escape($row['post_title']);
        $post_views_count = escape($row['post_views_count']);

        echo "['$post_title'" . "," . "$post_views_count],";
      }
      ?>
  ]);

  var options = {
    legend: { position: 'none' },
    colors: '#006135',
    axes: {
      x: {
        0: { side: 'bottom', label: ''} // Top x-axis.
        }
      }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, options);
  };
  </script>
  <div id="top_x_div" style="width: 'auto'; height: 500px;"></div>

最佳答案

除了手动修改图表的svg之外，
您无法设置任何样式设置，
如您在其他答案中所见

一种选择是修改数据
如果只有一行，
在真实行之前和之后添加空白行

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['', 'Views'],
    ['One Story For Last User', 5]
  ]);

  // add blank rows
  if (data.getNumberOfRows() === 1) {
    data.insertRows(0, [[' ', null]]);
    data.addRow([' ', null]);
  }

  var options = {
    legend: {
      position: 'none'
    },
    colors: '#006135'
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>