highcharts - 如何添加类别的分隔线

Question

我有一个包含多个类别的柱形图：

        xAxis: {
            categories: cat,
            labels: {
                enabled: true
            }
        },

var cat是一个动态生成的类别数组 [cat1, cat2, cat3...]。

如何在 X 轴上添加垂直线或带来分隔类别？

Answer 1

这里是这样的：

var cats = ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
            'Seven', 'Eight', 'Nine'];

var colors = [
   '#2f7ed8', 
   '#0d233a', 
   '#8bbc21', 
   '#910000', 
   '#1aadce', 
   '#492970',
   '#f28f43', 
   '#77a1e5', 
   '#c42525', 
   '#a6c96a'
];

var bands = [];

for (var i=0; i < cats.length; i++)
{
    bands.push({color: colors[i],
                from:i-0.5,
                to:i+1});
}

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: cats,
            plotBands: bands
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            color: 'black'
        }]
    });
});

Answer 2

要创建垂直线，只需将 x 轴网格线宽度设置为大于 0 的值。

http://api.highcharts.com/highcharts#xAxis.gridLineWidth

alternateGridColor使用该属性可以更轻松地完成乐队，如下所示：

http://jsfiddle.net/yPLVP/53/