event$

• 在 OrbCharts 的設計當作，決大多數透過資料映射繪製出來的圖形，都能透過監聽滑鼠事件取得資料及相關資訊，最主要的事件包含：

  • mouseover
  • mousemove
  • mouseout
  • click

• 無論是哪一個 Plugin 綁定的事件，會依照 6 種資料格式能夠取得一致的資料格式。

TIP

透過 Playground 頁面當中，可以透過 Preview 介面操作圖表，並從 Console 介面取得監聽事件傳出的資料。

語法

監聽事件的語法是

event$.subcribe(event => {
  // your code
})

範例：

chart.event$.subcribe(event => {
  console.log(event)
})

Series

• 型別：EventSeries

interface EventSeries {
  type: 'series'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumTypeMap<T> | null
  data: ComputedDataTypeMap<T>
  tween?: number
  series: ComputedDatumTypeMap<'series'>[]
  seriesIndex: number
  seriesLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'series' | 'datum' | 'none' 有效

interface ComputedDatumSeries {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  seriesIndex: number
  seriesLabel: string
  seq: number
}

Grid

• 型別：EventGrid

interface EventGrid {
  type: 'grid'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumGrid | null
  data: ComputedDatumGrid[][]
  tween?: number
  gridIndex: number
  series: ComputedDatumGrid[]
  seriesIndex: number
  seriesLabel: string
  group: ComputedDatumGrid[]
  groupIndex: number
  groupLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'series' | 'group' | 'datum' | 'none' 有效

interface ComputedDatumGrid {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  gridIndex: number
  seriesIndex: number
  seriesLabel: string
  groupIndex: number
  groupLabel: string
}

MultiGrid

• 型別：EventMultiGrid

interface EventMultiGrid {
  type: 'multiGrid'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumGrid | null
  data: ComputedDatumGrid[][]
  tween?: number
  gridIndex: number
  series: ComputedDatumGrid[]
  seriesIndex: number
  seriesLabel: string
  group: ComputedDatumGrid[]
  groupIndex: number
  groupLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'series' | 'group' | 'datum' | 'none' 有效

interface ComputedDatumGrid {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  gridIndex: number
  seriesIndex: number
  seriesLabel: string
  groupIndex: number
  groupLabel: string
}

MultiValue

• 型別：EventMultiValue

interface EventMultiValue {
  type: 'multiValue'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumMultiValue | null
  data: ComputedDatumMultiValue[][]
  tween?: number
  category: ComputedDatumMultiValue[]
  categoryIndex: number
  categoryLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'category' | 'datum' | 'none' 有效

interface ComputedDatumMultiValue {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  datumIndex: number
  value: number[]
  color: string
  categoryIndex: number
  categoryLabel: string
}

Relationship

• 型別：EventRelationship

interface EventRelationship {
  type: 'relationship'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedNode | null
  data: ComputedDataRelationship
  tween?: number
  category: ComputedNode[]
  categoryIndex: number
  categoryLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'category' | 'datum' | 'none' 有效

interface ComputedNode {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  categoryIndex: number
  categoryLabel: string
}

interface ComputedDataRelationship {
  nodes: ComputedNode[]
  edges: ComputedEdge[]
}

Tree

• 型別：EventTree

interface EventTree {
  type: 'tree'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDataTree
  data: ComputedDataTree
  tween?: number
  category: ComputedDataTree
  categoryIndex: number
  categoryLabel: string
}

詳細型別

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // 在此資料類別中僅 'category' | 'datum' | 'none' 有效

interface ComputedDataTree {
  level: number
  seq: number
  children?: ComputedDataTree[]
}