インテリジェントポインタースナッピング

チャート内のいくつかのインタラクティブ要素は比較的小さいため、特にモバイルでは、ユーザーが正確にクリックして他の操作を行うことが難しい場合があります。そのため、Apache EChartsTM 5.4.0 では、「インテリジェントポインタースナッピング」の概念を導入しました。

このバージョンから、デフォルトで、ECharts はモバイルチャートに対してポインタースナッピングを有効にし、モバイル以外のチャートに対しては無効にします。

すべてのプラットフォームで有効にする必要がある場合は、initopt.useCoarsePointertrue に設定することで実現できます。false に設定すると、すべてのプラットフォームで無効になります。

スナッピングアルゴリズム

マウスまたはタッチイベントが発生すると、ECharts はマウスまたはタッチの位置に基づいて、インタラクティブな要素と交差しているかどうかを判断します。交差している場合は、その要素が操作対象となり、これはこの最適化前のロジックと同じです。そうでない場合は、一定の範囲内でマウスまたはタッチ位置に最も近い要素を探します。

デフォルトの範囲は 44px(W3C 標準を参照)で、開発者は init 時の opt.pointerSize を通じてこの値を設定できます。

より具体的には、ECharts は、マウスまたはタッチ位置の周囲のさまざまな角度と半径(opt.pointerSize 内)をループして、交差する要素が見つかるまで繰り返します。見つかった場合、その要素がインタラクティブなオブジェクトと見なされます。

つまり、要素がマウスまたはタッチ位置の opt.pointerSize 半径内にある場合、最も近くに交差した要素がインタラクティブなオブジェクトと見なされます。

パフォーマンス

実装に関しては、最初にマウスまたはタッチ位置とすべてのインタラクティブ要素の AABB バウンディングボックスとの交差を判断することで、交差しない要素のほとんどを迅速に排除します。次に、残りの要素に対して正確なパス交差判定を実行します。したがって、ユーザーエクスペリエンスの観点からは、認識できるパフォーマンスの低下はほとんどありません。

大規模なデータを持つチャートシリーズ(つまり、large: true が有効になっている棒グラフ、散布図など)の場合、スナッピングは有効になりません。

貢献者 GitHub でこのページを編集

Ovilia Oviliaplainheart plainheart