Разделите ось X на кликабельные зоны в диаграмме

Question

Я хочу реализовать диапазон xAxis в Area Graph на старшей диаграмме.

Зоны должны быть кликабельными, и это должно фильтровать область в графике.

Answer 1

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

chart: {
    ...,
    events: {
        load: function() {
            var ticks = this.xAxis[0].ticks,
                customLabels = ['total: 13', 'Zone of Mediocrity', 'Stocks: 47', 'Good, not great', 'total: 13', 'Zone of "Greatness"'],
                counter = 0,
                xPos,
                tickPos;

            addEvents.call(this);

            Highcharts.objectEach(ticks, function(el) {
                if (tickPos) {
                    xPos = tickPos.x + (el.mark.getBBox().x - tickPos.x) / 2;
                    drawCustomLabel.call(
                        this,
                        customLabels[counter],
                        xPos,
                        tickPos.y + 10
                    );

                    drawCustomLabel.call(
                        this,
                        customLabels[counter + 1],
                        xPos,
                        tickPos.y + 30
                    );

                    counter += 2;
                }

                tickPos = el.mark.getBBox();
                el.mark.attr({
                    translateY: 7.5
                });
            }, this);
        }
    }
}

.Ряд диаграммы на несколько элементов использует zones.Событие click можно добавить следующим образом:

function addEvents() {
    var series = this.series[0];

    series['zone-area-0'].element.addEventListener('click', function() {
        console.log('zone-area-0');
    });

    ...
}

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

API:

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

https://api.highcharts.com/highcharts/series.areaspline.zones

https://api.highcharts.com/highcharts/xAxis.tickPositions