1

我正在使用背景区域示例。我有几个问题

  1. 在方法描述下的文档addCustomTime中，提到了将 id 添加为类名，但对该类的任何更改都没有生效。
  2. 如何将content背景区域中的文本与具有边框的背景区域居中对齐？
  3. 另外如何更改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 链接。

更新

我能够将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;
}
4

3 回答 3

3

这是适合您的解决方案。

1)但对此类的任何更改均未生效：

您对该类使用了错误的值，因此它没有反映。要更改颜色，您需要使用“背景颜色”等。请参阅下面的 CSS 代码。

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

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

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

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

3）另外，我如何更改 setCurrentTime(time) 标记的 css

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

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

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

希望这可以帮助你...

于 2015-08-03T06:58:20.130 回答
2

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

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

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

于 2015-08-03T09:35:02.960 回答
1

对上一条评论的回答：

根据 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

我想这可能会帮助你...

于 2015-08-06T17:27:15.533 回答