Question

我正在使用Google Chart JS Api的柱形图。我正在显示一些只能表示为整数的值（按天计的总订单数）。

一切都很好，除了当我正在显示的某个图表的值太低（如1或2）时，它开始在y轴上显示小数。小数看起来很傻b / c它不可能有一半的订单（这是我正在计算的），如果可能的话我想隐藏它。

Answer 1

我没有足够的代表直接回复Ian Hunter的帖子，但是它的作用是格式化标签，但不会将网格线设置为与标签相同的值，这可能会产生不良结果。所以假设你有这些网格线：

10

7.5

5

2.5

0

当您将标签格式化为仅显示整数时，它会显示以下内容： 10 8 五 3 0

但是，图表上的数据不会与y标度标签相关联。例如，如果您的值为3，则实际上显示 <3>标签，因为'3'标签实际上是2.5

不幸的是，我能想到的唯一解决方案是监控图中显示的数据的最小/最大范围，然后应用一些逻辑来根据我有多少y标度标签来设置最小值/最大值，这样他们就会分裂而没有剩余。

所以在上面的例子中，我将其设置为

        vAxis: { 
          viewWindow:{
            max:12,
            min:0
          }
        }

这将给出

的网格线

12

8

6

4

0

没有小数，也没有与图表上的标签无关的数据出现问题。

Answer 2

使用选项

vAxis: {format: '0'}

，如

chart.draw(data, {
                   width: 800,
                   height: 480,
                   orientation: 'horizontal',
                   vAxis: {format: '0'}
                  }
           );

Answer 3

添加{format：0}会将浮点数转换为整数，但条形图上的实际值显示不正确。

主要问题是Google Charts API假设您需要5个网格线，这些网格线可能无法为您提供整数刻度值。

添加这个给了我很好的圆形刻度值 -

  gridlines: { count: -1}

来源 - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU

Answer 4

如果您只想显示整数值，则应考虑到Google图表希望向您显示至少5个网格线。假设所有这些都应该是整数，请给出以下图表：

vAxis: {  title: 'Orders Count',

                minValue: 4,                    
                viewWindow:{min:0}, /*this also makes 0 = min value*/         
                format: '0',                     
            },

Answer 5

注意：请参阅https://stackoverflow.com/a/16036721/390977，因为我的回答不正确。（我无法删除它，因为它已被接受。）

在您的选项中，您可以为chxs值指定数字格式：

chxs: '0N*f0*',

这使用带有0位小数（f）的浮点值（f0）。

Ref: Google Bar Chart Axis Label Styles chxs

Answer 6

最简单的方法是编辑左垂直轴，Min为0，Max为5的倍数（5,10,15等），视你的预期最大值而定。

Answer 7

如果您使用vAxis: {gridlines: { count: 4}}

，此问题将得到解决。

Answer 8

在我的情况下，我的值介于0到600之间。

如果$ value小于12：使用vAxis.gridlines.count的最大值
如果$ value大于12：使用默认的网格线（4）

通过这种方式，您只能显示＆＃39;整数＆＃39;。

您需要动态生成javascript课程。

代码示例：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Fase', 'Closed', 'Open'],
        <?php
        $max = 0; // needed to determine the number of gridlines?
        $data = array();
        foreach($projectExecutions as $key => $pe){
            $totals = countOpenIssuesInProjectExecution($pe);
            $open = $totals['open'];
            $closed = $totals['closed'];
            $data[] = "['". $FASE[$pe['fase_id']] . "', " . $closed . ", ". $open . "]\r\n";
            // What are the Max values vor Open & Closed Defects
            if($open > $max ){ $max = $open; }
            if($closed > $max ){ $max = $closed; }
        }
        $nrOfGridLines = ($max >= 12 ? 4 : $max+1); // Calculate the number of gridlines
        echo implode(",",$data);
        ?>
    ]);
    var options = {
        legend: { position: 'bottom' }
        ,title: "Evolution Defects: Open -VS- Closed"
        ,colors:['#00a160','red']
        ,isStacked: true
        ,vAxis: {textPosition: 'in', minValue:0,viewWindow: { min: 0 }, gridlines: {count: <?php echo $nrOfGridLines; ?>} }

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

Answer 9

我使用以下代码：

google.charts.setOnLoadCallback(function(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Y');
    data.addColumn('number', 'X');

    var max = 0; //Or something like Int.MinValue
    for (var i = 0;i< arr.length;i++) {
      max = (arr[i]>max)? arr[i]:max; //calculate max value
      data.addRow("<<some calculation>>");
    }

    var options = {
      height: 300,
      vAxis: {
        gridlines: { count: max+1}, //+1 is importent for the origingridline
        viewWindow:{
          min: 0,
          max: max
        },
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("<< div_id >>"));

    chart.draw(data, options);
  }

只需计算最大值，然后将gridlines.count设置为此值

Answer 10

我正在使用Guava Multiset作为我的数据。 Cagy79的诀窍是我能够工作的唯一一个。我也尝试使用IntStream生成自己的行，但是仍然有一些图的小数。如上所述，仅设置格式将创建一个图表，其中悬停在值和网格线上不同。

Multiset items = TreeMultiset.create（）;

使用.add和.addAll

添加的项目

确保物品已分拣：

occurrences = Multisets.copyHighestCountFirst（items）;

String option =“hAxis：{title：'Count'，gridlines：{count：”+ （（max> = 12）？4：max + 1） +}}“）

Answer 11

我更喜欢gridlines: { count: -1 }选项，但是您始终可以使用ticks显式指定所需的值。有趣的是，它们甚至不必均匀分布-如果需要，可以执行[1、10、100、200、500、1000]：

options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }

根据您的数据，您可能需要对此进行硬编码或使用阈值。

Answer 12

对于也在搜索答案的任何人，您都可以在此处使用选项格式查看此问题的答案。 Can't get Google Charts Axis to format in decimal

如何在图表API x / y轴标签中仅显示整数（无小数）

12 个答案: