将X轴除以图表中的可点击区域

Question

我想在highchart的Area Graph中实现范围明智的xAxis。

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

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