Highchart: cambia el color de una etiqueta del eje X solo

Question

Así que sé cómo cambiar el color de las etiquetas del eje x en Highchart, que se describe aquí.

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/

Pero lo que si quiero cambiar el color de una sola etiqueta, no todas las etiquetas? ¿Cómo aplico estilo a las etiquetas individuales?

Answer 1

También puede utilizar la etiqueta-formateador para establecer el estilo. Ejemplo completo en jsfiddle:

labels: { 
    formatter: function() { 
     if ('Jun' === this.value) { 
      return '<span style="fill: red;">' + this.value + '</span>'; 
     } else { 
      return this.value; 
     } 
    } 
} 

Answer 2

Entendí que desea cambiar el color de un elemento específico dentro del eje x.

Miré la API pero no encontré una manera fácil de hacerlo.

Ya que se puede establecer una llamada de retorno para la "Tabla de evento ready":

Gráfico (Opciones de objeto, la función de devolución de llamada):

Parámetros

opciones: Objeto Las opciones de gráficos, como documentado bajo el encabezado "El objeto de opciones" en el menú de la izquierda.

de devolución de llamada: Función

Una función a ejecutar cuando el objeto de gráfico haya terminado de cargarse y renderizado. En , la mayoría de los casos el gráfico está integrado en un subproceso, pero en Internet Explorer versión 8 o inferior el gráfico algunas veces se inicia antes de que el documento esté listo, y en estos casos el objeto del gráfico no estará terminado directamente después de llamar a los nuevos Highcharts .Gráfico(). Como consecuencia, el código que se basa en el objeto Chart recién creado debe ejecutarse siempre en la devolución de llamada . La definición de un manejador chart.event.load es equivalente.

Devoluciones: una referencia al objeto Chart creado.

Puede hacerlo de una manera sucia:

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      marginBottom: 80 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
      labels: { 

       style: { 
        color: 'red' 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
     }] 
    }, 
    function(c){ 

     // this relies in that te xAxis is before the yAxis 
     // also, setting the color with color: #ABCDEA didn't work 
     // you have to use fill. 
     $(".highcharts-axis:first text").each(function(i, label){ 
      var $label = $(label); 
      if($label.children().text() === "Jun") { 
       $label.css({fill: "blue"});       

      } 

     }); 

     // You also can to something like: 
     $(".highcharts-axis:first text:eq(6)").css({fill: "green"}); 

    }) 
});​ 

la esperanza que esto le ayuda

Answer 3

Tenga en cuenta que cuando se utilizan los exportadores Highcharts servidor en exporting.highcharts.com para representar imágenes de los gráficos, no se ejecutarán javascript formateadores.

Afortunadamente, Highcharts translates some html tags and style attributes de etiquetas individuales y cadenas de título en un estilo de SVG equivalente, pero es bastante quisquilloso sobre cómo analiza el html. Despojará las etiquetas que usan atributos de una sola cita, necesita usar comillas dobles. Además, anidar una etiqueta <br/> dentro de otra etiqueta no funcionará.

Así que si quieres dos líneas de texto en color rojo, por ejemplo, se obtiene:

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span> 

Answer 4

estoy usando dataLabels en un gráfico circular donut. Quería cambiar los colores del texto de la etiqueta para sectores individuales, basados ​​en lógica condicional, comparando valores.

Solo compartiendo porque mi búsqueda me trajo aquí.

data: outerData, 
dataLabels: { 
    formatter: 
     function() { 
      if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) { 
       return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null; 
      } else { 
       return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null; 
      } 
     } 
    } 

Answer 5

xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     labels: { 
      formatter: function() { 
       if ('Jan' === this.value) { 
        return '<span style="fill: blue;">' + this.value + '</span>'; 
       } else { 
        return this.value; 
       } 
      } 
     } 
    },