Question

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

在addCustomTime方法描述中的doc中，提到id被添加为类名，但对此类的任何更改都不会生效。
如何将背景区域中的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）但此课程的任何更改均未生效：

您为该类使用了错误的值，因此不会反映出来。要更改颜色，您需要使用“背景颜色”等等..请参阅下面的CSS代码。

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

2）如何居中对齐内容文字

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

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

3）另外如何更改setCurrentTime（时间）标记的css

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

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

以下是更新的演示：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 插件。通过使用此插件的open事件，我们可以动态更新标题。

 $('.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时间轴上工作

3 个答案:

<强>更新