首页 文章

highcharts工具提示格式数百万

提问于
浏览
3

我想在highcharts折线图上显示几个大数字点 .

例如100,000,000,000,000,000,000,000,000

当我显示这些时,y轴会自动将数字格式化为100 k,10 M,1,000 M等,但工具提示仍会显示实际的大数字 .

是否可以在工具提示本身中显示1,000,000,000作为1 B或1000 M.

示例 - http://jsfiddle.net/ynCKW/1/

我正在尝试使用numberFormat函数,但我不认为它是正确的函数 .

Highcharts.numberFormat(this.y,0)

我是否必须编写一个自定义函数来在工具提示中进行此格式化?

2 回答

  • 3

    您可以使用与Highcharts核心中实现的逻辑相同的逻辑:

    tooltip: {
            formatter: function () {
                var ret = '',
                    multi,
                    axis = this.series.yAxis,
                    numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
                    i = numericSymbols.length;
                while (i-- && ret === '') {
                    multi = Math.pow(1000, i + 1);
                    if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
                        ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
                    }
                }
                return ret;
            }
        },
    

    并且jsFiddle:http://jsfiddle.net/ynCKW/2/

    EDIT for Highcharts v6:

    我们可以调用内置方法,它应该更容易维护:http://jsfiddle.net/BlackLabel/ynCKW/104/

    tooltip: {
            valueSuffix: '',
            formatter: function () {
                var axis = this.series.yAxis;
    
                return axis.defaultLabelFormatter.call({
                    axis: axis,
                    value: this.y
                });
            }
        },
    
  • 1

    撇开@Pawel Fus,略微调整允许你也有 negative 货币值,但在 $ 之外的负数(即 -$100K-$-100k ) .

    function () {
        var isNegative = this.value < 0 ? '-' : '';
        var absValue = Math.abs(this.value);
        return isNegative + '$' + this.axis.defaultLabelFormatter.call({
            axis: this.axis,
            value: absValue
        });
    }
    

    这是一个jsFiddle:http://jsfiddle.net/4yuo9mww/1/

相关问题