bizcharts-plugin-slier
A datazoom slider plugin for BizCharts base g2-plugin-slider.
Installation
Please make sure BizCharts has been already loaded.
npm
$ npm install bizcharts-plugin-slier
html
dev build
$ git clone https://github.com/alibaba/BizCharts.git$ cd BizCharts$ cd /plugin/slider$ npm install$ npm run build
dev demo
slider $ sudo vi /etc/hosts// add 127.0.0.1 localhostslider $ npm run demo// open in browser http://localhost:3510/
Usage
see demo
API Reference
Create an instance
<Slider = = = = = = = = = = = = =/>
Property
width
number | string
1、 设置 slider 组件的宽度,默认为 auto
,表示自适应容器的宽度。
height
number
2、 设置 slider 组件的高度,默认为 26,单位为 'px'。
padding
3、 设置 slider 组件所在画布 canvas 的内边距,用于与图表对齐(默认图表的 canvas 容器也是带了内边距),默认值同 G2 默认主题的 padding 相同,[ 20, 20, 95, 80 ]。
xAxis
string
4、 必须声明 Slider 是带有背景图表的滑动条组件,该字段用于声明该背景图表的横轴映射字段,同时该字段也是数据过滤字段。
yAxis
string
5、 必须声明 Slider 是带有背景图表的滑动条组件,该字段用于声明该背景图表的纵轴轴映射字段。
data
array | dataview
6、 必须声明,数据源。
start
number | string
7、 声明滑动条起始滑块的位置对应的数据值,默认为最小值。
end
number | string
8、 声明滑动条结束滑块的位置对应的数据值,默认为最大值。
scales
object
9、 用于对 xAxis
和 yAxis
字段进行列定义,用于同操作的图表中对应的列定义相同。
示例代码:
<Slider =/>
fillerStyle
object
10、 选中区域的样式配置,默认配置如下:
<Slider =/>
图中红框框选区域:
backgroundStyle
object
11、 slider 整体背景样式。
textStyle
object
12、 slider 辅助文本字体样式配置。
handleStyle
object
13、 slider 滑块的样式配置,可配置的属性如下:
<Slider =/>
backgroundChart
object
14、 slider 滑块的背景图表配置,可配置其图表类型以及颜色:
<Slider =/>
onChange
function
15、 当滑动条滑块发生变化时,触发该回调函数,主要用于更新 ds 的状态量。该回调函数会提供一个参数,该参数是一个对象,包含如下属性:
<Slider = />
startValue
起点滑块当前对应的原始数据值,如果是time
或者timeCat
类型是,该值为时间戳,请注意。endValue
终点滑块当前对应的原始数据值,如果是time
或者timeCat
类型是,该值为时间戳,请注意。startText
起点滑块当前的显示文本值endText
终点滑块当前的显示文本值
说明:之所以区分 text 和 value,是因为大部分情况下用户会对数值进行格式化,所以在设置状态量和更新状态量时,需要保证前后数值类型的一致。