如何使用Google Chart API柱形图绘制单个数据点？

Question

当我尝试使用Google图表可视化JavaScript API创建柱形图时，该栏的结果比我预期的要大很多。

以下是对两个图表的比较，以说明问题所在。首先，一个包含两个数据点的图表，其中生成的条形看起来正常，然后是一个带有单个数据点的图表，其结果条看起来很奇怪。

两个片段之间的唯一区别是：

// two bars
data.addRows([
    [1, 1],
    [2, 1],
]);

VS

// one bar
data.addRows([
    [1, 1]
]);

两个条（看起来正常）

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  // two bars
  data.addRows([
    [1, 1],
    [2, 1],
  ]);

  var options = {
    title: 'Tidy lil bars',
    hAxis: {
      minValue: 0,
      maxValue: 4
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

单杆（看起来很奇怪）

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  // one bar
  data.addRows([
    [1, 1],
  ]);

  var options = {
    title: 'Big ol bar',
    hAxis: {
      minValue: 0,
      maxValue: 4
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用bar.groupWidth来控制列的宽度

来自configuration options ...

  

以下任一格式指定的一组条形图的宽度：

     

  
• 像素（例如50）。
  
• 每组的可用宽度百分比（例如＆＃39; 20％＆＃39;），其中＆＃39; 100％＆＃39;表示组之间没有空格。
  

     

输入：数字或字符串
  默认：黄金比例，约为61.8％＆＃39;

即。 - ＆GT; bar: { groupWidth: 100 }, //100px

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawAxisTickColors,
  packages: ['corechart', 'bar']
});

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  data.addRows([
    [1, 1],
    //[2, 1],
  ]);

  var options = {
    bar: { groupWidth: 100 },  //100px
    title: 'Tidy lil bars',
    hAxis: {
      minValue: 0,
      maxValue: 4
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;