2011-05-04 43 views
22

¿Es posible cambiar el título del eje de un gráfico HighCharts programáticamente?Cambiar el título del eje HighCharts

que estoy tratando de hacer algo como esto:

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

o

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

(ya que habían establecido un título cuando se inicializa la tabla).

Respuesta

26

Sí se puede hacer esto mediante el uso de lo siguiente:

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

+1, gracias. ¿Está esto documentado en algún lugar? No pude encontrarlo en los documentos oficiales. –

+0

no lo creo, lo encontré en el foro de Highcharts. – escouser

+0

Este trabajo. pero cuando exportamos el gráfico, el texto 'Valor' predeterminado no cambia? ¿Alguien sabe la manera de arreglar eso? –

6

La respuesta anterior tiene todavía un problema. Las imágenes creadas a partir de la gráfica usando el módulo de exportación mostrarán el título original, no el modificado. Añadir la siguiente línea de arreglar:

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

no pude conseguir cualquiera de los anteriores para trabajar, tal vez las cosas han cambiado desde el año pasado ... Terminé usando:

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

y funcionó bien ...

+0

Puedo confirmar que solo este método funcionó. Usando Highcharts 3.0.9 –

1

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 thec para actualizar el título del eje y en un botón del rató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 Highcharts 'update' function documentation para más detalles.

22

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

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

Ver this JSFiddle demonstration. La firma del método es:

setTitle(Object title, [Boolean redraw]) 

De manera opcional, puede pasar un booleano para esperar con el redibujado. El objeto title toma los mismos parámetros que xAxis.title, lo que significa que puede pasar estilos y varias otras opciones, así como el texto mismo. The API documentation tiene la información completa.

Cuestiones relacionadas