Google visualization 谷歌用整数绘制垂直轴图表

我正在尝试配置一个Google柱形图，以整数显示纵轴，但当它显示一个小数字（如1）时，它也会显示0.25、0.50等

有没有办法改变这个？我查阅了文档，没有找到任何相关的内容

---

谢谢

简单的回答：是的，但很复杂

如果您只想将数字显示为整数，那么很容易：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10, format: '0'}}
          );
}

如果转到，将注意到轴标签为0、2.5、5、7.5和10。通过将格式“0”添加到vAxis，它将只显示整数，因此我的标签将变为0、3、5、8、10。但显然这并不理想，因为8显示为5到10之间的一半，而事实并非如此，因为数字实际上是7.5，只是四舍五入而已

更改轴比例/标签的能力受到限制。要完成您的要求，需要使用一点特殊的javascript来创建适当的比例和网格线数量，以防止将内容分解为时髦的数字

基本上，您希望确保您的最大值和最小值以及网格线的数量允许轻松划分，这样您将只得到整数。要做到这一点，您需要创建一些时髦的新逻辑。以下是一些示例代码，可用于获取适当的最小/最大轴值：

// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Define the number of gridlines (default 5)
var gridlines = 5;

// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);

// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;

// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;

这里有几个问题（不幸的是）。首先，我使用网格线的数量来确定最小/最大值——您需要计算出需要使用漂亮整数的网格线数量。我认为最简单的方法如下（仅限伪代码）：

//获取所有图形中所有数据值的最大/最小值
var totalMax=3；
var totalMin=-1；
//算出最大的数字（正数或负数）
var biggestNumber=Math.max（Math.abs（totalMax）、Math.abs（totalMin））；
//四舍五入为10的指数，适用于最大的数字
var roundingExp=Math.floor（Math.log（biggestNumber）/Math.LN10）；
var roundingDec=数学功率（10，roundingExp）；
//将最大值和最小值四舍五入到最接近的指数10
var newMax=数学单元（totalMax/roundingDec）*roundingDec；
var newMin=数学楼层（总最小值/舍入dec）*舍入dec；
//确定您的值的范围
var范围=新最大值-新最小值；
//计算网格线数量的最佳因子（2-5条网格线）
//如果数字的范围除以2或5是一个整数，请使用它
对于（var i=2；i，只需扩展jmac的答案。
如果您知道图表的最大值，解决方案很简单，只要提供
maxvalue
即可确保图表始终使用相同的高度

如果您的内容非常动态，但他的解决方案似乎是唯一的解决方案。
在解决了同样的问题后，我找到了非常简单的解决方案。右键单击图表，选择“高级编辑”，然后：

1） 将图表的垂直线数量设置为“自动”（或手动等于数据列的数量）——随后google不必计算非整数断点。他为我做了这件事

2） 或者选择“将标签视为文本”，这将使它们保持不变。
我正在用Java编程，以基于动态数据生成html文件并重用该类。我对生成条形图html的数据和选项部分使用ArrayList（）

我的数据以番石榴多集的形式出现，它被初始化为树多集

Multiset<String> items = TreeMultiset.create();

options = new ArrayList<String>();

int max = occurrences.count(Iterables.get(occurrences,  0));

我要做的第一件事是在排序的多重集合中获得最高的出现次数

Multiset<String> items = TreeMultiset.create();

options = new ArrayList<String>();

int max = occurrences.count(Iterables.get(occurrences,  0));

然后我想在hAxis中添加一些记号。我有十几个数据集。当最大值小于100时，看起来很不错，但当值为数百或数千时，我需要根据值过滤“mod”函数

另一个烦恼是，我希望至少有一行超出最大值。我也需要调整一下

因此，将字符串添加到我的选项字符串数组中：

options.add("\n         hAxis : { title : 'Count', ticks: <<"+      
          IntStream.range(0, max+5)
                   .filter(x -> x % 4 == 0)
                   .boxed()
                   .collect(Collectors.toList())
         +">> }");      

options.add（“\n hAxis:{title:'Count'，ticks:>}”）；

IntStream生成值之间的所有数字。
max+5允许在最长条的右侧出现最后一条网格线，即大于间隔大小的网格线。
过滤器只显示可以调整为4的数字，我的间隔将在以后调整。
.boxed（）可防止打印时错误解释整数。
.collect只需将它们包装到字符串数组中

然后，我就可以使用options.toString（）来打印strong，除了打印时需要去掉选项列表中的数组括号，而不是刻度。e、 g.[和]。如果你往上看，那就是我为什么用“”的原因

String optionstr=strip括号（options.toString（））
.replaceAll（“，”]）；

我发布此解决方案的原因是，它可以让您更好地控制实际的轴标签。除了使间隔动态化（我将在下一步做）之外，这对于我的所有数据集都非常有效

这是打印出来的最终html。不是括号中的ticks参数

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
          [ 'Signals', 'Count', { role: 'style' }], 
          [ 'Agreements' , 6, 'blue' ], 
          [ 'ProductsMarkets' , 3, 'blue' ], 
          [ 'DebtEquity' , 1, 'blue' ], 
          [ 'Executive' , 1, 'blue' ], 
          [ 'Securities' , 1, 'blue' ]]);

    var options = {
         title : 'Signals', 
         vAxis : { title : 'Signals' }, 
         hAxis : { title : 'Count', ticks: [0, 4, 8] }, 
         bars: 'horizontal', 
         bar : { groupWidth : "95%" }, 
         legend : { position : "none" }
    };

    var chart = new google.visualization.BarChart(document.getElementById('signals'));
    chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="signals" style="width: 900px; height: 500px;"></div>
  </body>
</html>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
var data=google.visualization.arrayToDataTable([
['Signals'，'Count'，{role:'style'}]，
[“协议”，6，“蓝色”]，
[“产品市场”，3，“蓝色”]，
[“债务权益”，1，“蓝色”]，
[“高管”，1，“蓝色”]，
[“证券”，1，“蓝色”]]；
变量选项={
标题:"信号",，
变量：{title:'Signals'}，
哈克斯：{title:'Count'，ticks:[0,4,8]}，
酒吧：“水平”，
条：{groupWidth:“95%”，
图例：{位置：“无”}
};
var chart=new google.visualization.BarChart（document.getElementByI
  String optionstr = stripBrackets(options.toString())
                          .replaceAll("<<", "[")
                          .replaceAll(">>", "]");

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
          [ 'Signals', 'Count', { role: 'style' }], 
          [ 'Agreements' , 6, 'blue' ], 
          [ 'ProductsMarkets' , 3, 'blue' ], 
          [ 'DebtEquity' , 1, 'blue' ], 
          [ 'Executive' , 1, 'blue' ], 
          [ 'Securities' , 1, 'blue' ]]);

    var options = {
         title : 'Signals', 
         vAxis : { title : 'Signals' }, 
         hAxis : { title : 'Count', ticks: [0, 4, 8] }, 
         bars: 'horizontal', 
         bar : { groupWidth : "95%" }, 
         legend : { position : "none" }
    };

    var chart = new google.visualization.BarChart(document.getElementById('signals'));
    chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="signals" style="width: 900px; height: 500px;"></div>
  </body>
</html>