如何在Google柱状图中去除小数点

Question

如何在垂直轴上仅显示整数？

我有这个：http://jsbin.com/oxodab/1

但我只想在垂直轴上显示1和2。

- PJ Bergeron

Answer 1

对于柱状图，没有vAxis.showTextEvery属性！

您可以使用vAxis.format: '#'属性截断小数位数（在此处检查）。但是您只会得到离散的值。

- BrOSs

---

谢谢，但抱歉那不是我想要的。我想删除不是整数的数字。 - PJ Bergeron

很遗憾，仅使用 google charts API 是不可能的。也许你可以尝试硬编码来解决问题。尝试将图表更改为允许 vAxis.showTextEvery 属性的图表。 - BrOSs

我通过在选项中添加“vAxis：{maxValue：x}”（x> 5）来实现了我想要的结果。但这并不完美。 - PJ Bergeron

我把我的评论添加为答案。 - PJ Bergeron

Answer 2

听起来很疯狂，但对我的情况非常有效。欢迎分享您的用例，看看这个小魔术无法解决哪些问题。

消除错误的步骤：

• 将vAxis上的网格线数量限制为4（对于我们大多数人来说已经足够了）。
• 从您的图表数据中找到最大值maxValue。
• 然后将最大值maxValue除以4，以查看结果是否为小数。例如：20/ 4 = 0.5

• 通过这种方式，我们可以有条件地将maxValue添加到vAxis中，如下所示：

  const maxValue = 20; // 假设最大值为20。
  
  ...
  vAxis: Object.assign({}, { ... }, noDecimals(maxValue)),
  ...
  
  /**
   * 检查除以4后的值是否有小数。
   * 如果是小数，则将'maxValue'增加1。
   */
  function noDecimals(maxValue) {
    return /\d+\.\d+/i.test(maxValue / 4)
      ? { maxValue: maxValue + 1 }
      : {};
  }
  

最初，当您尝试从图表数据中分配找到的最大值时，它并没有按预期工作。通过将最大值增加1，可以使Google图表适应得更好。

希望这对那些遇到此问题的人有所帮助！

- motss

Answer 3

我通过在选项中添加这行代码成功实现了我的目标：

vAxis: {maxValue: x} (x > 5)

不是完美的...但它能用。

- PJ Bergeron