谷歌条形图最大条形宽度答案

【问题标题】：Google Bar Chart max bar width谷歌条形图最大条形宽度
【发布时间】：2016-05-06 23:38:37
【问题描述】：

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

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

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

【问题讨论】：

你的代码在哪里？
我试过了，但是没有用。我认为当你有不同的酒吧组时它会产生影响，但就我而言，我只有一个组。
抱歉，我正在寻找材料图表 (google.charts.Bar)的解决方案

标签： javascript google-visualization

【解决方案1】：

解决方法是在初始列数不足时添加空白列。

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

【讨论】：

【解决方案2】：

bar.groupWidth 选项不起作用在材料图表上

即使是google.charts.Bar.convertOptions

试用版 '41' 至 '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>

【讨论】：

是的，我该怎么办？

【解决方案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]);
    }
}

【讨论】：