1 | ![](https://img.shields.io/badge/language-react-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![NPM Package](https://img.shields.io/npm/v/bizcharts-plugin-slider.svg)](https://www.npmjs.com/package/bizcharts)[![NPM Downloads](https://img.shields.io/npm/dm/bizcharts-plugin-slider.svg)](https://npmjs.org/package/bizcharts)
|
2 |
|
3 | # bizcharts-plugin-slider
|
4 |
|
5 | A datazoom slider plugin for BizCharts base g2-plugin-slider.
|
6 |
|
7 | ## Installation
|
8 |
|
9 | Please make sure BizCharts has been already loaded.
|
10 |
|
11 | ### npm
|
12 | ```sh
|
13 | $ npm install bizcharts-plugin-slider
|
14 | ```
|
15 |
|
16 | ### html
|
17 | ```html
|
18 | <script src=https://unpkg.com/bizcharts-plugin-slider@2.0.0/umd/bizcharts-plugin-slider.js"> </script>
|
19 | ```
|
20 |
|
21 | ### dev build
|
22 | ```sh
|
23 | $ git clone https://github.com/alibaba/BizCharts.git
|
24 | $ cd BizCharts
|
25 | $ cd /plugin/slider
|
26 | $ npm install
|
27 | $ npm run build
|
28 | ```
|
29 |
|
30 | ### dev demo
|
31 |
|
32 | ```sh
|
33 | slider $ sudo vi /etc/hosts
|
34 | // add 127.0.0.1 localhost
|
35 | slider $ npm run demo
|
36 | // open in browser http://localhost:3510/
|
37 | ```
|
38 |
|
39 | ## Usage
|
40 | see [demo](https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/other/rain-and-flow)
|
41 |
|
42 |
|
43 | ## API Reference
|
44 |
|
45 | ### Create an instance
|
46 |
|
47 | ```jsx
|
48 | <Slider
|
49 | width={{number} | {string}}
|
50 | height={number}
|
51 | padding={{object} | {number} | {array}}
|
52 | xAxis={string}
|
53 | yAxis={string}
|
54 | start={{string} | {number}}
|
55 | end={{string} | {number}}
|
56 | data={{array} | {dataview}}
|
57 | fillerStyle={object}
|
58 | backgroundStyle={object}
|
59 | textStyle={object}
|
60 | handleStyle={object}
|
61 | backgroundChart={object}
|
62 | />
|
63 | ```
|
64 | ### Property
|
65 |
|
66 | #### 1、 `width` *number | string*
|
67 |
|
68 | 设置 slider 组件的宽度,默认为 `auto`,表示自适应容器的宽度。
|
69 |
|
70 | #### 2、 `height` *number*
|
71 |
|
72 | 设置 slider 组件的高度,默认为 26,单位为 'px'。
|
73 |
|
74 | #### 3、 `padding`
|
75 |
|
76 | 设置 slider 组件所在画布 canvas 的内边距,用于与图表对齐(默认图表的 canvas 容器也是带了内边距),默认值同 BizCharts 默认主题的 padding 相同,[ 20, 20, 95, 80 ]。
|
77 |
|
78 | #### 4、 `xAxis` *string*
|
79 |
|
80 | **必须声明** Slider 是带有背景图表的滑动条组件,该字段用于声明该背景图表的横轴映射字段,同时该字段也是数据过滤字段。
|
81 |
|
82 | #### 5、 `yAxis` *string*
|
83 |
|
84 |
|
85 | **必须声明** Slider 是带有背景图表的滑动条组件,该字段用于声明该背景图表的纵轴轴映射字段。
|
86 |
|
87 | ### 6、 `data` *array | dataview*
|
88 |
|
89 | **必须声明**,数据源。
|
90 |
|
91 | #### 7、 `start` *number | string*
|
92 |
|
93 |
|
94 | 声明滑动条起始滑块的位置对应的数据值,默认为最小值。
|
95 |
|
96 | #### 8、 `end` *number | string*
|
97 |
|
98 | 声明滑动条结束滑块的位置对应的数据值,默认为最大值。
|
99 |
|
100 | #### 9、 `scales` *object*
|
101 |
|
102 | 用于对 `xAxis` 和 `yAxis` 字段进行列定义,用于同操作的图表中对应的列定义相同。
|
103 |
|
104 | 示例代码:
|
105 |
|
106 | ```jsx
|
107 | <Slider
|
108 | scales={{
|
109 | [`${xAxis}`]: {
|
110 | type: 'time',
|
111 | mask: 'MM-DD'
|
112 | }
|
113 | }}
|
114 | />
|
115 | ```
|
116 |
|
117 | #### 10、 `fillerStyle` *object*
|
118 |
|
119 | 选中区域的样式配置,默认配置如下:
|
120 |
|
121 | ```jsx
|
122 | <Slider
|
123 | fillerStyle={{
|
124 | fill: '#BDCCED',
|
125 | fillOpacity: 0.3
|
126 | }}
|
127 | />
|
128 | ```
|
129 |
|
130 | 图中红框框选区域: <img src="https://gw.alipayobjects.com/zos/rmsportal/iYFxRgDjRSiCyVPFozik.png" style="width: 59%;">
|
131 |
|
132 | #### 11、 `backgroundStyle` *object*
|
133 |
|
134 | slider 整体背景样式。
|
135 |
|
136 | #### 12、 `textStyle` *object*
|
137 |
|
138 | slider 辅助文本字体样式配置。
|
139 |
|
140 | #### 13、 `handleStyle` *object*
|
141 |
|
142 | slider 滑块的样式配置,可配置的属性如下:
|
143 |
|
144 | ```jsx
|
145 | <Slider
|
146 | handleStyle={{
|
147 | img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // 可以使图片地址也可以是 data urls
|
148 | width: 5,
|
149 | height: 26
|
150 | }}
|
151 | />
|
152 | ```
|
153 |
|
154 | #### 14、 `backgroundChart` *object*
|
155 | slider 滑块的背景图表配置,可配置其图表类型以及颜色:
|
156 |
|
157 | ```jsx
|
158 | <Slider
|
159 | backgroundChart={{
|
160 | type: [ 'area' ], // 图表的类型,可以是字符串也可是是数组
|
161 | color: '#CCD6EC'
|
162 | }}
|
163 | />
|
164 | ```
|
165 |
|
166 | #### 15、 `onChange` *function*
|
167 |
|
168 | 当滑动条滑块发生变化时,触发该回调函数,主要用于更新 ds 的状态量。该回调函数会提供一个参数,该参数是一个对象,包含如下属性:
|
169 |
|
170 | ```jsx
|
171 | <Slider
|
172 | onChange = {(obj) => {
|
173 | const { startValue, endValue, startText, endText } = obj;
|
174 | }}
|
175 | />
|
176 | ```
|
177 |
|
178 | * `startValue` 起点滑块当前对应的原始数据值,如果是 `time` 或者 `timeCat` 类型是,该值为时间戳,请注意。
|
179 | * `endValue` 终点滑块当前对应的原始数据值,如果是 `time` 或者 `timeCat` 类型是,该值为时间戳,请注意。
|
180 | * `startText` 起点滑块当前的显示文本值
|
181 | * `endText` 终点滑块当前的显示文本值
|
182 |
|
183 | > 说明:之所以区分 text 和 value,是因为大部分情况下用户会对数值进行格式化,所以在设置状态量和更新状态量时,需要保证前后数值类型的一致。
|
184 |
|
\ | No newline at end of file |