如何修改Google Chart（谷歌图表）柱形图的柱子宽度？

配置失效原因 #

你当前使用的是Google Charts的Material风格柱形图（加载bar包、实例化google.charts.Bar），这类Material组件尚未完全兼容经典版的所有配置项，你尝试的bar: { groupWidth: "20%" }属于经典版专属配置，在Material版中不会生效。

调整方案 #

推荐切换到支持全配置的经典版柱形图，同时可开启Material主题保持原有视觉风格，调整后完整代码如下：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // 替换加载corechart包
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          // 柱宽配置，数值越小柱子越细，可按需调整
          bar: { groupWidth: "20%" },
          // 开启Material主题，保持原有视觉效果
          theme: 'material'
        };

        // 替换为经典版柱形图实例
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        // 无需convertOptions转换，直接传入配置
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

你提供的原图参考：

内容的提问来源于stack exchange，提问作者Infinite Button