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

当我尝试使用Google图表可视化javascript API创建柱形图时，该栏最终比我预期的要胖得多。

这是两个图表的比较，演示了该问题。首先，在带有两个数据点的图表中，结果条看起来正常，然后是带有单个数据点的图表，其中结果条看起来很奇怪。

这两个摘要之间的唯一区别是：

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

与

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

两根酒吧（看上去很普通）

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

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

单杆（看起来很奇怪）

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

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

最佳答案

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

从configuration options ...


  一组条的宽度，以以下两种格式之一指定：
  
  
  像素（例如50）。
  每个组可用宽度的百分比（例如“ 20％”），其中“ 100％”表示组之间没有空格。
  
  
  类型：数字或字符串
  默认值：黄金分割率，约为'61 .8％'。


即-> bar: { groupWidth: 100 }, //100px

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

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

关于javascript - 如何使用Google Charts API柱形图绘制单个数据点？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36267224/