Я добавил прослушиватель событий при наведении курсора мыши в класс .highcharts-xaxis-labels
Highcharts. Однако это console.info
только при наведении курсора на <text>
, а не на остальную часть .highcharts-xaxis-labels
класса.
Как я могу добавить прослушиватель событий, чтобы он console.info
при наведении курсора мыши по всему .highcharts-xaxis-labels
классу, а не только <text>
внутри класса? Это будет <g>
с className .highcharts-xaxis-labels
.
живой пример: https://jsfiddle.net/simazargar/sv9e1g5x/9/
Highcharts.chart('container', {
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, chart => {
document.querySelector('.highcharts-xaxis-labels')
.addEventListener('mouseover', function(e) {
console.info('mouseover');
});
});
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/modules/accessibility.js"></script>
<div id = "container"></div>
Я считаю, что это было бы невозможно, если бы у нас не было нового <rect>
с новым className, таким как .highcharts-xaxis-box
, который также позволит стилизовать эту область, а не только метки (аналогично тому, что Highcharts имеет для Legend).
Попрошу новую фичу https://github.com/highcharts/highcharts/issues/18082
Вы можете установить pointer-events: bounding-box
стиль .highcharts-xaxis-labels
класса CSS:
.highcharts-xaxis-labels {
pointer-events: bounding-box;
}
Живая демонстрация: https://jsfiddle.net/BlackLabel/bmykcLew/
Полезная тема: клик jQuery срабатывает не на SVG <g>, а на дочерних элементах
Добро пожаловать в СО! Спасибо за участие. Не могли бы вы уделить немного времени преобразовать ссылку jsfiddle в «Фрагмент стека», если это возможно?