Highcharts：用逗号格式化所有数字？

Posted 2023-02-16

【中文标题】Highcharts：用逗号格式化所有数字？

【英文标题】：Highcharts: Format all numbers with comma?

【发布时间】：2015-05-26 09:33:32

【问题描述】：

我正在使用 Highcharts，我想将图表中任何位置显示的所有数字（工具提示、轴标签...）格式化为以逗号分隔的千位。

否则，默认的工具提示和标签很棒，我想保持它们完全相同。

例如，在此图表中，数字应为2,581,326.31，但其他方面完全相同。

我该怎么做？

我尝试添加：

    tooltip: 
        pointFormat: "point.y:,.0f"
    

但这摆脱了工具提示中漂亮的圆圈和系列标签 - 我想保留它。理想情况下，我更喜欢在整个图表中使用单个选项来设置全局数字格式。

【问题讨论】：

我会尝试使用自定义语言，请参阅 ***.com/questions/7419358/…

【参考方案1】：

这可以使用thousandSep (API) 全局选项进行设置。

Highcharts.setOptions(
    lang: 
        thousandsSep: ','
    
);

见this JSFiddle example。

【讨论】：

有些人可能会发现decimalPoint 选项相关且有用。 See API.

默认的千位分隔符现在看起来是一个空格。他们的 API 有什么变化吗？甚至他们的示例也在工具提示中将其显示为空格而不是逗号。 jsfiddle.net/highcharts/rmTWS

空间是 Highcharts 4.1.0 的默认设置。在此之前是逗号。 “使用空格作为默认的千位分隔符。它独立于文化和 ISO 标准。” github.com/highcharts/highcharts/commit/…

谢谢！现在如何用逗号设置 y 轴？

奇数..这在您的 jsFiddle 中有效，但在我的代码中无效...我仍然有空格。

【参考方案2】：

这种方式对我有用。

我在 yAxis 选项中进行了配置。

yAxis: 
  labels: 
    formatter: function() 
        return Highcharts.numberFormat(this.value, 2);
    
  

【讨论】：

谢谢，我一直在通过所有答案寻找这个，因为我有兴趣在 yAxis 上显示

在互联网上搜索了大约 4 个小时后，我得到了这个对我有用的答案。谢谢@Hien

【参考方案3】：

如果您想显示不带逗号和空格的数字。

例如。默认情况下，9800 显示为 9 800。

如果您希望 9800 显示为 9800

你可以在工具提示中试试这个：

    tooltip: 
     pointFormat: '<span>point.y:.f</span>'
   

【讨论】：

需要针对共享工具提示进行调整。

【参考方案4】：

这种方式对我有用。

我使用 Angular 10，我为 Tooltip 和 yAxis 做了这个。

对于 yAxis 使用 numberFormat:

 labels: 
              format: 'value',
              style: 
                color: Highcharts.getOptions().colors[0]
              ,
              formatter: function() 
                return Highcharts.numberFormat(this.value, 3);
            
            ,

对于工具提示：

point.y:.f