Highcharts 柱狀圖中點懸停上的粗體 X 軸標簽

Question

我使用的是 Highcharts 柱狀圖 ( http://www.highcharts.com/demo/column-basic )，其中包含 50 多行數據和 3 個不同的系列。 由於這個數量和圖表寬度限制，x 軸標簽靠在一起並成束。

當用戶將鼠標懸停在圖表內的點/列上時，我想加粗或更改 x 軸標簽的顏色。 我知道有些事件可以綁定到每個點（ http://api.highcharts.com/highcharts#plotOptions.column.point.events ），但我無法將任何樣式更改鏈接到 x 軸標簽由此。 這是一個 jsFiddle ( http://bit.ly/SpPvCW )，其中包括該事件。 代碼塊如下所示：

plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        $reporting.html('x: '+ this.x +', y: '+ this.y);
                    }
                }
            },
            events: {
                mouseOut: function() {                        
                    $reporting.empty();
                }
            }
        }
}

這個 jsFiddle ( http://jsfiddle.net/4h7DW/1/ ) 包括一個柱狀圖，其中 x 軸標簽旋轉。

xAxis: {
            labels: {
                rotation: -70,
                align: 'right',
                style: {
                    fontSize: '10px',
                    color:'#999',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
},

同樣，目標是在您懸停關聯的列/點時加粗或更改 x 軸標簽的顏色。

Answer 1

這是我剛剛創建的一個快速示例。 我累了，它可以改進。 它通過點索引將軸標簽鏈接到鼠標懸停：

          series: {
                point: {
                    events: {
                        mouseOver: function() {
                           $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                        },
                        mouseOut: function() {                       
                             $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#999999');
                        }
                    }
                }
            }

在這里擺弄。

Answer 2

替代解決方案：使用 HTML 參數，然后使用 jquery 在 DOM 中查找 elemetn。

http://jsfiddle.net/uPBvH/2/

series: {
                point: {
                    events: {
                        mouseOver: function() {                 $('.highcharts-axis-labels span').eq(this.x).addClass('active');
                        },
                        mouseOut: function() {                       
  $('.highcharts-axis-labels span').eq(this.x).removeClass('active');                        
                        }
                    }
                }
            }