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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有数字格式(单位)的高位图表相关的知识,希望对你有一定的参考价值。

我正在使用Highcharts生成折线图。

而且我在numberFormat上遇到问题:

var test = 15975000;
numberFormat(test, 0,',','.');

结果是:15.975.000

但是我想将1000转换为1k100000转换为100k1000000转换为1m。我该如何解决这个问题?

答案

numberFormat在Highcharts对象中可用。

Highcharts.numberFormat(test, 0,',','.');

示例http://jsfiddle.net/DaBYc/1/

yAxis: 
        labels: 
            formatter: function () 
                return Highcharts.numberFormat(this.value,0);
            
        
    ,
另一答案

编写您自己的formatter(请参阅此example)。

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;

另请参见:How to format numbers similar to Stack Overflow reputation format

另一答案

您只需要这样做:

                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;

希望这项工作有效=)

另一答案

如果要格式化Highstock图表:

   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>';
        
    ,

我在不影响数据分组功能或日期的情况下找到一种添加数百万的方法很麻烦。

以上是关于带有数字格式(单位)的高位图表的主要内容,如果未能解决你的问题,请参考以下文章

Excel图表不保持格式

如何在 s-s-rS 报告中设置动态轴单位?

SQL Server:出于数学目的,如何仅选择带有度量单位的数字[重复]

Excel数字格式:数字以万或十万为单位

中文汉字转阿拉伯数字

Google chart api折线图:单位不匹配点