首页 文章

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

提问于
浏览 次
0

我正在使用包含超过50行数据和3个不同系列的Highcharts柱形图（http://www.highcharts.com/demo/column-basic） . 由于此数量和图表宽度限制，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轴标签的颜色 .

jquery highcharts

2 回答

  • 4

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

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

    小提琴here .

    回复于
  • 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');                        
                        }
                    }
                }
            }
    回复于

相关问题