Global

Methods

cloneOptNoReflow(optionsopt) → {Object}

Description:

• 深層複製Highcharts設定物件並關閉其內建reflow

  傳入Highcharts者須為複本, 避免Vue響應式物件與Highcharts內部共用參照; 函數(例如formatter、events)保留原參照 容器尺寸同步改由組件以w-component-vue之v-domresize(wsemi domDetect)處理, 故關閉Highcharts內建reflow(其以ResizeObserver觸發並防抖100ms)

Source:

• cloneOptNoReflow.mjs, line 22

Example

let o = { chart: { type: 'line' } }
let r = cloneOptNoReflow(o)
console.log(r.chart)
// => { type: 'line', reflow: false }
console.log(o.chart)
// => { type: 'line' }

Parameters:

Returns:

Type

Object

genComponent(name, Highcharts) → {Object}

Description:

• 產生Highcharts繪圖組件(Vue2)，取代vue-highcharts之genComponent

  vue-highcharts於options任一變更(含模板物件字面值每次重繪、資料點異動)皆重建整張圖，致圖例隱藏等使用者狀態遺失，且Highcharts每建一圖即新增一個不解除之ResizeObserver而隨更新累積； 本組件掛載時建立一次圖表，options變更以chart.update就地更新(內容相同之新物件不更新)，銷毀時destroy

  容器尺寸同步：以w-component-vue之v-domresize(wsemi domDetect，ResizeObserver，並處理元素消失與重建)偵測，以與Highcharts相同之方式量測容器並與圖表目前尺寸比較，不一致時於繪製前同步圖表尺寸，取代Highcharts內建reflow(防抖100ms，連續拖拉時不跟隨)； 容器隱藏(寬或高為0)或尺寸與圖表一致時不重繪，options.chart.reflow給false則不同步，options.chart.width、height有給者該維度固定

Source:

• genComponent.mjs, line 30

Parameters:

Returns:

Type

Object

getChartOptInfo(optionsopt) → {Object}

Description:

• 由Highcharts設定物件取得尺寸同步所需資訊

  reflow: options.chart.reflow給false時為false(使用者不要隨容器同步尺寸)，否則為true fixedWidth/fixedHeight: options.chart.width/height有給(非null、非undefined)時為true，Highcharts此時不使用容器該維度之尺寸 heightByWidth: options.chart.height為百分比字串(例如'60%')時為true，高度隨寬度變化

Source:

• getChartOptInfo.mjs, line 20

Example

console.log(getChartOptInfo({ chart: { height: '60%' } }))
// => { reflow: true, fixedWidth: false, fixedHeight: true, heightByWidth: true }

Parameters:

Returns:

Type

Object

getContainerSize(el) → {Object}

Description:

• 取得圖表容器可用尺寸，量測方式與Highcharts之Utilities.getStyle(寬高)相同，供v-domresize之getSize與圖表chartWidth、chartHeight比較

  寬: offsetWidth與scrollWidth取小者，若boundingClientRect寬度介於其與其減1之間則取整(小數寬度)，再扣除左右padding 高: offsetHeight與scrollHeight取小者，再扣除上下padding

Source:

• getContainerSize.mjs, line 10

Parameters:

Returns:

Type

Object

iniHighcharts() → {Object}

Description:

• 初始化Highcharts, 掛載各擴充模組, 並註冊w-highcharts之擴充標記與預設設定 因WHighchartsVue與WHighstockVue皆須使用, 且共用同一Highcharts實體, 故僅首次呼叫時進行初始化

Source:

• iniHighcharts.mjs, line 21

Returns:

Type

Object

isPropUnchanged(nv, ov) → {Boolean}

Description:

• 判斷prop新舊值是否視為未變更，供watcher略過無實質變化之觸發

  父組件於模板以物件字面值傳入prop時(例如:options="{ series: [...] }")，每次重繪皆產生新物件(參照不同)，故內容相同時視為未變更； 新舊值為同一物件時，代表由deep watcher偵測到物件內部異動(例如push資料點)，視為已變更

Source:

• isPropUnchanged.mjs, line 24

Example

console.log(isPropUnchanged({ title: { text: 'a' } }, { title: { text: 'a' } }))
// => true

let o = { title: { text: 'a' } }
console.log(isPropUnchanged(o, o))
// => false

Parameters:

Returns:

Type

Boolean