npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

@antv/g2-plugin-slider

v2.1.1

Published

A datazoom slider plugin for G2.

Downloads

64,004

Readme

g2-plugin-slider

npm package NPM downloads Percentage of issues still open

A datazoom slider plugin for G2.

Install

首先,你先要确保 G2 已经加载。

如果你使用 npm,直接 npm i @antv/g2-plugin-slider。否则,直接下载最新脚本

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

const slider = new Slider({
  
});
<script src="http://unpkg.alipay.com/@antv/[email protected]"></script>
<script src="http://unpkg.alipay.com/@antv/[email protected]"></script>

<script>
const slider = new Slider({

});  
</script>

API Reference

Create an instance

new Slider({
  container: {string} | {HTMLElement},
  width?: {number} | {string},
  height?: {number},
  padding?: {object} | {number} | {array},
  xAxis: {string},
  yAxis: {string},
  start: {string} | {number},
  end: {string} | {number},
  startRadio?: {number},
  endRadio?: {number},
  minSpan: {number},
  maxSpan: {number},
  data: {array} | {dataview},
  fillerStyle?: {object},
  backgroundStyle?: {object},
  textStyle?: {object},
  handleStyle?: {object},
  backgroundChart?: {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)

必须声明,数据源。

  • startRadio

(number)

声明滑动条起始滑块的位置对应的范围边界值,值介于 0, 1

注意:startRadiostart 同时声明时,以 startRadio 为准。

  • endRadio

(number)

声明滑动条结束滑块的位置对应的范围边界值,值介于 0, 1

注意:endRadioend 同时声明时,以 endRadio 为准。

  • start

(number | string)

声明滑动条起始滑块的位置对应的数据值,默认为最小值。

  • end

(number | string)

声明滑动条结束滑块的位置对应的数据值,默认为最大值。

  • minSpan

(number)

筛选的最小范围限制,必须对应原始数据的范围,如果是时间,请使用时间戳。

  • maxSpan

(number)

筛选的最大范围限制,必须对应原始数据的范围,如果是时间,请使用时间戳。

  • scales

(object)

用于对 xAxisyAxis 字段进行列定义,用于同操作的图表中对应的列定义相同。

示例代码:

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

(function)

当滑动条滑块发生变化时,触发该回调函数,主要用于更新 ds 的状态量。该回调函数会提供一个参数,该参数是一个对象,包含如下属性:

onChange: (obj) => {
  const { startValue, endValue, startText, endText, startRadio, endRadio } = obj;
}
  • startValue 起点滑块当前对应的原始数据值,如果是 time 或者 timeCat 类型是,该值为时间戳,请注意。
  • endValue 终点滑块当前对应的原始数据值,如果是 time 或者 timeCat 类型是,该值为时间戳,请注意。
  • startText 起点滑块当前的显示文本值
  • endText 终点滑块当前的显示文本值
  • startRadio 起点滑块当前对应的范围边界值,值介于 0, 1
  • endRadio 终点滑块当前对应的范围边界值,值介于 0, 1

说明1:之所以区分 text 和 value,是因为大部分情况下用户会对数值进行格式化,所以在设置状态量和更新状态量时,需要保证前后数值类型的一致。 说明2:若数据并非有序排列,则可以通过 [startRadio, endRadio] 获取到滑块起点和终点选中的范围

  • 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() 销毁。