将事件标记添加到折线图

Question

我使用http://nvd3.org/examples/lineWithFocus.html上的示例设置了使用nvd3设置的finder折线图

我希望在特定时间在图表上显示自定义事件。例如，如果x轴的范围是从上午10点到上午11点，我希望在10.15,10.30和10.45处有圆圈/彩色刻度，表示不同的事件（例如“事件1”，“事件2”和“事件3” “）

有关如何执行此操作的任何建议或具有此类功能的图表的任何示例都会对我有所帮助

Answer 1

为将来需要此功能的人发帖：

我能够使用nvd3本身实现这一点。诀窍是拥有x轴兴趣点（在这种情况下为事件）并将它们作为数组提供给chart.xAxis.tickValues（）

然后，就我的情况而言，我修改了网格线的css：

.nv-x.nv-axis.nvd3-svg line {
        stroke:red;
}

然后，为了使滴答互动，我使用了

chart.lines.dispatch.on('elementClick', function(e) {
     //handle logic here
})

希望这有帮助。