动态谷歌图表上的单条宽度答案

【问题标题】：Single bar width on a dynamic google chart动态谷歌图表上的单条宽度
【发布时间】：2018-04-20 08:45:03
【问题描述】：

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

我实际上还找到了一个遮阳篷，用于判断图表中是否有一个用于插入空条的条，因此groupWidth 可以工作，但是此解决方案存在两个问题，它们是： - 栏不会居中 - 它会有一个未定义的标题。 enter image description here

我的问题是，如何在不使用 groupWidth 的情况下在谷歌图表中设置条形的 maxWidth。

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

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

【问题讨论】：

标签： javascript jquery html charts google-visualization

【解决方案1】：

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

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

否则，bar.groupWidth 将不起作用
对于 material 图表，这里实际上报告为非工作期...
Tracking Issue for Material Chart Feature Parity

请参阅以下工作 sn-p...

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>

【讨论】：