以角度nvd3折线图显示当前时间
Show current time in angular nvd3 line chart
我想将当前时间的垂直"Now"标记添加到使用angular-nvd3-directives实现的工作时间序列折线图中。有点像这样:https://i.stack.imgur.com/X95T2.jpg
以前,我使用纯d3.js构建了这个图表,并使其发挥了作用。因此,我试图将我现有的解决方案移植到这样的指令中:
myApp.directive( 'nowMarker', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
var line = d3.svg.line()
.interpolate("basis")
// ####### this cannot work #######
.x(function (d) { return x(d.t); })
.y(function (d) { return y(d.value); });
// ################################
element.children()[0].append('svg:path')
.attr("class", "NOW")
.attr('d', line(scope.nowData))
.attr('stroke', '#14022B')
.attr('stroke-width', '1px')
.attr('stroke-dasharray', ('5,5'))
.attr('fill', 'none');
}
};
});
这就是我被卡住的地方。我不知道如何访问angularjs-nvd3-直线图的x和y刻度。
HTML是:
<nvd3-line-chart nowMarker ...>
</nvd3-line-chart>
在我的图表控制器中,我有:
var now = new Date();
$scope.nowData = [
{name: "NOW", t: now, value: 0},
{name: "NOW", t: now, value: 100}
];
没有错误消息,只是什么都没发生。
非常感谢您的帮助。谢谢Bennet
如果其他人发现这很有用:
最后,我在图表数据中添加了一个"NOW"系列,并为其指定了特定的颜色。
var tNow = new Date();
var sNow = {
key: "NOW",
values: [
[tNow, 0],
[tNow, max]
],
color: '#FFFFFF'
};
相关文章:
- javascript函数将当前时间显示为html选择标记的预选值
- Javascript:如何以毫秒为单位将时间显示为天:小时:分钟
- 使用 Javascript 根据星期几和一天中的时间显示 HTML 元素
- 脚本 - 不同的时间显示不同的内容
- Javascript时间显示来自计算机的上午/下午(快速调整)
- 日期时间倒计时,删除小数,并在每个类别中保留时间显示时间
- 如何仅在指定时间显示文本
- 按星期几和一天中的时间显示不同的背景图像
- 使用不同的持续时间显示一个接一个的图像,中间有一个空白屏幕
- 根据当前加载时间显示链接
- 我想根据它们的时间和持续时间显示json中的元素,并且间隔被settimeout打断
- Javascript在特定时间显示隐藏元素
- 有x轴上的时间显示最近24小时从当前时间
- 鼠标悬停在多个折线图上,相同的x(时间)显示不同的y(价格)
- 在没有偏移时,以本地时间显示数据库中的UTC datetime
- 如何循环在不同时间显示问候语的函数
- 根据一天中的时间显示不同的复选框
- 根据服务器日期和时间显示和隐藏
- JavaScript错误的时间显示在两个时间之间
- Web应用程序中的时区敏感日期和时间显示