Wie ändere ich Highcharts xAxis Etikettenfarbe individuell?

Question

Ich konnte durch den Einsatz der im Anschluss an die Farbe meiner Charts xAchse Etiketten ändern:

Highcharts.chart('container', { 
    chart: { 
    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] 
    }] 
}); 

Obwohl die oben genannten Änderungen alle xAchse Etiketten rot.

Wie kann ich jede Etikett Farbe einzeln ändern, so dass "Jan" ist rot, "Feb" ist blau usw.

Working example

Answer 1

Sie Axis.labels.formatter verwenden können und das Rück Ihr Label In HTML-Tag mit Style-Attribut, das Ihre Farbe definieren kann.

const color = { 
    Jan: 'red', 
    Feb: 'green', 
    Mar: 'blue' 
} 

const chart = Highcharts.chart('container', { 
    chart: { 
    marginBottom: 80 
    }, 
    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar'], 
    labels: { 
     formatter() { 
     return `<span style="color: ${color[this.value]}">${this.value}</span>` 
     } 
    } 
    }, 

    series: [{ 
    data: [29.9, 71.5, 106.4] 
    }] 
}) 


console.log(chart.series[0].data) 

anschauliches Beispiel: http://jsfiddle.net/508jej83/

Answer 2

ich für Sie hoffen !!!