设置高图表y轴标签的格式

Format Highcharts y-axis labels

本文关键字：格式 标签 高图表 设置      更新时间：2023-09-26

我正在使用Highcharts生成一个显示货币价值的折线图。默认情况下，y轴标签使用公制前缀作为缩写，例如显示3k而不是3000

我想为这些标签准备一个货币符号，例如显示3000美元而不是3000美元。但是，一旦添加了货币符号，就不再使用公制前缀。我试过以下

    yAxis: {
        labels: {                
            formatter: function () {
                return '$' + this.value;
            }
        }
    }

还尝试了

    yAxis: {
        labels: {
            format: '${value}'
        }
    }

但在这两种情况下，显示的都是3000美元，而不是3000美元。是否可以在不丢失公制前缀的情况下添加货币符号？

这里有一个演示（这里是JSFiddle），它说明了的问题

$(function() {
  $('#container').highcharts({
    yAxis: {
      // if you include the lines below, the metric prefixes disappear
      /*
      labels: {
          format: '${value}'
      }
      */
    },
    series: [{
      data: [15000, 20000, 30000]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

您可以从格式化程序函数中调用原始格式化程序：

$(function () {
    $('#container').highcharts({
        yAxis: {            
            labels: {
                formatter: function () {
                    return '$' + this.axis.defaultLabelFormatter.call(this);
                }            
            }
        },
        series: [{
            data: [15000, 20000, 30000]
        }]
    });
});

http://jsfiddle.net/x6b0onkp/2/

我查看了HighCharts的源代码，发现如果传递format或formatter，它不会添加数字符号。它在else if语句中，即formatOption xor numericSymbol。因此，您需要添加一个格式化程序并自己执行逻辑。

这是他们代码的一个稍微修改过的复制粘贴：

       formatter: function() {
           var ret,
               numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
               i = numericSymbols.length;
           if(this.value >=1000) {
               while (i-- && ret === undefined) {
                   multi = Math.pow(1000, i + 1);
                   if (this.value >= multi && numericSymbols[i] !== null) {
                      ret = (this.value / multi) + numericSymbols[i];
                   }
               }
           }
           return '$' + (ret ? ret : this.value);
       }

http://jsfiddle.net/x6b0onkp/1/

相关文章：