Timeticker css 在 visjs 时间轴中不工作

Question

我正在使用 background areas example。我有几个问题

在 addCustomTime 方法描述下的 doc 中提到将 id 添加为 classname 但对此 class 的任何更改都不会生效。
如何将背景区域中的 content 文本居中对齐，背景区域有边框？
另外，如何为 setCurrentTime(time) 标记更改 css？

我的css

.vis-current-time {
  color: black !important;
  border: 2px;
  cursor: hand;
}

.milestone-1 {
  color: green !important;
  border: 2px;
  cursor: hand;
}

.vis-item.vis-background.positive {
  background-color: rgba(0, 0, 200, 0.2);
  cursor: hand;
}

.vis-item.vis-background.negative {
  background-color: rgba(255, 0, 0, 0.2);
  cursor: hand;
}

.vis-item-overflow.vis-item-content {
  left: auto !important;
  text-align: center !important;
  color: #ff0000 !important;
}

这是我的问题plunker link。

更新

我可以将 content 文本居中对齐。我也更新了我的 plunker，但边框没有生效

#visualization .vis-item.vis-background.positive .vis-item-content {
  width: 100%;
  text-align: center !important;
  border: 2px;
}
#visualization .vis-item.vis-background.negative .vis-item-content {
  width: 100%;
  text-align: center !important;
}

Answer 1

这是适合您的解决方案。

1) 但是对此 class 的任何更改都没有生效：

您为 class 使用了错误的值，因此它没有反映出来。要更改颜色，您需要使用 "background-color" 等等。请参阅下面的 CSS 代码。

.milestone-1 {
  background-color: green;
  width: 5px;
  /* border: 2px solid red; */
}

2) 如何居中对齐内容文本

要使文本居中对齐，请为“.vis-item-overflow”应用 CSS class。无需添加任何其他样式。

.vis-item-overflow {
  text-align: center;
}

3) 另外我如何更改 setCurrentTime(time) 标记

的 css

要为当前时间标记应用样式，您可以使用“.vis-current-time”class，如下所示：

.vis-current-time{
  background-color: black;
  width: 3px;
}

这是更新后的 Demo：http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

希望这对您有所帮助...

Answer 2

要为整个框应用工具提示，您需要添加以下 CSS 样式：

.vis-background .vis-item-content {
    z-index: 11111;
    height: 100%;
    width: 100%;
}

查看演示：http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

Answer 3

对上一条评论的回答：

根据 vis，我们无法动态更新工具提示。他们最初根据用户输入立即更新标题，因此我们无法动态更新。

作为解决方法，我们可以从元素动态更新工具提示。根据之前的更新，我们已经使用了工具提示的 tooltipster 插件。通过使用这个插件的打开事件我们可以动态更新标题。

 $('.tooltip .vis-item-content').tooltipster({
    functionBefore: function(origin, continueTooltip) {
      var currentTitle = origin.data("tooltipsterInitialTitle");
      origin.tooltipster("content", currentTitle + " --- Time :: " + new Date().toLocaleTimeString());
      continueTooltip();
    }
 });

演示： http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

更新：

根据您的评论，您需要更新每一秒的时间。因此，您可以按特定时间间隔更新时间，直到工具提示可见。

  var timer;
  $('.tooltip .vis-item-content').tooltipster({
    position: 'bottom',
    functionBefore: function(origin, continueTooltip) {
      continueTooltip();
      updateTooltip(origin);
      timer = setInterval(function(){ updateTooltip(origin); }, 1000);
    },
    functionAfter: function() {
      clearInterval(timer);
    }
  });

  function updateTooltip(origin) {
    var newTooltip = getTooltipContent(origin);
    $(origin.tooltipster('elementTooltip')).children(".tooltipster-content").html(newTooltip);
  }
  function getTooltipContent(origin) {
    var currentTitle = origin.data("tooltipsterInitialTitle");
    return currentTitle + " --- Time :: " + new Date().toLocaleTimeString();
  }

更新演示：http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

我想这可能对你有帮助...

Timeticker css 在 visjs 时间轴中不工作

Timeticker css not working in visjs timeline

javascript

html

css

plunker

vis.js

更新：

Timeticker css 在 vi​​sjs 时间轴中不工作

Timeticker css not working in visjs timeline

javascript

html

css

plunker

vis.js

更新：

Timeticker css 在 visjs 时间轴中不工作