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

Хорошо, разговаривая с 6-летним ребенком, я, возможно, буду использовать следующие ассоциации.

Представьте, вы играете со своими маленькими братьями и сестрами во всем доме, и вы двигаясь с вашими игрушками, и привел некоторых из них в комнату вашего старшего брата. Через некоторое время ваш брат вернулся из школы и пошел в свою комнату, и он заперся внутри, так что теперь вы не могли получить доступ к игрушкам, оставленным там прямо. Но вы могли бы постучать в дверь и спросить своего брата за игрушками. Это называется закрытием игрушек ; ваш брат сделал это для вас, и теперь он находится во внешнем области .

blockquote>

Сравните с ситуацией, когда дверь была заперта сквозняком и никто внутри (общий выполнение функции), а затем происходит местный пожар и сжигание комнаты (сборщик мусора: D), а затем была построена новая комната, и теперь вы можете оставить там другие игрушки (новый экземпляр функции), но никогда не получите одинаковые игрушки, которые были оставлены в первом экземпляре комнаты.

Для продвинутого ребенка я бы поставил что-то вроде следующего. Это не идеально, но это заставляет вас почувствовать, что это такое:

function playingInBrothersRoom (withToys) {
  // We closure toys which we played in the brother's room. When he come back and lock the door
  // your brother is supposed to be into the outer [[scope]] object now. Thanks god you could communicate with him.
  var closureToys = withToys || [],
      returnToy, countIt, toy; // Just another closure helpers, for brother's inner use.

  var brotherGivesToyBack = function (toy) {
    // New request. There is not yet closureToys on brother's hand yet. Give him a time.
    returnToy = null;
    if (toy && closureToys.length > 0) { // If we ask for a specific toy, the brother is going to search for it.

      for ( countIt = closureToys.length; countIt; countIt--) {
        if (closureToys[countIt - 1] == toy) {
          returnToy = 'Take your ' + closureToys.splice(countIt - 1, 1) + ', little boy!';
          break;
        }
      }
      returnToy = returnToy || 'Hey, I could not find any ' + toy + ' here. Look for it in another room.';
    }
    else if (closureToys.length > 0) { // Otherwise, just give back everything he has in the room.
      returnToy = 'Behold! ' + closureToys.join(', ') + '.';
      closureToys = [];
    }
    else {
      returnToy = 'Hey, lil shrimp, I gave you everything!';
    }
    console.log(returnToy);
  }
  return brotherGivesToyBack;
}
// You are playing in the house, including the brother's room.
var toys = ['teddybear', 'car', 'jumpingrope'],
    askBrotherForClosuredToy = playingInBrothersRoom(toys);

// The door is locked, and the brother came from the school. You could not cheat and take it out directly.
console.log(askBrotherForClosuredToy.closureToys); // Undefined

// But you could ask your brother politely, to give it back.
askBrotherForClosuredToy('teddybear'); // Hooray, here it is, teddybear
askBrotherForClosuredToy('ball'); // The brother would not be able to find it.
askBrotherForClosuredToy(); // The brother gives you all the rest
askBrotherForClosuredToy(); // Nothing left in there

Как вы можете видеть, игрушки, оставшиеся в комнате, все еще доступны через брата, и независимо от того, закрыта ли комната , Здесь jsbin , чтобы поиграть с ним.

3
задан ewolden 22 March 2019 в 11:25
поделиться

1 ответ

Есть некоторые проблемы с тем, как вы сейчас используете форматтер. С одной стороны, вы не можете иметь два return в одной функции без каких-либо предложений 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/

Если вы хотите получить больше информации в подсказке, вы можете сделать:

[ 112]

Кроме того, вам нужно убедиться, что элементы 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/

0
ответ дан ewolden 22 March 2019 в 11:25
поделиться
Другие вопросы по тегам:

Похожие вопросы: