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

问题描述

我正在使用 Google Chart API 创建直方图，并希望修改条形图以与旁边的条形图融合并将 xticks 更改为整数。

问题：

我该如何执行以下操作：

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

电流输出：

理想输出：

相关研究：

除了这两个有助于解决我的一些问题但不是上述两个之外，我找不到那么多：

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>

标签： chartsgoogle-visualizationhistogram

解决方案

为了开始hAxis.ticks工作，
请删除该选项hAxis.category
（不确定这是做什么的，在参考资料中没有看到）

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

bar: {
  gap: 0
},

并使用谷歌图表的冻结版本'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>

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

问题描述

解决方案

推荐阅读