智慧指標吸附

某些互動元素在圖表中可能相對較小,因此有時使用者難以精確點擊並進行其他操作,尤其是在行動裝置上。因此,在 Apache EChartsTM 5.4.0 中,我們引入了「智慧指標吸附」的概念。

從此版本開始,預設情況下,ECharts 會為行動圖表啟用指標吸附,並為非行動圖表停用。

如果需要在所有平台上啟用,可以在 init 中將 opt.useCoarsePointer 設定為 true 來實現;設定為 false 則會在所有平台上關閉。

吸附演算法

當滑鼠或觸控事件發生時,ECharts 會根據滑鼠或觸控的位置判斷是否與互動元素相交。如果是,則該元素是要互動的物件,這與此最佳化之前的邏輯相同。如果不是,則在一定範圍內找到最接近滑鼠或觸控位置的元素。

預設範圍為 44px(請參閱 W3C 標準),開發人員可以在 init 時透過 opt.pointerSize 設定此值。

更具體地說,ECharts 會在滑鼠或觸控位置周圍循環不同的角度和不同的半徑(在 opt.pointerSize 內),直到找到與其相交的元素。如果找到,則該元素被視為互動物件。

也就是說,如果一個元素在滑鼠或觸控位置的 opt.pointerSize 半徑內,則最接近的相交元素被視為互動物件。

效能

至於實作方面,我們先判斷滑鼠或觸控位置與所有互動元素的 AABB 邊界框之間是否存在交集,以便快速消除大部分不相交的元素。然後,我們對其餘元素執行精確的路徑交集判斷。因此,從使用者體驗的角度來看,幾乎沒有任何可察覺的效能損失。

對於具有大規模資料的圖表系列(即啟用 large: true 的長條圖、散佈圖等),將不會啟用吸附。

貢獻者 在 GitHub 上編輯此頁面

Ovilia Oviliaplainheart plainheart