Question

我正在尝试构建一个图表，该图表在光标下绘制一条垂直线到X轴。以此为指导：

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

我使用以下代码来捕捉'mouseout'和＆amp; '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事件。

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

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

Answer 1

A1：在图表上叠加透明div并使用它捕获事件。警告 - 很可能它会阻止事件进入标记和网格线。

BTW，您的示例假定您仅使用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()或类似功能获取图表在页面上的位置。

道场图表 - onmousemove在图表plotArea上的问题

1 个答案: