javascript - highcharts yaxis line

Formato de Highcharts y etiquetas de eje y

Question

Estoy usando Highcharts para generar un gráfico de líneas que muestra valores de moneda. Por defecto, las etiquetas del eje y usan prefijos de métrica para las abreviaturas, por ejemplo, se muestra 3k en lugar de 3000

Me gustaría anteponer un símbolo de moneda a estas etiquetas, por ejemplo, mostrar $ 3k en lugar de 3k. Sin embargo, tan pronto como agrego el símbolo de moneda, los prefijos métricos ya no se usan. He intentado lo siguiente

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

y también trató

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

Pero en ambos casos se muestra $ 3000 en lugar de $ 3k. ¿Es posible agregar un símbolo de moneda sin perder el prefijo métrico?

Aquí hay una demostración ( JSFiddle aquí ) que ilustra el problema

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

Answer 1

Busqué en el código fuente de HighCharts y descubrí que si pasa un format o formatter no agregará un símbolo numérico. Está dentro de else if instrucción, es decir, formatOption xor numericSymbol. Así que necesitas agregar un formateador y hacer la lógica tú mismo.

Esta es una copia-pegada ligeramente modificada de su código:

       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/

Answer 2

Puede llamar al formateador original desde su función de formateador:

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

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

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

    });
});

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