带数字格式(单位)的高图

highchart with numberformat (unit)

本文关键字：高图 单位 数字 格式      更新时间：2023-09-26

我使用Highcharts生成折线图。

我对numberFormat有问题:

var test = 15975000;
numberFormat(test, 0,',','.');
结果是:15.975.000

但是我想把1000变成1k, 100000变成100k, 1000000变成1m，就像这样。我该如何处理这个问题?

numberFormat在Highcharts对象中可用。

Highcharts.numberFormat(test, 0,',','.');
http://jsfiddle.net/DaBYc/1/

例子

yAxis: {
        labels: {
            formatter: function () {
                return Highcharts.numberFormat(this.value,0);
            }
        }
    },

编写您自己的格式化程序(参见此示例)。

formatter: function() {
  result = this.value;
  if (this.value > 1000000) { result = Math.floor(this.value / 1000000) + "M" }
  else if (this.value > 1000) { result = Math.floor(this.value / 1000) + "k" }
  return result;
}

参见:如何格式化类似于Stack Overflow信誉格式的数字

你只需要这样做:

                labels: {
                formatter: function() {
                     return abbrNum(this.value,2); // Need to call the function for each value shown by the chart
                }
            },

下面是用于转换要插入到javascript中的数据的函数:

    function abbrNum(number, decPlaces) {
    // 2 decimal places => 100, 3 => 1000, etc
    decPlaces = Math.pow(10,decPlaces);
    // Enumerate number abbreviations
    var abbrev = [ "k", "m", "b", "t" ];
    // Go through the array backwards, so we do the largest first
    for (var i=abbrev.length-1; i>=0; i--) {
        // Convert array index to "1000", "1000000", etc
        var size = Math.pow(10,(i+1)*3);
        // If the number is bigger or equal do the abbreviation
        if(size <= number) {
             // Here, we multiply by decPlaces, round, and then divide by decPlaces.
             // This gives us nice rounding to a particular decimal place.
             number = Math.round(number*decPlaces/size)/decPlaces;
             // Handle special case where we round up to the next abbreviation
             if((number == 1000) && (i < abbrev.length - 1)) {
                 number = 1;
                 i++;
             }
             // Add the letter for the abbreviation
             number += abbrev[i];
             // We are done... stop
             break;
        }
    }
    return number;
}

希望这行得通=)

如果你想要格式化Hilitock图表:

   tooltip: {
        pointFormatter: function() {
          var result = this.y;
        let header = '<table>';
        let body = '<tr><td style = "color: ' + this.series.color + ';padding:0">'
          + this.series.name + ': </td><td style = "padding:0"><b>';
        if (result > 1000000) {
          result = Math.floor(result / 1000000) + "M"
        }
        else if (result > 1000) {
          result = Math.floor(result / 1000) + "k"
        }
        return header + body + result + '</b></td></tr></table>';
        }
    },

我很难找到一种方法来添加百万和千，而不妨碍数据分组功能或日期。

相关文章：