动态谷歌图表上的单个条形宽度

Question

我在创建带有谷歌图表的条形图时遇到了问题。 也就是说，如果您正在创建一个动态图表并且行数很少，则单个条形将太粗。 我知道已经问过这个问题，最常见的遮阳篷问题是，如果图表中只有一个条形，它不起作用，那个遮阳篷是： 输入bar: {groupWidth: <value>}

我实际上还找到了一个遮阳篷，如果图表中有一个柱，那就是插入一个空柱，所以groupWidth有效，但是这个解决方案有两个问题，它们是： -栏不会居中 -它将有一个未定义的标题。在此处输入图像描述

我的问题是，如何在不使用组宽度的情况下在谷歌图表中设置条形的最大宽度。

这也是我的谷歌图表的代码

$(document).ready(function() {
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(chartCreate);
  function chartCreate() {
    data = new google.visualization.DataTable();
    data.addColumn('string');
    data.addColumn('number', 'Movimentos');
      data.addRows([[ "ola", 4 ]]);
    var options = {
      height: 405,
      width: 400,
      legend: {
        position: 'none'
      },
      titleTextStyle: {
        fontSize: '24',
        bold: 'true',
        color: '#242354'
      },
      bar: {groupWidth: "80%"},
      colors: ['#242354']
    };
    var chart = new google.charts.Bar(document.getElementById('graph'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
});

Answer 1

您可以使用两个额外的条形来居中，
为第一列使用空格以避免undefined

[' ', null],
['ola', 4],
[' ', null]

否则，bar.groupWidth将不起作用
实际上，对于材料图表，它在这里报告为非工作期......
材料图表特征奇偶校验的跟踪问题

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

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string');
  data.addColumn('number', 'Movimentos');
  data.addRows([
    [' ', null],
    ['ola', 4],
    [' ', null]
  ]);
  var options = {
    height: 405,
    width: 400,
    legend: {
      position: 'none'
    },
    titleTextStyle: {
      fontSize: '24',
      bold: 'true',
      color: '#242354'
    },
    bar: {groupWidth: "80%"},
    colors: ['#242354']
  };
  var chart = new google.charts.Bar(document.getElementById('graph'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

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