将 X 轴除以 HIghchart 中的可点击区域答案

【问题标题】：Divide X axis by Clickable Zones in HIghchart将 X 轴除以 HIghchart 中的可点击区域
【发布时间】：2019-02-13 17:45:20
【问题描述】：

我想在高图中的区域图中实现范围明智的 xAxis。

区域应该是可点击的，并且应该过滤图形中的区域。

【问题讨论】：

标签： html highcharts

【解决方案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

【讨论】：

感谢您的解决方案。如果我想在我们点击 xAxis label Line("Goods, Not great ")时得到一个事件怎么办
嗨 Vishu238，您只需要将事件添加到呈现的text 元素：jsfiddle.net/BlackLabel/82dxv03q