Google Charts API：直方图，如何融合钢筋并将x-ticks更改为整数 [英] Google Charts API: Histogram, how to fuse bars and change x-ticks to integers

问题描述

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

I am using Google Chart API to create a histogram and want to modify bars to fuse with the ones next to them and change the xticks to integers.

问题：

如何执行以下操作：

• 将条形图与旁边的条形图融合吗？


• 使h / x刻度显示为 int s吗？

• Fuse the bars with the one next to them?
• Make the h/x-ticks appear as ints?

当前输出：

理想的输出：

相关研究：

I除了这两个有助于解决我的一些问题之外，找不到太多的东西了但不是以上两个：

I couldn't find all that much, apart from these two which helped with some of my problems but not the two above:

• 如何使用Google Chart API创建直方图？


• GOOGLE：主页>产品>图表>指南>直方图

• 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>

推荐答案

以获得 hAxis .ticks 起作用，

删除选项 hAxis.category

（不确定确实，在参考中没有看到它）

in order to get hAxis.ticks to work,
remove the option hAxis.category
(not sure what this does, didn't see it in the reference)

为了消除条形之间的间隙，

必须使用以下选项。

in order to remove the gap between the bars,
had to use the following option.

bar: {
  gap: 0
},

并使用Google图表的冻结版本 '45 .2'（或更低版本）...

AND use frozen version '45.2' (or lower) of google charts...

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

请参阅以下工作摘要...

see following working snippet...

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 Charts API：直方图，如何融合钢筋并将x-ticks更改为整数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！