交互語法之組件高亮

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

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

交互語法概覽

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

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

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

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

圖表組件高亮

目前 G2 內置的圖表組件包括：座標軸、圖例、Annotation（靜態圖形標註）、Tooltip 以及 Slider 滑動條 。在高亮交互中，比較常見的就是圖例項的高亮以及座標軸文本的高亮，以下圖所示：

圖例高亮

座標軸文本高亮

交互的語言描述

G2 的座標軸、圖例均可以進行高亮，因爲二者在高亮時的交互一致，因此能夠用統一的天然語言來描述：

1. 鼠標進入列表項（圖例項/座標軸文本），列表項高亮
2. 鼠標離開列表項（圖例項/座標軸文本），取消高亮

G2 交互語法

因爲圖例項和座標軸文本項各自有獨立的名稱 (name) ，因此能夠分別寫出二者高亮的交互語法：

圖例項高亮

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

座標軸文本高亮

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

交互語法的說明：
咱們使用了通用的一個 Action list-highlight這個 Action能夠高亮全部列表類組件的選項，這個 Action 支持的方法有：

• highlight: 高亮選項
• reset：取消高亮的選項，與當前觸發源相關
• clear：清除
• toggle：切換高亮或者取消高亮

這個 list-highlight 的 Action 比較抽象，咱們能夠基於這個 Action 擴展出兩個具體的 Action:

• legend-item-highlight 圖例項高亮
• axis-label-highlight 座標軸文本高亮

這兩個 Action 的方法同 list-highlight 徹底一致，咱們在下面將使用他們。

關聯圖形高亮

交互的語言描述

1. 鼠標移動到圖例項上時，圖例項高亮，對應的圖形高亮
2. 鼠標離開圖例項時，圖例項的高亮取消，對應圖形的高亮取消

G2 交互語法

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

你也能夠經過更改引發圖形高亮的觸發源，將觸發對象改爲座標軸的文本，上面的語言描述僅須要把圖例項改爲座標軸文本便可：

1. 鼠標移動到座標軸文本上時，座標軸文本高亮，對應的圖形高亮
2. 鼠標離開座標軸文本時，座標軸文本的高亮取消，對應圖形的高亮取消

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

交互語法的說明：
這兩個交互中咱們在前面僅僅高亮組件的步驟中增長了 element-highlight 高亮圖形的 Action，這個 Action 也有幾個幾乎同樣方法：

• highlight: 高亮圖形
• reset: 取消高亮
• clear: 清除全部高亮
• toggle：切換高亮狀態

組件致使的圖形高亮不只僅能夠影響單個圖形，還能夠對關聯的圖形元素進行影響。看下面的示例：

圖形關聯組件高亮

移動到圖形上時，也可讓組件高亮，使用不一樣的 Action 會獲得不一樣的結果，若是咱們的目的是移動到一個圖形上時，讓全部的列表類組件都高亮對應的選項，語言描述和交互語法能夠寫成一個。

交互的語言描述

1. 鼠標移動到一個圖形上時，對應的全部列表類的組件（座標軸和圖例）上列表項高亮
2. 鼠標移出一個圖形時，對應的全部列表類組件的列表項取消高亮

G2 交互語法

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

更多的交互

在前面的文章 《鼠標高亮圖形》 中，介紹過按照顏色高亮圖形和按照 x 高亮圖形，能夠同組件的高亮一塊兒配合使用。

咱們能夠調用 3 個 interaction：

chart.interaction('element-highlight-by-color');
chart.interaction('legend-highlight');
chart.interaction('element-legend-highlight');
複製代碼

前面兩個 interaction G2 已經內置，也在 《鼠標高亮圖形》講解過，最後一個改寫一下上面的交互，僅支持圖例項高亮便可：

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

總結

圖表的圖形關聯組件進行高亮僅須要考慮組件自身的高亮、圖形自身的高亮和互相的影響便可，可是在實際的項目中會有不少組合方式，這邊文章僅僅是介紹了高亮（highlight)，讀者能夠將高亮擴展到 active 和 selected，交互語法的實現是徹底同樣的，這也是交互語法的魅力所在。

參考資料

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