在xAxis的坐標(biāo)軸指示器中使用拖拽手柄

2018-09-08 15:01 更新

本節(jié)將在坐標(biāo)軸指示器中添加一個(gè)拖拽手柄,并提供相關(guān)的手柄屬性.

xAxis.axisPointer.handle   |   Object

為 xAxis 中的坐標(biāo)軸指示器添加一個(gè)拖拽手柄,適用于觸屏的環(huán)境。更多操作見(jiàn) 例子

xAxis.axisPointer.handle.show   |   boolean

[ default: false ]

是否在 xAxis 中顯示手柄。

當(dāng) show 設(shè)為 true 時(shí)顯示手柄,并且 axisPointer 會(huì)一直顯示。

xAxis.axisPointer.handle.icon   |   *

得到手柄的圖標(biāo)。

可以通過(guò) 'image://url' 設(shè)置為圖片,其中 url 為圖片的鏈接,或者 dataURI。

可以通過(guò) 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式,不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊,而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見(jiàn) SVG PathData??梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

參見(jiàn) 使用圖片的例子

xAxis.axisPointer.handle.size   |   number, Array

[ default: 45 ]

對(duì) xAxis 手柄的尺寸進(jìn)行設(shè)置。

可以設(shè)置單值,如 45,也可以設(shè)置為數(shù)組:[width, height]。

xAxis.axisPointer.handle.margin   |   number

[ default: 50 ]

設(shè)置手柄與軸之間的距離。

注意,這里指的是手柄中心點(diǎn)和軸的距離。

xAxis.axisPointer.handle.color   |   string

[ default: '#333' ]

設(shè)置手柄顯示的顏色。

xAxis.axisPointer.handle.throttle   |   number

[ default: 40 ]

手柄拖拽時(shí)觸發(fā)視圖更新周期,單位毫秒,調(diào)大這個(gè)數(shù)值可以改善性能,但是降低體驗(yàn)。

xAxis.axisPointer.handle.shadowBlur   |   number

[ default: 3 ]

圖形陰影的模糊大小。

該屬性可以配合 shadowColor,shadowOffsetX,shadowOffsetY 一起設(shè)置圖形的陰影效果。

示例:

{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}

xAxis.axisPointer.handle.shadowColor   |   Color

[ default: #aaa ]

設(shè)置陰影的顏色。

xAxis.axisPointer.handle.shadowOffsetX   |   number

[ default: 2 ]

設(shè)置陰影在水平方向上的偏移距離。

xAxis.axisPointer.handle.shadowOffsetY   |   number

[ default: 0 ]

設(shè)置陰影在垂直方向上的偏移距離。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)