Как выделить ячейки и метки yaxis при наведении на тепловую карту highcharts

#javascript #highcharts

#javascript #highcharts

Вопрос:

У меня большая тепловая карта, и поскольку она такая большая, я пытаюсь выделить ячейку, когда кто-то наводит на нее курсор мыши, и я также хотел бы выделить галочку по оси y в качестве временной привязки из-за большой ширины диаграммы. Я видел несколько примеров этого, но моя тепловая карта не реагирует на эффекты наведения.

Я использовал этот пример, чтобы выделить ячейки красным цветом, но он не работает. http://jsfiddle.net/937twae7 / Я также исследовал этот метод выделения значений тиков, но он, вероятно, не работает по аналогичным причинам. https://jsfiddle.net/sjapdya6/1 /

В разделе кода «серия» я сделал это:

 ...
states: {
  hover: {
    color: 'red'
  }
}
...
 

Вот мой график: https://jsfiddle.net/civilsurfer/Lhysx2vg/1 /

Когда я навожу курсор на ячейки, ничего не происходит.

Спасибо за любую помощь.

Ответ №1:

Вы использовали boost модуль, который повышает производительность, но вызывает некоторые ограничения — например, невозможность изменения цвета в состояниях.

Чтобы выделить метку оси, вам нужно настроить findTick функцию:

 function findTick(point, ticks) {
    for (var tickValue in ticks) {
        if (tickValue == point.y) {
            return ticks[tickValue]
        }
    }
}
 

Живая демонстрация: https://jsfiddle.net/blackLabel/agcper18/

Документы: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Комментарии:

1. Спасибо!!! Вы случайно не знаете, как определить вторую ось y для выделения, не так ли? Я пробовал что-то вроде this.series.yaxis.opposite.ticks, но это не работает.

2. Привет @user1610717, метки имеют одинаковые значения, поэтому все, что вам нужно сделать, это немного изменить код: jsfiddle.net/BlackLabel/9znr1axy

3. Выдающийся. Я действительно ценю помощь.