Wie ändere ich Hintergrundfarben, markiere CSS und füge Hovertext auf Marker hinzu?

Question

Ich versuche, eine Timeline-Ansicht mit visjs eines Upgrade-Szenario (Pre Upgrade, Pre-Release & Post Upgrade) etwas ähnliches wie das Bild unten zu erstellen. Brauchen Sie einige Zeiger, um verschiedene Regionsfarben zu erstellen, wie im Bild dargestellt, CSS, um den Hauptmarker zu einer Bildquelle zu ändern, und auch beim Schweben des Sliders (Region oder Marker) sollte eine Beschreibung angezeigt werden.

CSS

.vis-item.vis-background.preupgrade { 
    background-color: rgba(0, 153, 255, 0.2); 
} 

.vis-item.vis-background.prerelease { 
    background-color: rgba(102, 204, 255, 0.2); 
} 

.vis-item.vis-background.postupgrade { 
    background-color: rgba(204, 204, 255, 0.2); 
} 

-Controller

$scope.visData = new vis.DataSet([ 
    {start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'}, 
    {start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'}, 
    {start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'} 
]); 
    $scope.visOption = { 
    editable: false, 
    autoResize: true, 
    moveable: true, 
    margin: { 
     item: 10, 
     axis: 20 
    } 
}; 

Visjs Timeline HTML

<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline> 

ich auch einebin Bereitstellungfür dieses Problem.

Update Auch warum mein Plunker zeigt keine Region Farbveränderungen?

Aktualisiert plunker link mit einigen CSS Änderungen, aber wie Tooltip auf den Hintergrundbereiche hinzufügen und benutzerdefinierte Markierungen hinzufügen, wie mit Tooltips in Bild gezeigt?

aktualisieren

Jetzt habe ich die meisten Dinge erreicht, indem beide AngularJS und jQuery gleichzeitig verwenden, aber Hilfe brauchen, alles zu AngularJS konvertieren. Das Hinzufügen einer benutzerdefinierten Zeit ist noch ausstehend und klicken Sie auf Ereignis.

Updated Plunker link

Answer 1

in der Dokumentation Suchen Sie Dokumentation für wo sie buchstabieren die Klassen, um zu sehen, was Sie für das Styling zu aktualisieren.

http://visjs.org/docs/timeline/#Editing_Items

Auch haben sie Veranstaltungen für onmoving und solche so sollten Sie in der Lage sein gebaut zu ziehen und animieren in, aber ich konnte kein klares Beispiel dafür in ihren docs finden.