格式化Highcharts y轴标签 [英] Format Highcharts y-axis labels

问题描述

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

我想在这些标签上加上货币符号，例如：显示3k而不是3k。但是，只要我添加货币符号，公制前缀就不再使用。我已经尝试了以下内容：

  yAxis：{
 labels：{
 formatter：function（）{ 
返回'$'+ this.value; 
} 
} 
} 
  

并试过

  yAxis：{
标签：{
格式：'$ {value}'
} 
 
  

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

=nofollow noreferrer> JSFiddle here ）说明了这个问题

<$ c $如果你包含下面的行，公制前缀消失/ *标签：{格式：'$ {value}'} * //}，系列：[{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 =containerstyle =height：400px; width ：500px>< / div>  

解决方案

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

  $（function（）{
 $（'＃container'）。highcharts（{
 
 yAxis：{
 labels：{
 formatter：function（）{
 return'$'+ this.axis.defaultLabelFormatter.call（本）; 
} 
} 
}，
 
系列：[{
 data：[15000，20000，30000] 
}] 
 
}）; 
}）; 
  

http： //jsfiddle.net/x6b0onkp/2/

I'm using Highcharts to generate a line chart that shows currency values. By default the y-axis labels use metric prefixes for abbreviation, e.g. 3k is displayed instead of 3000

I would like to prepend a currency symbol to these labels, e.g. display $3k instead of 3k. However as soon as I add the currency symbol, the metric prefixes are no longer used. I've tried the following

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

and also tried

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

But in both cases $3000 is displayed instead of $3k. Is it possible to add a currency symbol without losing the metric prefix?

Here's a demo (JSFiddle here) that illustrates the problem

$(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>

解决方案

You can call the original formatter from your formatter function:

$(function () {
    $('#container').highcharts({

        yAxis: {            
            labels: {
                formatter: function () {
                    return '$' + this.axis.defaultLabelFormatter.call(this);
                }            
            }
        },

        series: [{
            data: [15000, 20000, 30000]
        }]

    });
});

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

这篇关于格式化Highcharts y轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！