javascript - style - Highchart: cambia el color de una etiqueta del eje x solamente

highcharts title

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, ¿qué sucede si deseo cambiar el color de solo UNA etiqueta, no todas las etiquetas? ¿Cómo aplico el estilo a etiquetas individuales?

Answer 1

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 puede establecer una devolución de llamada para el "evento listo para el gráfico":

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

Parámetros

opciones: Objeto Las opciones del gráfico, como se documenta en el encabezado "El objeto de opciones" en el menú de la izquierda.

devolución de llamada: Función

Una función que se ejecuta cuando el objeto del gráfico termina de cargarse y renderizarse. En la mayoría de los casos, el gráfico se construye en un solo hilo, pero en Internet Explorer versión 8 o menos, el gráfico a veces se inicia antes de que el documento esté listo, y en estos casos el objeto del gráfico no se terminará directamente después de llamar al nuevo Highcharts.Chart () . Como consecuencia, el código que se basa en el objeto Gráfico recién creado siempre debe ejecutarse en la devolución de llamada. Definir un controlador chart.event.load es equivalente.

Devoluciones: Una referencia al objeto gráfico creado.

Puedes 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"});
})
});​

Espero que esto te ayude

Answer 2

Estoy usando dataLabels en un gráfico circular de anillos. Quería cambiar los colores del texto de la etiqueta para cortes de sectores individuales, según la 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 3

También puede utilizar el formateador de etiquetas 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 4

Tenga en cuenta que cuando utilice el servidor de exportación de highcharts en export.highcharts.com para renderizar imágenes para sus gráficos, no se ejecutarán los formateadores de JavaScript.

Afortunadamente, highcharts traduce algunas etiquetas html y atributos de estilo de etiquetas individuales y cadenas de título al estilo SVG equivalente, pero es bastante delicado sobre cómo se analiza el html. Se eliminarán las etiquetas que utilizan atributos de comillas simples, debe usar comillas dobles. Además, anidar una etiqueta <br/> dentro de otra etiqueta no funcionará.

Entonces, si quieres dos líneas de texto de color rojo, por ejemplo, obtienes:

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

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;
}
}
}
},