Question

我在固定宽度的div中有一个Google条形图。在某些情况下，我有很多酒吧，但有时我只得到1或2个酒吧。问题是，在这种情况下，我有一个这样的图表：

我想设置一个最大条宽，这样当我只有一个条时，它不会占用整个容器的宽度。你知道如何实现这个目标吗？

[edit]我正在寻找材料图表（google.charts.Bar）的解决方案

Answer 1

解决方案是在最初没有足够列时添加空白列。

for (var i = 0; i < n; i++) {
    if (i % 2 == 0)
        rows.push([" ", null])
    else
        rows.unshift([" ", null])
}
dataTable.addRows(rows);

Answer 2

在材料图表

上

bar.groupWidth选项不起作用

即使使用google.charts.Bar.convertOptions

尝试了'41'到[{1}}

的版本'current'

示例......

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Motivation Level');
    data.addRows([
      ['10h', 5]
    ]);

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions({
      bar: {
        groupWidth: 20
      }
    }));
  },
  packages: ['bar']
});

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

修改

只有其他选项是在图表的'ready'事件触发时直接修改SVG 但不建议这样做

参见以下示例......

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Motivation Level');
    data.addRows([
      ['10h', 5]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);

    // modify SVG on 'ready'
    google.visualization.events.addListener(chart, 'ready', function () {
      var bars = container.getElementsByTagName('path');
      Array.prototype.forEach.call(bars, function(bar) {
        // reduce width by 50%
        bar.setAttribute('transform', 'scale(0.5,1)');
      });
    });

    chart.draw(data, {});
  },
  packages: ['bar']
});

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

Answer 3

我使用了以下内容（受@Amaud启发）

为防止条形图的行很粗，我使用以下代码添加空白行

  if (tData.getNumberOfRows()==1) {
        addRow(tData,' ',1);
        addRow(tData,' ',1);
    }

完整代码如下：

请注意，函数addRow仅在有值时才向图表添加一行，因此有时只能有一排，最后很厚。

var tData = new google.visualization.DataTable();
tData.addColumn('string','Type');
tData.addColumn('number','Amount (Millions)");
addRow(tData,'Row1', a1);
addRow(tData,'Row2', a2);   
addRow(tData,'Row3', a3);    
addRow(tData,'Row4', a4);
if (tData.getNumberOfRows()==1) {
    addRow(tData,' ',1);
    addRow(tData,' ',1);
  }

 var options = {
        ...
      };

var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(tData, options);


function addRow(tData,text,num) {
   if (num>0) {
       tData.addRow([text,num/1000000]);
    }
}

Google条形图最大条宽

3 个答案: