Google 图表 API：直方图，如何融合条形图并将 x-ticks 更改为整数

Question

我正在使用 Google 图表 API 创建直方图，我想修改柱状图以与它们旁边的柱状图融合，并将 xticks 更改为整数。

问题：

我怎样才能做到以下几点：

将条形图与旁边的条形图融合在一起？
使 h/x-ticks 显示为 ints?

当前输出：

理想输出：

相关研究：

我找不到那么多，除了这两个帮助解决了我的一些问题，但对上面的两个没有帮助：

How does one go about creating an Histogram using the google chart api?
GOOGLE: Home > Products > Charts > Guides > Histogram

MWE:

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
     ['MyData', 'Value'],
     ['Val', 25.4],
     ['Val', 25.4], 
     ['Val', 25.4],
     ['Val', 25.4], 
     ['Val', 25.6],
     ['Val', 25.8],    
     ['Val', 25.8]
     ]);
  var options = {
   title: 'Stats',
   legend: {position: 'none'}, 
   width: 1100,
   height: 500,
   chartArea: {width: 900, height: 150},
   colors: ['#ff0000'],
   histogram: {bucketSize: 0.2, minValue: 22, maxValue: 28, hideBucketItems: true},
   // bar: { width: 5},
   // bar: {groupWidth: 0 },
   vAxis: {
      title: 'Frequency',
      titleTextStyle: {bold: false, italic: false},
      gridlines: {color: "white"},
      ticks: [1,2,3,4,5,6,7],
      }, //END V-AXIS
   hAxis: { 
      title: 'Values', 
      titleTextStyle: {bold: false, italic: false},
      type: 'category', 
      ticks: [22, 23, 24, 25, 26, 27, 28], // THIS IS NOT WORKING?!!!?
      }  //END H-AXIS
  }; //END OPTIONS

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

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

Answer 1

为了让 hAxis.ticks 工作，
删除选项 hAxis.category
（不确定这是做什么的，在参考文献中没有看到）

为了消除条之间的间隙，
不得不使用以下选项。

bar: {
  gap: 0
},

并使用 google 图表的冻结版本 '45.2'（或更低）...

google.charts.load('45.2', {...

请参阅以下工作片段...

google.charts.load('45.2', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['MyData', 'Value'],
    ['Val', 25.4],
    ['Val', 25.4], 
    ['Val', 25.4],
    ['Val', 25.4], 
    ['Val', 25.6],
    ['Val', 25.8],    
    ['Val', 25.8]
  ]);
  var options = {
    title: 'Stats',
    legend: {position: 'none'},
    width: 1100,
    height: 500,
    chartArea: {width: 900, height: 150},
    colors: ['#ff0000'],
    histogram: {bucketSize: 0.2, minValue: 22, maxValue: 28, hideBucketItems: true},
    bar: {
      gap: 0
    },
    vAxis: {
      title: 'Frequency',
      titleTextStyle: {bold: false, italic: false},
      gridlines: {color: "white"},
      ticks: [1,2,3,4,5,6,7],
    }, //END V-AXIS
    hAxis: {
      title: 'Values',
      titleTextStyle: {bold: false, italic: false},
      //type: 'category',
      ticks: [22, 23, 24, 25, 26, 27, 28]
    }  //END H-AXIS
  }; //END OPTIONS

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

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

Google 图表 API：直方图，如何融合条形图并将 x-ticks 更改为整数

Google Charts API: Histogram, how to fuse bars and change x-ticks to integers

charts

google-visualization

histogram