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

问题描述

我尝试使用升级方案的

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发布'，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 =visDataoptions =visOptionevents =visEvent>< / vis-timeline> 
  

我还提供了



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

更新 plunker链接与一些CSS更改，但如何添加工具提示在背景区域的顶部，如何添加自定义标记如图像与工具提示？

更新

现在我已经通过同时使用AngularJS和jQuery实现了大部分的东西，但需要帮助将一切转换为AngularJS。仍在添加自定义时间的待处理和点击事件。

更新Plunker链接

解决方案

查看文档，您可以查看文档，

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

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

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

解决方案

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.

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