dojo 图表 - onmousemove 在图表 plotArea 上的问题答案

【问题标题】：dojo charting - problem with onmousemove over chart plotAreadojo 图表 - onmousemove 在图表 plotArea 上的问题
【发布时间】：2010-06-25 08:53:56
【问题描述】：

我正在尝试构建一个图表，该图表在光标下的 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”事件。当鼠标经过带有 toolTip/highlight 操作的标记时，我也会丢失 mousemove 事件。

问：如何在“plotArea”上捕捉 mousemove/mousemove 而不会丢失网格线或绘图标记？

问：有没有更好的方法来获取图表的“plotArea”来计算偏移量？

【问题讨论】：

标签： dojo dojox.charting

【解决方案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() 或类似函数来获取图表在页面上的位置。

【讨论】：