如果只有1个结果，如何限制谷歌条形图的宽度？

Question

通过多个数据条目，图表看起来很棒。

实施例：

现在如果我只有一个输入，它看起来像这样：

我查看了其他文章，没有任何帮助，我已阅读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>

Answer 1

除了手动修改图表的svg外， 您可以设置任何样式设置，
正如你在其他答案中看到的那样

一个选项是修改数据
如果只有一行，
在实际行之前和之后添加一个空行

请参阅以下工作代码段...

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;