Highcharts JS - добавить третью переменную в подсказку для двух серий

Question

Я уже выяснил, как сделать диаграмму, используя верхние диаграммы, где есть три переменные - одна по оси X, одна по оси Y и одна во всплывающей подсказке.Чтобы сделать это, добавьте в подсказку следующее:

tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData.find(row => row.timestamp === this.point.x)
      return pointData.somethingElse
    }
  }

Полный код приведен в этой скрипте: https://jsfiddle.net/m9e6thwn/

Я просто хотел бы сделать то же самое, нос двумя сериями вместо одной.Я не могу заставить его работать.Я пробовал это:

tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData1.find(row => row.timestamp === this.point.x)
      return pointData.somethingElse
      const pointData2 = chartData2.find(row => row.timestamp === this.point.x)
      return pointData2.somethingElse
    }
  }

Вот скрипка выше: https://jsfiddle.net/hdeg9x02/ Как вы можете видеть, третья переменная появляется только в одной из двух серий.Что я не так делаю?

Answer 1

Есть некоторые проблемы с тем, как вы сейчас используете форматтер. С одной стороны, вы не можете иметь две return s в одной и той же функции без каких-либо предложений if. Это будет означать, что будет использоваться только первый return.

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

Добавьте дополнительную информацию для каждой точки к старшим диаграммам, что значительно упростит доступ к этой информации через старшие диаграммы. Например. во всплывающей подсказке. Вы можете установить данные следующим образом:

chartData1.map(function(row) {
  return {
    x: row.timestamp, 
    y: row.value, 
    somethingElse: row.somethingElse
  }
})

Если вы сделаете это, то возвращение правильной всплывающей подсказки для каждой серии будет простым делом:

tooltip: {
  formatter () {
    // this.point.x is the timestamp in my original chartData array
    return this.point.somethingElse
  }
}

Пример работы JSFiddle: https://jsfiddle.net/ewolden/dq7L64jg/6/

Если вам нужна дополнительная информация во всплывающей подсказке, вы можете сделать:

tooltip: {
  formatter () {
    // this.point.x is the timestamp in my original chartData array
    return this.point.somethingElse + ", time: " + str(this.x) + ", value: " + str(this.y)
  }
}

Кроме того, вам необходимо убедиться, что элементы xAxis, т. Е. Ваши метки времени отсортированы. Это требование для высоких графиков для правильной работы. На самом деле, ваш пример сообщает

Ошибка Highcharts # 15: www.highcharts.com/errors/15

в консоли, потому что chartData2 находится в обратном порядке. В этом примере все выглядит хорошо, но более сложные примеры могут привести к тому, что график будет выглядеть не так, как вы ожидаете.

Для этого примера использовать реверс достаточно просто: data: chartData2.reverse().map(function(row) {return {x: row.timestamp, y: row.value, somethingElse: row.somethingElse}})

Пример работы JSFiddle: https://jsfiddle.net/ewolden/dq7L64jg/7/