Dojo Charting - Problem mit onmousemove über Chart PlotArea

Question

Ich versuche, ein Diagramm zu bauen, die unter dem Cursor eine vertikale Linie auf der X-Achse zieht. Mit dieser als Richtlinie:

http: //dojo-toolkit.33424.n3 .nabble.com / Charting-events-td40659.html

Ich verwende den folgenden Code zu fangen ‚mouseout‘ & ‚mousemove-‘ für das Diagramm Grundstück (schließt die Diagrammränder und Etiketten)

        chart = new dojox.charting.Chart2D("rating");
        chart.addPlot("default", {
            type: "Bubble"
        });

        chart.addPlot("grid", {
            type: "Grid",
            hMinorLines: true
        });

        var plotArea = chart.surface.rawNode.children[1];
        dojo.connect(plotArea, "onmousemove", this, this.showRatingHighlight);
        dojo.connect(plotArea, "onmouseout", this, this.hideRatingHighlight);

Im Allgemeinen funktioniert es wie erwartet. Ich habe aber auch ein Raster auf dem Diagramm gezeichnet, und immer dann, wenn die Maus, um die Gitterlinien übergeht, habe ich eine „mouseout“ Veranstaltung. Ich habe auch das mousemove- Ereignis verlieren, wenn die Maus über einen Marker geht mit einer toolTip / highlight Aktion statt.

F: Wie kann ich fangen mousemove- / mousemove- über die ‚PlotArea‘ ohne sie über die Gitternetzlinien oder Passermarken zu verlieren

F: Gibt es einen besseren Weg, um den ‚PlotArea‘ des Diagramms für die Berechnung der Offsets zu erhalten

Answer 1

A1: Overlay eine transparente div über ein Diagramm und fangen Ereignisse es zu benutzen. Caveat - höchstwahrscheinlich wird es blockiert Ereignisse Markierungen und Gitterlinien kommen

.

BTW, Ihr Beispiel geht davon aus, dass Sie nur SVG oder VML-Renderer verwenden. Allgemeinere Art und Weise zu fangen Ereignisse:

var h1 = surface.connect("onmouseout", f1);
var h2 = shape.connect("onmouseout", f2);
// ...
shape.disconnect(h2);
surface.disconnect(h1);

A2: Nach einem Diagramm ausgegeben wurde (und alle Geometrie berechnet), können Sie Dimensionen wie folgt extrahieren:

chart.dim; // {width, height} --- dimensions of the chart
chart.offsets; // {l, b, r, t} --- offsets from dimensions
var plotArea = {
  // in pixels relative to chart's top-left corner
  x: chart.offsets.l,
  y: chart.offsets.t,
  width:  chart.dim.width  - chart.offsets.l - chart.offsets.r,
  height: chart.dim.height - chart.offsets.t - chart.offsets.b
};

Mit dojo.position() oder einer ähnlichen Funktion die Position des Diagramms auf der Seite bekommen, wenn Sie absolute Seitenebene Koordinaten müssen.