antvis/g2-plugin-slider

Name: g2-plugin-slider

Owner: AntV team

Description: A datazoom slider plugin for G2.

Created: 2017-01-16 02:52:02.0

Updated: 2018-04-04 02:04:53.0

Pushed: 2018-04-04 02:04:52.0

Homepage:

Size: 1210

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

g2-plugin-slider

A datazoom slider plugin for G2.

Install

???????? G2 ?????

????? npm??? npm i @antv/g2-plugin-slider?????????????

rt G2 from '@antv/g2';
rt Slider from '@antv/g2-plugin-slider';

t slider = new Slider({

tml
ipt src="http://unpkg.alipay.com/@antv/g2@3.0.0-rc5.14"></script>
ipt src="http://unpkg.alipay.com/@antv/g2-plugin-slider@1.0.0-rc.1"></script>

ipt>
t slider = new Slider({

 
ript>

API Reference

Create an instance

Slider({
ntainer: {string} | {HTMLElement},
dth?: {number} | {string},
ight?: {number},
dding?: {object} | {number} | {array},
xis: {string},
xis: {string},
art: {string} | {number},
d: {string} | {number},
nSpan: {number},
xSpan: {number},
ta: {array} | {dataview},
llerStyle?: {object},
ckgroundStyle?: {object},
xtStyle?: {object},
ndleStyle?: {object},
ckgroundChart?: {object}

• container

(string | HTMLElement)

?? slider ? DOM ???????? DOM ? id ????????? html ?????

• width

(string | number)

?? slider ????????? auto????????????

• height

(number)

?? slider ????????? 26???? 'px'?

• padding

?? slider ?????? canvas ?????????????????? canvas ??????????????? G2 ????? padding ???[ 20, 20, 95, 80 ]?

• xAxis

(string)

???????? Slider ????????????????????????????????????????????????

• yAxis

(string)

???????? Slider ???????????????????????????????????

• data

(array | dataview)

?????????

• start

(number | string)

??????????????????????????

• end

(number | string)

??????????????????????????

• minSpan

(number)

???????????????????????????????????

• maxSpan

(number)

???????????????????????????????????

• scales

(object)

??? xAxis ? yAxis ??????????????????????????

?????

ales: {
[`${xAxis}`]: {
  type: 'time',
  mask: 'MM-DD'
}

• onChange

(function)

?????????????????????????? ds ??????????????????????????????????

Change: (obj) => {
const { startValue, endValue, startText, endText } = obj;

• startValue ?????????????????? time ?? timeCat ???????????????
• endValue ?????????????????? time ?? timeCat ???????????????
• startText ????????????
• endText ????????????

???????? text ? value????????????????????????????????????????????????????

• fillerStyle

(object)

?????????????????

fill: '#BDCCED',
fillOpacity: 0.3

?????????

• backgroundStyle

(object)

slider ???????

• textStyle

(object)

slider ???????????

• handleStyle

(object)

slider ?????????????????

img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // ??????????? data urls
width: 5,
height: 26

• backgroundChart

(object)

slider ???????????????????????

type: [ 'area' ], // ??????????????????
color: '#CCD6EC'

Functions

• slider.render()

slider.render() ???????????????

• slider.changeData()

slider.changeData(data) ??????

• slider.repaint()

slider.repaint() ???

• slider.destroy()

slider.destroy() ???