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

Question

我正在尝试使用 visjs 创建时间轴 View 升级场景(升级前、发布前和升级后)类似于下图。需要一些指针来创建图像中描绘的不同区域颜色，需要 CSS 将主标记更改为图像源，并且在悬停 slider (区域或标记)时它应该显示一些描述。

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 时间轴 HTML

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

我还提供了一个 plunker link对于这个问题。

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

已更新 plunker link进行了一些 CSS 更改，但如何在背景区域顶部添加工具提示以及如何添加自定义标记(如图中带有工具提示的图像所示)？

Update

现在我已经通过同时使用 AngularJS 和 jQuery 实现了大部分事情，但需要帮助才能将所有内容转换为 AngularJS。还在添加自定义时间待定和点击事件。

Updated Plunker link

Answer 1

查看文档，您可以看到文档说明了类的位置以及您需要为样式更新的内容。

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

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