在Highcharts柱形图中的点hover上的粗体X轴标签

我正在使用Highcharts柱形图（ http://www.highcharts.com/demo/column-basic ），其中包含超过50行数据和3个不同系列。 由于此数量和图表宽度限制，x轴标签靠近并聚集在一起。

当用户将鼠标hover在图表中的点/列上时，我想加粗或更改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' } } }, 

同样，目标是在hover关联的列/点时加粗或更改x轴标签的颜色。

Answer 1

这是我刚刚创建的一个快速示例。 我累了，可以改进。 它通过点索引将轴标签链接到鼠标hover：

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