Highcharts: позиционирование категории для соответствия столбцам даты и времени

Question

Я пытаюсь создать такой график в Highcharts (см. fiddle ):

график цели

Проблема внижние категории.Они добавляются в качестве второй оси:

 {
  tickPositions: [1, 3, 4, 5, 10],
  categories: ['Preparation', 'Base 0', 'Base 1', 'Base 2', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  gridLineWidth: '1',
  lineWidth: 1,
  tickmarkPlacement: 'on'
}

Они должны совпадать с правильными диапазонами дат, указанными в столбцах диапазона дат выше.
Но, добавляя категории в качестве второй оси, кажется, чтоможно организовать их по дате.

Как это делается в Highcharts?

Спасибо, Филипп

Answer 1

Категории в Highcharts имеют одинаковую ширину, поэтому для достижения желаемого результата я бы использовал другой подход.Я бы использовал Highcharts.SVGRenderer для создания ректов и меток, которые будут имитировать ось:

var categories = [{
    name: 'Preparation',
    value: 4,
    color: 'red'
}, {
    name: 'Base1',
    value: 2,
    color: 'blue'
}, {
    name: 'Base2',
    value: 3,
    color: 'green'
}, {
    name: 'Base3',
    value: 1,
    color: 'orange'
}]

Highcharts.chart('container', {
    xAxis: {
        visible: false
    },
    chart: {
        marginBottom: 150,
        events: {
            render: function() {
                var index = 0,
                    points = this.series[0].points,
                    pointWidth = points[0].pointWidth,
                    x,
                    y = this.plotTop + this.plotSizeY + 10,
                    height = 10,
                    width;

                if (!this.additionalAxis) {
                    this.additionalAxis = [];
                } else {
                    Highcharts.each(this.additionalAxis, function(el) {
                        el.destroy();
                    });

                    this.additionalAxis.length = 0;
                }

                Highcharts.each(categories, function(category) {
                    x = points[index].plotX - pointWidth / 2;
                    width = points[index + category.value - 1].plotX - x + pointWidth / 2;
                    x += this.plotLeft;

                    this.additionalAxis.push(
                        this.renderer
                        .rect(x, y, width, height)
                        .attr({
                            fill: category.color
                        })
                        .add()
                    );

                    this.additionalAxis.push(
                        this.renderer
                        .text(category.name, x + width / 2, y + height * 2)
                        .attr({
                            align: 'center'
                        })
                        .add()
                    );

                    index += category.value;
                }, this);
            }
        }
    },
    series: [{
        type: 'column',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    }]
});

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/vupj253c/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect