How to change background colors, marker CSS, and add hover text on marker?

问题

I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.

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>

I am also providing a plunker link for this problem.

Update Also why my plunker does not show region color changes?

Updated plunker link with some CSS changes, but how to add tooltip on top of background areas and how to add custom markers as shown in image with tooltips?

Update

Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.

Updated Plunker link

回答1:

Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.

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

Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.

来源：https://stackoverflow.com/questions/31722383/how-to-change-background-colors-marker-css-and-add-hover-text-on-marker

标签

javascript

css

angularjs

timeline

vis.js