如何改变背景颜色，标记CSS，并在标记添加悬停文本？ [英] How to change background colors, marker CSS, and add hover text on marker?

问题描述

我想创建一个使用 visjs一个升级方案的（pre升级时间线视图，pre发布暨安培;升级后），类似下面的图像的东西。需要一些指针以创建不同的区域的颜色为在图像中所描绘的，CSS来主标记改变为图像源的，也对滑块（区域或标记）应显示一些描述的悬停

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

控制器

$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

Visjs timeline HTML

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

我也提供了针对此问题的 plunker链接。

<击> 更新同时，为什么我的plunker没有显示区域颜色的变化？

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

<击> 更新 plunker链接有一些CSS的变化，但如如何对背景区域顶部以及如何添加自定义标记提示添加图像与提示？

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?

更新

现在我已经通过同时使用这两种AngularJS和jQuery实现了大部分的东西，但需要帮助的一切转化为AngularJS。还是添加自定义时间挂起和点击事件。

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.

更新Plunker链接

推荐答案

看着你可以看到文档，他们拼出类，你需要更新的造型什么的文档。

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

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

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.

这篇关于如何改变背景颜色，标记CSS，并在标记添加悬停文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！