javascript - data - Cambiar el título del eje HighCharts

highcharts tooltip

Question

¿Es posible cambiar el título del eje de un gráfico de HighCharts mediante programación?

Estoy tratando de hacer algo como esto:

charts.series[0].yAxis.title.text = ''new title'';

o

charts.yAxis[0].title.text = ''new title'';

(Habiendo establecido un título cuando se inicializó el gráfico).

Answer 1

Esto se puede hacer directamente en el objeto Axis usando setTitle ahora. Por ejemplo:

chart.yAxis[0].setTitle({ text: "Bananas" });

Vea esta demostración de JSFiddle . La firma del método es:

setTitle(Object title, [Boolean redraw])

Así que opcionalmente podrías pasar un booleano para esperar con el redibujado. El objeto de title toma los mismos parámetros que xAxis.title lo que significa que podría pasar en estilos y varias otras opciones, así como el propio texto. La documentación de la API tiene la información completa.

Answer 2

He creado un violín de demostración para cambiar dinámicamente el título del eje y . Consulte este JSFIDDLE

HTML:

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<input type="button" value="Change Y-axis Title to ''My text''" id="my_btn">

JS (parte del código para actualizar el título del eje y al hacer clic en un botón):

var chart = $(''#container'').highcharts();
    $(''#my_btn'').click(function(){
        //alert(''hey'');
        chart.yAxis[0].update({
            title:{
                text:"My text"
            }
        });
        alert(''Y-axis title changed to "My text" !'');
    });

Consulte la documentación de la función de actualización de Highcharts para obtener más detalles.

Answer 3

La respuesta anterior tiene todavía un problema. Las imágenes creadas desde la parcela usando el módulo de exportación mostrarán el título original, no el modificado. Agregue la siguiente línea para arreglar:

chart.options.yAxis[0].title.text = ''new title'';

Answer 4

No pude hacer que nada de lo anterior funcionara, quizás las cosas hayan cambiado desde el año pasado ... terminé usando:

chart.yAxis[0].update({
                title:{
                    text: "new title"
                }
            });

y funcionó muy bien ...

Answer 5

Sí, puedes hacer esto usando lo siguiente:

chart.yAxis[0].axisTitle.attr({
        text: ''new title''
    });