向折线图添加事件标记

Question

我使用 http://nvd3.org/examples/lineWithFocus.html

中的示例使用 nvd3 设置了取景器的折线图

我想让自定义事件在特定时间显示在图表上。例如，如果 x 轴的范围是上午 10 点到上午 11 点，我希望在 10.15、10.30 和 10.45 处有 circles/colored 个刻度，每个刻度表示不同的事件（比如 "event 1"、"event 2"和 "event 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
})

希望对您有所帮助。