【问题标题】:highchart with numberformat (unit)数字格式的高图(单位)
【发布时间】:2013-04-15 15:58:39
【问题描述】:

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

我遇到了numberFormat 的问题:

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

结果是:15.975.000

但我想像这样将1000 转换为1k,100000 转换为100k,1000000 转换为1m。 我该如何处理这个问题?

【问题讨论】:

    标签: javascript highcharts


    【解决方案1】:

    numberFormat 在 Highcharts 对象中可用。

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

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

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

    【讨论】:

    • "但是我想像这样把1000转1k,100000转100k,1000000转1m,怎么解决这个问题?"我看不出这能解决这个问题吗?
    【解决方案2】:

    写你自己的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

    【讨论】:

      【解决方案3】:

      你只需要这样做:

                      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;
      }
      

      希望这可行 =)

      【讨论】:

        【解决方案4】:

        如果您想格式化 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>';
                }
            },
        

        我很难找到一种在不妨碍数据分组功能或日期的情况下添加百万和千的方法。

        【讨论】:

          猜你喜欢
          • 2011-03-21
          • 1970-01-01
          • 2010-10-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-09-08
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多