Bold X-Axis Label on Point Hover in Highcharts Column Chart

问题

I'm using a Highcharts column chart (http://www.highcharts.com/demo/column-basic) with over 50 rows of data and 3 different series. Because of this amount and the chart width constraints, the x-axis labels are close together and bunched.

I'd like to bold or change the color of the x-axis label when the user hovers over the point/column within the chart. I know there are events you can bind to each point (http://api.highcharts.com/highcharts#plotOptions.column.point.events) but I haven't been able to link any style changes to the x-axis labels from this. Here is a jsFiddle (http://bit.ly/SpPvCW) that includes the event on the point. The code block looks like this:

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

This jsFiddle (http://jsfiddle.net/4h7DW/1/) includes a column chart where the x-axis labels are rotated.

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

Again, the goal is to bold or change the color of the x-axis label when you hover the associated column/point.

回答1:

Here's a quick sample I just created. I'm tired and it could be improved. It links the axis label to the mouseover by point index:

          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');
                        }
                    }
                }
            }

Fiddle here.

回答2:

Alternative solution: using HTML paramter and then jquery to find elemetn in DOM.

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');                        
                        }
                    }
                }
            }

来源：https://stackoverflow.com/questions/17157873/bold-x-axis-label-on-point-hover-in-highcharts-column-chart

标签

jquery

Highcharts