Хорошо, разговаривая с 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 , чтобы поиграть с ним.
Есть некоторые проблемы с тем, как вы сейчас используете форматтер. С одной стороны, вы не можете иметь два 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
blockquote>в консоли, потому что chartData2 находится в обратном порядке , В этом примере все выглядит хорошо, но более сложные примеры могут привести к тому, что диаграмма будет выглядеть не так, как вы ожидаете.
Для этого примера использование обратного достаточно просто:
data: chartData2.
reverse()
.map(function(row) {return {x: row.timestamp, y: row.value, somethingElse: row.somethingElse}})
Рабочий пример JSFiddle: https: // jsfiddle.net/ewolden/dq7L64jg/7/