阅读(81)
赞(18)
在xAxis的坐标轴指示器中使用拖拽手柄
2017-09-08 14:37:21 更新
本节将在坐标轴指示器中添加一个拖拽手柄,并提供相关的手柄属性.
xAxis.axisPointer.handle | Object
为 xAxis 中的坐标轴指示器添加一个拖拽手柄,适用于触屏的环境。更多操作见 例子。
xAxis.axisPointer.handle.show | boolean
[ default: false ]
是否在 xAxis 中显示手柄。
当 show 设为 true 时显示手柄,并且 axisPointer 会一直显示。
xAxis.axisPointer.handle.icon | *
得到手柄的图标。
可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
参见 使用图片的例子
xAxis.axisPointer.handle.size | number, Array
[ default: 45 ]
对 xAxis 手柄的尺寸进行设置。
可以设置单值,如 45,也可以设置为数组:[width, height]。
xAxis.axisPointer.handle.margin | number
[ default: 50 ]
设置手柄与轴之间的距离。
注意,这里指的是手柄中心点和轴的距离。
xAxis.axisPointer.handle.color | string
[ default: '#333' ]
设置手柄显示的颜色。
xAxis.axisPointer.handle.throttle | number
[ default: 40 ]
手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。
xAxis.axisPointer.handle.shadowBlur | number
[ default: 3 ]
图形阴影的模糊大小。
该属性可以配合 shadowColor,shadowOffsetX,shadowOffsetY 一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
xAxis.axisPointer.handle.shadowColor | Color
[ default: #aaa ]
设置阴影的颜色。
xAxis.axisPointer.handle.shadowOffsetX | number
[ default: 2 ]
设置阴影在水平方向上的偏移距离。
xAxis.axisPointer.handle.shadowOffsetY | number
[ default: 0 ]
设置阴影在垂直方向上的偏移距离。