Highcharts — Отображение метки категории строк во всплывающей подсказке для линейного графика

#user-interface #graph #highcharts #line-plot

Вопрос:

У меня уже есть линейный график. Каждая точка также имеет чувствительность (категориальную метку). Либо ноль, «Низкий», «Средний», «Высокий»

На данный момент мои данные находятся только в объекте JSON вверху. sensitivities Ключ отформатирован следующим образом: [временная метка, метка чувствительности]

Когда я наведу курсор на точку, я хочу показать метку чувствительности во всплывающей Value подсказке, если она есть. Спасибо за любую помощь.

Вот задача jsfiddle, с которой я работаю: https://jsfiddle.net/keshprad_dev/ny9f14vq/

Ответ №1:

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

 tooltip: {
  ...,
  formatter: function(tooltip) {
    const rows = tooltip.defaultFormatter.call(this, tooltip);
    const matchedSen = graphData.sensitivities.find(s => s[0] === this.x);

    if (matchedSen amp;amp; matchedSen[1]) {
      rows.push(['Sensitivities: '   matchedSen[1]]);
    }

    return rows;
  }
}
 

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

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