如何分别更改Highcharts xAxis标签颜色？

Question

我已经能够通过改变我的图表x轴的标签的颜色如下：

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] 
    }] 
}); 

虽然，上述所有的变化X轴标签是红色的。

我如何可以单独改变每个标签的颜色，让“简”为红色，“二月”是蓝色等

Working example

Answer 1

您可以使用Axis.labels.formatter并返回您的标签在具有style属性的html标记中，它可以定义你的颜色。

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) 

活生生的例子： http://jsfiddle.net/508jej83/

Answer 2

我希望你！

xAxis : {    
       categories : _category, 
       labels : { 
        formatter : function() { 
         if (_category != null && _category.length > 0) { 
          var currentColumn = -1; 
          for (var i = 0; i < _category.length; i++) { 
           if (_category[i] == this.value) { 
            currentColumn = i; 
            break; 
           } 
          } 

          if (isNumberEven(currentColumn)) {        
           return '<span style="fill: blue;">' + this.value + '</span>'; 

          } else { 
           return this.value; 
          } 

         } 
        } 

       } 

      }