在Highcharts中自定义默认的y轴标签 [英] Customizing default y-axis label in Highcharts

问题描述

我想将$加到默认的y轴标签上。我的条形图使用数百万的值，因此图表返回值为MM（80MM，30MM）。我想要做的是格式化Y轴，如$ -value-MM（$ 80MMm $ 30MM）。我已经尝试了下面的代码，并且无法使它工作？

  yAxis：[{// Primary yAxis 
标签：{
 formatter：function（）{
 return'$'+ this.value; 
} 
}，
 title：{
 text：'Revenue'，
  

为了达到这个目的，一个相当复杂的方法是重用Highcharts在其内部的 defaultLabelFormatter 中使用的代码。 对于轴的数字，并在轴格式化程序中使用它。

这是一个例子，添加了前缀（ JSFiddle ）：

  yAxis：{
标签：{
 formatter：function（）{
 var numericSymbols = Highcharts.getOptions（）。lang.numericSymbols; 
 var i = numericSymbols&& numericSymbols.length; 
 var numericSymbolDetector = this.axis.isLog？ this.value：this.axis.tickInterval; 
 var UNDEFINED，ret，multi; 
 
 while（i--&& ret === UNDEFINED）{
 multi = Math.pow（1000，i + 1）; 
 if（numericSymbolDetector> = multi&&（this.value * 10）％multi === 0&&; numericSymbols [i]！== null）{
 ret = Highcharts。 numberFormat（this.value / multi，-1）+ numericSymbols [i]; 
 
 
 
 if（ret === UNDEFINED）{
 if（Math.abs（this.value）> = 10000）{
 ret = Highcharts.numberFormat（this.value，-1）; 
 
} else {
 ret = Highcharts.numberFormat（this.value，-1，UNDEFINED，''）; 
} 
} 
 
返回$+ ret; //添加前缀
} 
}，
} 
  

这个实验的简短形式是使用所需上下文的基本部分调用 defaultLabelFormatter 。这是一个例子（ JSFiddle ）：

 yAxis：{
 labels：{
 formatter：function（）{
 return$+ this.axis.defaultLabelFormatter.call（{
轴：this.axis，
 value：this.value 
}）; 
} 
}，
} 
  

由于上下文不完整如果你的坐标轴 datetime 或 categories 或者是对数坐标轴，但是它应该适用于数轴。对于完整的图片，我建议查看完整的 defaultLabelFormatter 实现。

I want to prefix a $ to the default y-axis label. My bar chart is using values in the millions so the chart is returning value-MM (80MM, 30MM). What I would like to do is format the y-axis like $-value-MM ($80MMm $30MM). I have tried the code below and can't get it to work?

yAxis: [{ // Primary yAxis
    labels: {
        formatter: function () {
            return '$' + this.value;
        }
    },
    title: {
        text: 'Revenue',

解决方案

One rather elaborate way to achieve this is to re-use the code Highcharts uses in their internal defaultLabelFormatter for axis that are numeric, and use it in the axis formatter.

An example of this, with your added prefix (JSFiddle):

yAxis: {
    labels: {
        formatter: function() {
            var numericSymbols = Highcharts.getOptions().lang.numericSymbols;
            var i = numericSymbols && numericSymbols.length;
            var numericSymbolDetector = this.axis.isLog ? this.value : this.axis.tickInterval;
            var UNDEFINED, ret, multi;

            while (i-- && ret === UNDEFINED) {
                multi = Math.pow(1000, i + 1);
                if (numericSymbolDetector >= multi && (this.value * 10) % multi === 0 && numericSymbols[i] !== null) {
                    ret = Highcharts.numberFormat(this.value / multi, -1) + numericSymbols[i];
                }
            }

            if (ret === UNDEFINED) {
                if (Math.abs(this.value) >= 10000) { 
                    ret = Highcharts.numberFormat(this.value, -1);

                } else {
                    ret = Highcharts.numberFormat(this.value, -1, UNDEFINED, '');
                }
            }

            return "$"+ret; // Adding the prefix
        }
    },
}

A experimental short form of this would be to call the defaultLabelFormatter with the essential parts of the context it requires. An example of this (JSFiddle):

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

As the context is incomplete it wouldn't work as expected if your axis was datetime or categories or perhaps logarithmical, but should work for numeric axis. For the full picture I suggest looking at the full defaultLabelFormatter implementation.

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