gRaphael Library - 具有多行、单独工具提示的折线图

Question

我这里有一个折线图：http://jsbin.com/ugexag/1

您可以在 jsbin 中看到，当您将鼠标悬停在一个“列”上时，每行的数据都会通过 hoverColumn() 函数显示在工具提示中。我很想找到一种方法让工具提示仅在单个数据点悬停时出现。我在 gRaphael 文档中没有看到任何关于此的内容。

Answer 1

linechart demo 的右下象限有一个这样的例子。 我将在今天晚些时候查看它并在此处更新我发现的内容。我怀疑hoverColumn 没有被使用，或者被创造性地使用，因为当我使用它时，我为悬停事件得到的y 是x 列上所有y 值的平均值。

更新：看了之后，我发现了你的发现，诀窍是只有一个演示列在两行中排成一行。如果您每年绘制一些图表，那么您的年份列肯定会在所有行上重复出现。所以这不太方便。

我测试的是（在链接的折线图演示的控制台中）：

var r = Raphael("holder");
var lines = r.linechart(330,250,300,220,[
   [ 1, 2, 3, 4, 5, 6, 7],[ 2, 3, 4, 5, 6, 7, 8],[9,10]
  ],[
   [10,10,10,10,10,10,10],[20,20,20,20,20,20,20],[5,25]
  ],{nostroke:false, axis:"0 0 1 1", symbol: "circle", smooth: true});
lines.hoverColumn(function(){
    this.tags=r.set();
    for(var i=0;i<this.y.length;i++){
      this.tags.push(r.tag(this.x,this.y[i],this.values[i],160,10).insertBefore(this));
    }
  }, function(){
    this.tags && this.tags.remove();
  });

这至少说明了问题所在。问题确实出在hoverColumn 和文档上。没有提到hover 实际上具有几乎相同的this 信息传递给它。所以你可以将最后一条语句重写为：

lines.hover(function({
  this.tags=r.set();
  this.tags.push(r.tag(this.x,this.y,this.value,160,10).insertBefore(this));
 }, function(){
  this.tags && this.tags.remove();
 });

请注意，value 现在是单数且不带索引，y 也不带索引。
最后，您可以通过删除set() 来进一步简化它：

lines.hover(function(){
  this.tag = r.tag(this.x,this.y,this.value,160,10).insertBefore(this);
 }, function(){
  this.tag && this.tag.remove();
 });