Блог

Главная - Вопросы по программированию - HighChart — показывать всплывающие подсказки для null при наведении

HighChart — показывать всплывающие подсказки для null при наведении

#highcharts

Вопрос:

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

Скрипка: https://jsfiddle.net/wmoxLy4r/2/

То, что я пытаюсь сделать, это:

1/ Разрешить наведение указателя мыши на нулевые значения

2/ При наведении курсора на нулевые значения я хотел бы показать значение ближайшего ненулевого значения слева. В этом случае это было бы заметно 129.2 .

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

Ответ №1:

Вы можете предварительно обработать свои данные и рассчитать средние точки. Нулевая точка не имеет маркера, и для нее невозможно отобразить всплывающую подсказку.

 const data = [...];

const processedData = data.map((dataEl, index) => {
    if (!dataEl) {
        return {
            y: (data[index - 1]   data[index   1]) / 2,
            isCalculatedValue: true,
            marker: {
                fillColor: 'red',
                radius: 1
            }
        }
    }

    return dataEl;
});

Используя tooltip.formatter функцию, вы можете отобразить предыдущее значение точки во всплывающей подсказке.

     tooltip: {
        formatter: function(tooltip) {
            let point = this.point;

            if (point.isCalculatedValue) {
                point = this.series.points[point.index - 1];
            }

            return "<span style='font-size: 10px'>"   point.category   "</span><br/>"  
                "<span style='color:"   point.series.color  
                "'>●</span> Line series: <b>"   point.y   "</b><br/>";
        }
    }

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

Ссылка на API: https://api.highcharts.com/highcharts/tooltip.форматер

Метки: