Question

我正在尝试配置Google柱形图以整数显示垂直轴，但是当它显示一个小数字（例如1）时，它也显示0.25,0.50等。

有没有改变这个？我浏览过文档，找不到任何相关内容。

由于

Answer 1

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

如果您只想将数字显示作为整数，那么这很简单：

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

如果你转到google playground，你会注意到轴标签是0,2.5,5,7.5,10。通过添加格式：＆＃39; 0＆＃39;对于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;

这里有几个问题（不幸的是）。首先是我使用网格线的数量来确定最小/最大值 - 你想要弄清楚你应该使用多少网格线来使用漂亮的整数。我认为，最简单的方法是如下（仅限伪代码）：

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

// 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;

// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
    if (Math.round(range/i) = range/i) {
        var gridlines = i
    }
}

然后将gridlines选项（vAxis.gridlines）设置为上面的变量，将max设置为newMax，将min设置为newMin。这应该给你整数轴标签。

注意：如果您的数字非常小，则上述功能可能无效。该功能也未经过测试，因此请根据您自己的时间查看一些示例，并告诉我它是否无法正常工作。

Answer 2

只是添加到jmac的答案。如果您知道图表的最大值，则通过设置maxvalue可以更容易地解决问题，您可以确保网格线始终显示相同的数字。

如果您的内容非常动态，那么他的解决方案似乎是唯一的。

Answer 3

在遇到同样的问题之后，我找到了非常简单的解决方案。右键单击您的图表，选择＆＃34;高级编辑＆＃34;和

1）将图表的垂直线数量设置为＆＃34; auto＆＃34; （或手动等于数据列的数量） - 随后google doesen不得不计算非整数断点。为我做了诀窍。

2）或者选择＆＃34;将标签视为文本＆＃34;，这将使它们保持不变。

Answer 4

我使用Java编程，根据动态数据生成html文件并重用该类。我对BarChart html生成的数据和选项部分使用ArrayList（）。

我的数据来自Guava Multiset，它被初始化为TreeMultiset。

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

options = new ArrayList<String>();

我需要确保我的商品有序，所以我复制了商品清单。

Multiset<String> occurrences = Multisets.copyHighestCountFirst(items);

对于我需要动态的每个选项，我都会添加一个字符串。例如，key是我的图表的标题。

options.add("\n      title : '"+key+"'");

我做的第一件事就是在排序的Multiset中获得最多的出现次数。

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

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

另一个烦恼是我想要至少超过最大值的一条线。我也需要调整它。

所以将字符串添加到我的选项String array：

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

IntStream生成值之间的所有数字。 max + 5允许最长条右侧的最后一个网格线，也就是大于间隔大小的网格线。过滤器仅显示可由4进行模拟的数字，我将在稍后调整的时间间隔。 .boxed（）可防止对打印错误地解释整数。 .collect只是将它们包装成一个String数组。

然后我可以使用options.toString（）打印强，除了我的打印，我需要去除我的选项列表的数组括号，但不是刻度线。例如[和]。如果你看上面，那就是我用“＆lt;＆lt;”的原因和“＆gt;＆gt;”。

  String optionstr = stripBrackets(options.toString())
                          .replaceAll("<<", "[")
                          .replaceAll(">>", "]");

我发布此解决方案的原因是它可以让您很好地控制实际的轴标签。除了使区间动态化，我接下来会做，这对我的所有数据集都很有效。

这是打印出来的最终html。不是括号内的蜱虫。

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

谷歌图表整数的垂直轴

4 个答案: