当前位置：文江博客话题详情

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

发布于 2024-11-30 11:40:28 字数 174 浏览 1 评论 0原文

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

一切都运行良好，除了当我显示的其中一个图表的值太低（例如 1 或 2）时，它开始在 y 轴上显示小数。小数看起来很愚蠢，因为不可能有“一半”订单（这就是我正在计算的），如果可能的话，我想隐藏它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪 2024-12-07 11:40:28

使用该选项

vAxis: {format: '0'}

，如

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

use the option

vAxis: {format: '0'}

as in

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

回复收藏 0 原文

枯寂 2024-12-07 11:40:28

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

7.5

2.5

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

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

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

因此，在上面的情况下，我将其设置为“

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

没有小数的网格线

这将给出12

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

I don't have enough rep to reply to Ian Hunter's post directly, but what that does is format the label, but doesn't set the grid lines to the same value as the label, which can have undesirable results. So let's say you have these grid lines:

7.5

2.5

When you format the label to only show integers it shows this:
10
8
5
3
0

But then your data on the graph doesn't tie-in with the y-scale labels. E.g If you have a value of 3 it actually shows above the '3' labels because the '3' label is actually 2.5

Unfortunately, the only solution I could think of was to monitor the min/max ranges of the data shown in the graph, and then apply some logic to set the min/max according to how many y-scale labels I have, such that they would divide with no remainders.

So in the case above, I'd set it to

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

This would give grid lines of

No decimals, and no problems with the data not correlating with the labels on the graph.

回复收藏 0 原文

黯淡〆 2024-12-07 11:40:28

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

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

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

  gridlines: { count: -1}

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

Adding {format : 0} converts the float ticks to integers but the actual values on the bars appear incorrectly.

The main issue is Google Charts API assumes you want 5 gridlines mostly which may not work out to give you integer tick values.

Adding this gave me nice round tick values -

  gridlines: { count: -1}

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

回复收藏 0 原文

鹊巢 2024-12-07 11:40:28

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

vAxis: {  title: 'Orders Count',

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

if you want only the integer values to be shown, you should take to account that google charts wants to show you at least 5 gridlines. Presuming all of them should be integer give the graph following:

vAxis: {  title: 'Orders Count',

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

回复收藏 0 原文

公布 2024-12-07 11:40:28

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

回复收藏 0 原文

触ぅ动初心 2024-12-07 11:40:28

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

回复收藏 0 原文

我喜欢麦丽素 2024-12-07 11:40:28

在我的例子中，我的值范围为 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);
}

In my case I have values ranging from 0 to 600.

if $value is smaller than 12: use the max value for vAxis.gridlines.count
if $value is greater than 12: use the default nr of gridlines (4)

In this way you only display 'whole numbers'.

You'll need to dynamically generate the javascript off course.

Code Example:

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

回复收藏 0 原文

中二柚 2024-12-07 11:40:28

我使用以下代码：

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

I'm using the following code:

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

Just calculate your maximum value and then set gridlines.count to this value

回复收藏 0 原文