javascript - rickshaw.js 在工具提示中显示附加数据

Question

我有一个启用了工具提示的 Richshaw 图(Rickshaw.Graph.HoverDetail)。我需要在其中显示更多信息，而不仅仅是系列 y 值。它可以用 Richshaw 来完成还是我必须使用底层 d3 函数。

Answer 1

抱歉回复晚了。是的，您实际上可以使用 Rickshaw.Graph.HoverDetail 在人力车工具提示中渲染您想要的任何内容。

举例来说，您有一个函数需要输入 series、x 和 y 并假设我们有另一个数组与名为 dates 的 x 数组长度相同:

var hoverDetail = new Rickshaw.Graph.HoverDetail({
  graph: graph,
  formatter: function(series, x, y) {
    var content = '<span class="graph-dates">'+dates[x]+'</span><br><span class="graph-price">'+series.name+": "+currency+parseInt(y) +'</span>';
    return content;
  }
});

代码在悬停时呈现，详细说明了所选 x 点的日期以及该日期的价格。

在 documentation的人力车图，您可以找到更多信息。

Here这是人力车的实际例子。