Highcharts柱形图上悬停点上的粗体X轴标签 [英] Bold X-Axis Label on Point Hover in Highcharts Column Chart

问题描述

我使用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）; 
 
 $ b $，
 events：{
 mouseOut：function（）{
 $ reporting.empty（）; 
} 
} 
} 
} 
  

jsFiddle（ http://jsfiddle.net/4h7DW/1/ ）包含一个柱状图，其中x轴标签旋转。

  xAxis：{
标签：{
旋转：-70，
 align：' right'，
 style：{
 fontSize：'10px'，
 color：'＃999'，
 fontFamily：'Verdana，sans-serif'
} 
} 
}，
  

同样，目标是加粗或更改颜色当您悬停关联的列/点时，您可以使用x轴标签。

解决方案

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

 系列：{
 point：{
事件：{
 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'）; 
 
 
 
 
 code 
 $ b小提琴此处。
 
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.
解决方案
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.

                        
这篇关于Highcharts柱形图上悬停点上的粗体X轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！