Question

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

我实际上还发现了一个awnser，如果图表中有一个条形插入一个空条，那么groupWidth可以工作，但这个解决方案有两个问题，它们是： - 酒吧不会居中 - 它将有一个未定义的标题。 enter image description here

我的问题是，如何在不使用groupWidth的情况下在google图表中设置条形的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));
  }
});

Answer 1

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

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

否则，bar.groupWidth将无效对于材料图表，它实际上在此处报告为非工作时段...
Tracking Issue for Material Chart Feature Parity

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: