1

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

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

4

1 回答 1

2

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

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

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

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.
最后，您可以通过删除 a 来进一步简化它set()：

lines.hover(function(){
  this.tag = r.tag(this.x,this.y,this.value,160,10).insertBefore(this);
 }, function(){
  this.tag && this.tag.remove();
 });
于 2012-09-28T23:54:38.590 回答