hover - 请向我推荐一个使用 graphael 的 dotchart 悬停功能示例

Question

我正在尝试使用 gRaphael 创建一个点图（气泡图）。但是他们的文档并不清楚当用户悬停在点上时如何添加悬停效果。任何人都可以建议我一些例子或提供一些相同的帮助提示。提前谢谢。

Answer 1

感谢您的回复癌症贝罗。这是我的java脚本解决方案，

dotChart.hover(function(){//onmouseover
        dotChart.covers = r.set();                                
        dotChart.covers.push(r.tag(this.x, this.y, this.value , 0, 10).insertBefore(this));                
    }, function(){//onmouseout
        if(dotChart.covers!=null){
            dotChart.covers.remove();
        }
    });

这工作得很好:)

Answer 2

您必须使用 aDotChart.hoverDot() 来注册“点悬停侦听器”。以下是执行您提到的示例http://cancerbero.vacau.com/gwt/graphael4gwtGallery/?test=dot1的源代码。它是 Java 代码而不是 javascript！但我认为它可以帮助您了解 javascript 代码：

    double[] xs = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23};

    double[] ys = {7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7,
            6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6,
            5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
            4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
            3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
            2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};

    double[] data = {294, 300, 204, 255, 348, 383, 334, 217, 114, 33, 44, 26, 41, 39,
            52, 17, 13, 2, 0, 2, 5, 6, 64, 153, 294, 313, 195, 280, 365, 392, 340, 184,
            87, 35, 43, 55, 53, 79, 49, 19, 6, 1, 0, 1, 1, 10, 50, 181, 246, 246, 220,
            249, 355, 373, 332, 233, 85, 54, 28, 33, 45, 72, 54, 28, 5, 5, 0, 1, 2, 3,
            58, 167, 206, 245, 194, 207, 334, 290, 261, 160, 61, 28, 11, 26, 33, 46, 36,
            5, 6, 0, 0, 0, 0, 0, 0, 9, 9, 10, 7, 10, 14, 3, 3, 7, 0, 3, 4, 4, 6, 28, 24,
            3, 5, 0, 0, 0, 0, 0, 0, 4, 3, 4, 4, 3, 4, 13, 10, 7, 2, 3, 6, 1, 9, 33, 32, 6,
            2, 1, 3, 0, 0, 4, 40, 128, 212, 263, 202, 248, 307, 306, 284, 222, 79, 39, 26,
            33, 40, 61, 54, 17, 3, 0, 0, 0, 3, 7, 70, 199};

    String[] axisy = {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
    String[] axisx = {"12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"};

    DotOpts opts = new DotOpts();
    opts.setSymbol("o");
    opts.setMax(10);
    opts.setHeat(true);   
    opts.setAxis("0 0 1 1");
    opts.setAxisxlabels(axisx);
    opts.setAxisylabels(axisy);

    final DotChart c1 = getGPaper().dotchart(10, 10, 620, 260, xs, ys, data, opts);
    c1.hoverDot(new DotHoverListener() {

        @Override
        public void hoverOut(DotContext ctx) {
            if(tag!=null)
                tag.remove();
        }

        @Override
        public void hoverIn(DotContext ctx) {
                tag = (GShape) getGPaper().tag(ctx.getX(), ctx.getY(), ctx.getValue()+"", 0, ctx.getR()+2).
                        insertBefore(ctx).show();
        }
    });