Как добавить цвета фона в категории категорий в Highcharts

Question

У меня есть диаграмма столбцов, отображаемая через Highcharts с несколькими категориями и несколькими сериями. Хотя Highcharts любезно группирует и выравнивает данные серии по категориям, не существует опции конфигурации, которая позволила бы установить цвет фона для группировок категорий.

Я хотел бы достичь зебра по категориям, как этот сырой макете я сделал в Photoshop®:

Вот jsfiddle containing my current code, и моя текущая конфигурация схемы:

var chartOptions = { 
    "chart": { 
    "type": "column" 
    }, 
    "title": { 
    "text": "" 
    }, 
    "credits": { 
    "enabled": false 
    }, 
    "subtitle": { 
    "text": "" 
    }, 
    "xAxis": { 
    "categories": [ 
     "Category 1", 
     "Category 2", 
     "Category 3", 
     "Category 4", 
     "Category 5", 
     "Category 6" 
    ], 
    "opposite": true 
    }, 
    "yAxis": { 
    "title": { 
     "text": "Score" 
    }, 
    "tickPixelInterval": 40 
    }, 
    "plotOptions": { 
    "column": { 
     "pointPadding": 0.2, 
     "borderWidth": 0 
    } 
    }, 
    "series": [ 
    { 
     "name": "Series 1", 
     "data": [22.735, 5.9, -18.71, -41.17, -0.865, -6.03] 
    }, 
    { 
     "name": "Series 2", 
     "data": [20.67, 5.46, -17.15, -37.66, -0.79, -5.52] 
    }, 
    { 
     "name": "Series 3", 
     "data": [29, 2, -20, -29, -2, 16] 
    } 
    ] 
}; 

Answer 1

You можно использовать alternateGridColor опцию xAxis:

"xAxis": { 
    "categories": [ 
     "Category 1", 
     "Category 2", 
     "Category 3", 
     "Category 4", 
     "Category 5", 
     "Category 6" 
    ], 
    "opposite": true, 
    alternateGridColor: '#CCC' 

Если вы посмотрите t xAxis documentation существует немало различных свойств, которые вы можете использовать.

Demo