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

【问题标题】：How to show only integers (no decimals) in chart API x/y-axis labels如何在图表 API x/y 轴标签中仅显示整数（无小数）
【发布时间】：2019-09-25 00:25:50
【问题描述】：

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

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

【问题讨论】：

我不熟悉 Google 图表 API，但您可以在显示数字之前将 parseInt(val) 应用于数字吗？
我不确定我明白你的意思，我已经在页面呈现时将它们作为整数提供。只有当表示的数字非常小时，小数才会出现，比如 1 或 2。
听起来像是某种浮点错误。如果是这样，parseInt(val) 是消除它们的正确方法。这是我能给出的最好建议，无需具体实例。
你有没有想过这个问题？我也遇到了同样的问题。
无论如何，您应该能够提供小数作为“订单数” - 在“平均订单数”的情况下 - 但显示为整数

标签： javascript google-visualization

【解决方案1】：

使用选项

vAxis: {format: '0'}

如

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

【讨论】：

它适用于文本，但线条不用于绘制线条。线条在 2,5 处绘制，标签为 2
它不能正常工作，我现在有 2 行带有标签 (1)。
我发现这在您处理低值时不起作用。最大值为2，buy轴显示0,1,1,2,2

【解决方案2】：

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

10

7.5

5

2.5

0

当您将标签格式化为仅显示整数时，它会显示： 10 8 5 3 0

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

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

所以在上述情况下，我将其设置为

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

这将给出

的网格线

12

8

6

4

0

没有小数，数据与图表上的标签不相关也没有问题。

【讨论】：

【解决方案3】：

添加 {format : 0} 会将浮点刻度转换为整数，但柱上的实际值显示不正确。

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

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

  gridlines: { count: -1}

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

【讨论】：

这是最相关的答案
不，这个会在我的垂直轴上产生负值，我不想要它。

【解决方案4】：

如果你只想显示整数值，你应该考虑到谷歌图表想要显示至少 5 条网格线。假设它们都应该是整数，给出以下图表：

vAxis: {  title: 'Orders Count',

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

【讨论】：

【解决方案5】：

最简单的方法是编辑左侧垂直轴，将 Min 设为 0，Max 设为 5 的倍数（5、10、15 等），以适合您的预期最大值。

【讨论】：

【解决方案6】：

如果您使用vAxis: {gridlines: { count: 4}}，此问题将得到解决

【讨论】：

【解决方案7】：

在我的例子中，我的值范围是 0 到 600。

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

这样你只显示“整数”。

您需要在课程之外动态生成 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);
}

【讨论】：

【解决方案8】：

我正在使用以下代码：

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 设置为该值

【讨论】：

【解决方案9】：

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

Multiset items = TreeMultiset.create();

使用 .add 和 .addAll 添加的项目

确保项目已排序：

发生次数 = Multisets.copyHighestCountFirst(items);

String option = "hAxis : { title : 'Count', gridlines : { count:" + ((最大值 >=12) ? 4 : 最大值+1) + } }")

【讨论】：

【解决方案10】：

我更喜欢gridlines: { count: -1 } 选项，但您始终可以使用ticks 明确指定所需的值。很酷的一点是，它们甚至不必均匀分布——如果你愿意，你可以做 [1, 10, 100, 200, 500, 1000]：

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

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

【讨论】：

这似乎不适用于histograms

【解决方案11】：

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

【讨论】：