如何更改背景颜色，标记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 link。

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

已更新 plunker link并进行了一些CSS更改，但如何在背景区域上添加工具提示以及如何使用工具提示添加自定义标记，如图所示？

  

更新

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

Updated Plunker link

Answer 1

查看文档，您可以查看文档，了解这些文档将类更新为样式所需更新的内容。

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

此外，他们还有onmoving等事件，所以你应该能够内置拖动和动画，但我在他们的文档中找不到一个明确的例子。