0

カーソルの下の 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 イベントも失われます。

Q: どうすれば、グリッド線やプロット マーカーで失われることなく、'plotArea' で mousemove/mousemove をキャッチできますか?

Q: オフセットを計算するためにチャートの「plotArea」を取得するより良い方法はありますか?

4

1 に答える 1

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()ページレベルの絶対座標が必要な場合は、または同様の関数を使用して、ページ上のチャートの位置を取得します。

于 2010-06-30T18:17:35.757 に答える