Как я могу наложить изображения на сопоставимую временную шкалу?

Question

Я использую виджет временной шкалы сравнения , чтобы создать временную шкалу, и мне нужно добавить изображения на временную шкалу. Изображения, вероятно, будут располагаться внизу «полосы», но, скорее всего, мне придется устанавливать «верхний» и «левый» стили для каждого изображения (мы хотим поместить изображения в некоторые пустые области, чтобы они выглядели лучше).

Я знаю, что могу изменить «значок» события, и это установит изображение, но оно всегда находится на вершине полосы, и изображение мешает другим событиям, и так как эти изображения не являются технически событиями, я надеваю не думаю, что они должны быть частью базы данных событий (сейчас все это в Google Doc, что делает изменение графика действительно легким).

Я пытался добавить новые div к div временной шкалы, манипулируя DOM (jQuery, appendTo), но это никогда не работает. , , не уверен, что это z-index или что-то еще.

Я исследовал использование "декоратора" и, возможно, создание собственного кастомного декоратора, но, мне кажется, кто-то ДОЛЖЕН это сделать раньше, и я упускаю что-то простое. Идеи?

Answer 1

Я понял! По сути, я создал свой собственный «декоратор». Во-первых, это пригодилось, чтобы иметь возможность добавлять декораторы после первоначального рендеринга. Я нашел это в группе сравнения Google.

Timeline._Band.prototype.addDecorator = function(decorator) {
    this._decorators.push(decorator);
    decorator.initialize(this,this._timeline);
    decorator.paint();
}

Затем, глядя на источник временной шкалы для декораторов, я скопировал код для Timeline.PointHighlightDecorator и сделал свой собственный. , называется Timeline.PointPicture на данный момент.