悬停时 X 区域标注

x-area labels on hover

本文关键字：区域 悬停      更新时间：2023-09-26

我需要在悬停时为 xAxis 标签添加另一种颜色（如图中的数字 19）。我后来看到了这家酒店，但我失去了它。

需要帮助=）

我可以为 xAxis tick 设置属性（z 索引）吗？因为它的颜色一定是白色，现在我看不到这种颜色，当它的z指数小于z指数图表的面积时。

对于您的第一个问题，我将使用共享工具提示和 point mouseOver 事件来更改相应的轴标签：

   plotOptions: {
        series: {
            point: {
                events: {
                    // on mouseOver make the xaxis label red
                    mouseOver: function(){
                        var xAxis = this.series.chart.xAxis[0];
                        $(xAxis.ticks[this.x].label.element).css('fill','red');
                    },
                    // on mouseOut make it gray again
                    mouseOut: function(){
                        var xAxis = this.series.chart.xAxis[0];
                        $(xAxis.ticks[this.x].label.element).css('fill','#606060');
                    }
                }
            }
        }
    },

这里的例子。

对于你的第二个问题，带有 SVG 的 z 索引有点棘手。 它没有一个真正的zIndex，你可以重新排序，而是由元素的绘制顺序决定的。 不过，我看不出这很重要，因为标签已经绘制在图表区域的顶部（否则您根本看不到它们）。

相关文章：