Question

您可以在jsbin中看到，当您将鼠标悬停在一个“列”上时，每行的数据都会通过hoverColumn（）函数显示在工具提示中。我希望找到一种方法，只有在单个数据点悬停时才能显示工具提示。我在gRaphael docs中没有看到任何相关内容。

Answer 1

在linechart demo的右下象限中有一个这样的例子。我今天晚些时候看看它，并在这里用我发现的东西更新。我怀疑hoverColumn未被使用，或者被创造性地使用，因为当我使用它时，我为悬停事件获得的y是{y值的平均值x 1}}列。

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

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

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();
 });

gRaphael Library - 包含多行，单个工具提示的折线图

1 个答案: