Dojo Charting -OnmouseMove上のChartPlotareaの問題

StackOverflow https://stackoverflow.com/questions/3116722

  •  29-09-2019
  •  | 
  •  

質問

カーソルの下のx軸に垂直線を描くチャートを構築しようとしています。これをガイドラインとして使用します。

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

次のコードを使用して、チャートプロットエリアの「マウスアウト」＆「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);

一般的に、それは期待どおりに機能します。ただし、チャートにグリッドが描かれています。マウスがグリッドラインを通過するたびに、「マウスアウト」イベントが表示されます。また、マウスがツールチップ/ハイライトアクションを配置してマーカーを通過すると、Mousemoveイベントを失います。

Q：グリッドラインやプロットマーカーの上でそれを失うことなく、「plotarea」の上でMousemove/Mousemoveを捕まえるにはどうすればよいですか？

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

役に立ちましたか？

解決

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top