Dojo Charting - проблема с onmousemove над диаграммой plotArea

Я пытаюсь построить диаграмму, которая рисует вертикальную линию по оси X под курсором. Используя это в качестве ориентира:

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

Я использую следующий код, чтобы поймать «mouseout» и «mousemove» для области диаграммы (исключая поля и метки диаграммы)

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

Как правило, он работает так, как ожидалось. однако у меня также есть сетка, нарисованная на графике, и всякий раз, когда мышь проходит по линиям сетки, я получаю событие «mouseout». Я также теряю событие mousemove, когда мышь проходит над маркером с действием toolTip/highlight.

В: Как я могу поймать движение мыши/перемещение мыши над 'plotArea', не теряя его из-за линий сетки или маркеров графика?

В: Есть ли лучший способ получить 'plotArea' диаграммы для расчета смещений?


person michael    schedule 25.06.2010    source источник


Ответы (1)


A1: Наложите прозрачный div на диаграмму и перехватывайте события, используя его. Предупреждение, скорее всего, это заблокирует события, поступающие к маркерам и линиям сетки.

Кстати, в вашем примере предполагается, что вы используете только средства визуализации SVG или VML. Более общий способ захвата событий:

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

A2: После визуализации диаграммы (и расчета всей геометрии) вы можете извлечь размеры следующим образом:

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

Используйте dojo.position() или аналогичную функцию, чтобы получить положение диаграммы на странице, если вам нужны абсолютные координаты на уровне страницы.

person Eugene Lazutkin    schedule 30.06.2010