如何更改背景颜色,标记CSS以及在标记上添加悬停文本？

Question

我正在尝试使用升级方案(升级前,预发布和升级后)的visjs创建时间轴视图,类似于下图.需要一些指针来创建不同的区域颜色,如图中所示,CSS将主标记更改为图像源,还有悬停的滑块(区域或标记),它应该显示一些描述.

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);
}

调节器

$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时间线HTML

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

我也为这个问题提供了一个plunker链接.

更新为什么我的plunker不显示区域颜色变化？

更新 了一些CSS更改的plunker链接,但是如何在背景区域上添加工具提示以及如何使用工具提示添加自定义标记(如图所示)？

更新

现在我通过同时使用AngularJS和jQuery来完成大部分工作,但需要帮助将所有内容转换为AngularJS.仍在添加自定义时间待定和点击事件.

更新了Plunker链接

Answer 1

查看文档，您可以看到文档，其中详细说明了您需要更新样式的类。

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

此外，他们还有 onmoving 等事件，因此您应该能够内置拖动和动画，但我在他们的文档中找不到明确的示例。