G2 交互語法之鼠標高亮圖形

G2 從 4.0 開始，將全部的交互行爲使用全新的交互語法實現，而且再也不默認內置，須要用戶顯式調用 chart.interaction() 接口。爲了幫助你們更好地理解、使用交互語法，咱們將會推出交互語法專題。

本文介紹的是最多見的交互圖形高亮（highlight，突出當前被聚焦的圖形元素，其餘圖形元素變暗）中的一種，經過鼠標高亮圖形，除了鼠標外，咱們還能夠經過關聯的組件高亮圖形，經過框選交互高亮圖形，這些都會將在後續章節向你們詳細介紹。

交互語法概覽

G2 的交互語法，是將交互拆解成多個環節，每一個環節由觸發和反饋組成。只要你能將交互用天然語言的方式描述出來，就可使用 G2 的交互語法進行組合搭建出交互行爲。在這裏咱們再一塊兒溫習下 G2 交互語法中對於交互環節的定義，更詳細的內容能夠閱讀可視化交互語法。

G2 將每個交互環節拆解成如下步驟:

• showEnable 示能：表示交互能夠進行；
• start 開始：交互開始；
• processing 持續：交互持續；
• end 結束：交互結束；
• rollback 回滾：取消交互，恢復到原始狀態；

下面咱們就開始鼠標高亮圖形的交互語法組裝吧，爲了幫助你們理解，每一個交互行爲咱們都會以天然語言 + 交互語法的形式向你們闡述。咱們以柱狀圖的高亮爲例，實現交互的過程當中咱們會使用 G2 內置的 Action，Action 的定義和列表參考 G2 配置交互。

單個圖形元素高亮

柱狀圖，單個圖形元素高亮交互效果，demo 地址：連接

交互的語言描述

1. 鼠標移動到圖形元素上，觸發圖形元素的高亮效果（移動到的圖形變亮，其餘圖形變暗）；
2. 鼠標從圖形元素上移出，圖形元素的高亮效果消失。

G2 交互語法

registerInteraction('element-highlight', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight:reset' }],
});
複製代碼

咱們使用了 'element-highlight' Action[3]，同時咱們用到了兩個方法：

• highlight: 高亮圖形；
• reset：恢復受影響的圖形。

交互語法解釋：

• 當鼠標 mouseenter 進入 element（圖表的圖形）時，觸發 element-highlight 的 highlight 方法；
• 當鼠標 mouseleave 離開 element 時，觸發 element-highlight 的 reset 方法。

咱們還能夠將交互行爲應用到其餘圖表上，如（但不限於）面積圖。

層疊面積圖，單個圖形元素高亮交互效果，demo 地址：連接

多個圖形元素高亮

柱狀圖，多個圖形元素高亮交互效果

咱們也能夠經過上面的 Action 實現多個圖形的高亮，咱們依然首先用天然語言來描述交互，而後用交互語法進行組裝。

交互的語言描述

• 鼠標移動到圖形元素上，觸發圖形元素的高亮效果
• 雙擊畫布，清除全部高亮的圖形

咱們看到這個交互同上面交互的差異在於不處理鼠標移出，而經過雙擊清理全部圖形的高亮效果。

G2 交互語法

registerInteraction('element-highlight', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight:highlight' }],
  rollback: [{ trigger: 'dblclick', action: 'element-highlight:clear' }],
});
複製代碼

咱們用了 'element-highlight' Action 的兩個方法：

• highlight: 高亮圖形
• clear: 清理全部圖形的高亮

咱們還能夠將交互行爲應用到其餘圖表上。

色塊圖，多個圖形元素高亮交互效果

根據顏色高亮圖形元素

層疊柱狀圖，根據顏色高亮圖形元素交互效果 1，demo 地址：連接

交互的語言描述

1. 鼠標移動到圖形上，全部同當前圖表同一個顏色的圖形高亮
2. 鼠標從圖形上移出，對應圖形的高亮效果消失

G2 交互語法

registerInteraction('element-highlight-by-color', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-color:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-color:reset' }],
});
複製代碼

同上面的交互相似，只是咱們換了另外一個內置的交互 Action：'element-highlight-by-color'，其方法同 'element-highlight'。

爲了起到更好的關聯、強調做用，咱們還能夠改變高亮的反饋形態：在圖形高亮的同時，把全部相同顏色的的圖形鏈接起來，以下圖所示。

層疊柱狀圖，根據顏色高亮圖形元素交互效果 2，demo 地址：連接

這些圖形的鏈接也是用交互語法組合而成的：

registerInteraction('interval-link', {
  start: [{trigger: 'interval:mouseenter', action: 'element-link-by-color:link'}],
  end: [{trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink'}]
});
複製代碼

咱們還能夠將交互行爲應用到其餘圖表上。

散點圖，根據顏色高亮圖形元素交互效果 1

高亮羣組圖形元素

高亮羣組圖形元素交互效果，demo 地址：連接

交互的語言描述

1. 鼠標移動到圖形元素上，全部同當前圖表同一個羣組的圖形元素高亮
2. 鼠標從圖形元素上移出，對應圖形元素的高亮效果消失

G2 交互語法

registerInteraction('element-highlight-by-x', {
  start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-x:highlight' }],
  end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-x:reset' }],
});
複製代碼

同上面的交互相似，只是咱們換了另外一個內置的交互：'element-highlight-by-x'，其方法同 element-highlight。

咱們還能夠將交互行爲應用到其餘圖表上。

色塊圖，高亮羣組圖形元素交互效果

總結

從這篇文章中你能夠看到交互語法的靈活，能夠自由地對觸發的事件和反饋 Action 進行組裝，目前咱們已經內置了 30+ 種 Action，也在源源不斷地添加新的 Action，但願 G2 4.0 能讓你再也不爲可視化過程當中的交互而煩惱。後面咱們還會經過更多更復雜的交互實例來向你們介紹交互語法，幫助你們認識到交互語法的完備性，同時也幫助你們更容易地配置出高質量的交互。

參考資料

1. 可視化交互語法
2. G2 內置交互反饋
3. element-highlight
4. element-highlight-color
5. element-highlight-x

🥰🥰🥰舒適提示：也能夠直接訪問 Observable，可直接體驗、編輯本篇全部示例。