bizcharts-plugin-slier

A datazoom slider plugin for BizCharts based g2-plugin-sliber.

bizcharts-plugin-slier

A datazoom slider plugin for BizCharts base g2-plugin-slider.

Installation

Please make sure BizCharts has been already loaded.

npm

- --- ------- ----------------------

html

 ------- -------------------------------------------------------------------------------------------------------

dev build

- --- ----- ----------------------------------------
- -- ---------
- -- --------------
- --- -------
- --- --- -----

dev demo

------ - ---- -- ----------
-- --- --------- ---------
------ - --- --- ----
-- ---- -- ------- ----------------------

Usage

see demo

API Reference

Create an instance

-------
  --------------- - ---------
  ---------------
  ----------------- - -------- - --------
  --------------
  --------------
  --------------- - ---------
  ------------- - ---------
  ------------- - -----------
  --------------------
  ------------------------
  ------------------
  --------------------
  ------------------------
--

Property

1、 width number | string

设置 slider 组件的宽度，默认为 auto，表示自适应容器的宽度。

2、 height number

设置 slider 组件的高度，默认为 26，单位为 'px'。

3、 padding

设置 slider 组件所在画布 canvas 的内边距，用于与图表对齐（默认图表的 canvas 容器也是带了内边距），默认值同 G2 默认主题的 padding 相同，[ 20, 20, 95, 80 ]。

4、 xAxis string

必须声明 Slider 是带有背景图表的滑动条组件，该字段用于声明该背景图表的横轴映射字段，同时该字段也是数据过滤字段。

5、 yAxis string

必须声明 Slider 是带有背景图表的滑动条组件，该字段用于声明该背景图表的纵轴轴映射字段。

6、 data array | dataview

必须声明，数据源。

7、 start number | string

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

8、 end number | string

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

9、 scales object

用于对 xAxis 和 yAxis 字段进行列定义，用于同操作的图表中对应的列定义相同。

示例代码：

------- 
    ---------
      ------------- -
        ----- -------
        ----- -------
      -
    --
--

10、 fillerStyle object

选中区域的样式配置，默认配置如下：

------- 
  --------------
    ----- ----------
    ------------ ---
  --
--

图中红框框选区域：

11、 backgroundStyle object

slider 整体背景样式。

12、 textStyle object

slider 辅助文本字体样式配置。

13、 handleStyle object

slider 滑块的样式配置，可配置的属性如下：

  ------- 
  --------------
    ---- ---------------------------------------------------------------------- -- ----------- ---- ----
    ------ --
    ------- --
  --
--

14、 backgroundChart object

slider 滑块的背景图表配置，可配置其图表类型以及颜色：

------- 
  ------------------
  ----- - ------ -- -- ------------------
  ------ ---------
  --
--

15、 onChange function

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

------- 
-------- - ------ -- -
  ----- - ----------- --------- ---------- ------- - - ----
--
--
  • startValue 起点滑块当前对应的原始数据值，如果是 time 或者 timeCat 类型是，该值为时间戳，请注意。
  • endValue 终点滑块当前对应的原始数据值，如果是 time 或者 timeCat 类型是，该值为时间戳，请注意。
  • startText 起点滑块当前的显示文本值
  • endText 终点滑块当前的显示文本值

说明：之所以区分 text 和 value，是因为大部分情况下用户会对数值进行格式化，所以在设置状态量和更新状态量时，需要保证前后数值类型的一致。

HomePage

https://alibaba.github.io/BizCharts/

Repository

git+https://github.com/alibaba/BizCharts.git

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056c5881e8991b448e5d97

阅读全文

猜你喜欢

  • npm 包 botscript 使用教程

    Botscript 是一个适用于在 Slack、微信和 Discord 中创建聊天机器人的开源 JavaScript 库。配置简单、易于使用，且具备深度定制和扩展性。

    3 年前
  • npm 包 guided.e.learning 使用教程

    前言 guided.e.learning 是一个 npm 包，提供了前端 e-learning 的基本功能。它可以帮助开发人员快速构建教育类网站的前端框架，包括用户注册登录、课程管理、章节管理、考试、...

    3 年前
  • npm 包 infore-cli 使用教程

    简介 infore-cli 是一款基于 Node.js 和 npm 包管理器的命令行工具，它可以帮助前端工程师快速搭建项目框架和生成前端代码。使用 infore-cli，我们可以完成以下工作： 创建...

    3 年前
  • npm 包 js-flow-ctrl 使用教程

    在前端开发中，控制流程是非常重要的一方面，它决定了我们的程序进行到哪一步，以及在哪一个条件下会执行哪些代码。js-flow-ctrl 是一个非常实用的 npm 包，可以帮助我们更好地掌控代码执行流程。

    3 年前
  • NPM 包 tux-addon-admin 使用教程

    随着前端技术的不断发展，NPM 包已经成为了前端开发不可或缺的一部分。其中，tux-addon-admin 是一款非常实用的 npm 包，本文将详细介绍这款包的使用教程。

    3 年前
  • npm 包 censorify_nishit 使用教程

    在前端开发中，我们经常需要对用户输入的内容进行敏感词过滤和替换，而手动编写过滤函数是一项繁琐且重复的工作，因此我们可以使用一个名为 censorify_nishit 的 npm 包来简化这一过程。

    3 年前
  • npm 包 npm-test-energy 使用教程

    随着前端技术的不断发展，npm 包已经成为了前端开发的必备工具之一。而 npm-test-energy 就是一款非常有用的 npm 包，它可以帮助我们进行前端项目的能量测试，评估项目在不同环境下的表现...

    3 年前
  • npm 包 tpaging 使用教程

    前言 在前端开发中，我们经常需要对一堆数据进行分页展示，这时候分页组件就是必不可少的工具。tpaging 是一个简单易用且高度可定制的分页包，使用 npm 包安装后能够在我们的项目中快速集成分页组件。

    3 年前
  • npm 包 homebridge-delayed-switches 使用教程

    什么是 homebridge-delayed-switches homebridge-delayed-switches 是一款基于 homebridge 平台的 npm 包，可为智能家居添加延迟功能。

    3 年前
  • npm 包 ngcreditcard 使用教程

    在前端开发中，表单验证是必不可少的一部分。而信用卡表单验证是其中一个重要的验证部分。在 Angular 中，我们可以使用 ngcreditcard npm 包来进行信用卡表单验证。

    3 年前
  • npm 包 oftn-l10n 使用教程

    在前端开发中，国际化是一个非常重要的需求。为了解决这个问题，我们可以使用现成的 npm 包 oftn-l10n。这个 npm 包可以提供一些非常有用的工具和函数，帮助我们快速实现国际化功能。

    3 年前
  • npm 包 date-utility 使用教程

    #npm 包 date-utility 使用教程 在前端开发中，日期和时间处理是非常常见和重要的操作。因此，很多开发者在开发过程中都会需要使用一些日期和时间处理的库或者工具。

    3 年前
  • npm 包 find-or-create-uuid 使用教程

    在前端开发中，UUID（通用唯一标识符）是很常用的一种标识方式。而 Find-or-Create-UUID 这个 npm 包可以帮助我们更方便地生成 UUID，并确保其唯一性。本文将介绍如何使用该包。

    3 年前
  • npm 包 alex-lib1 使用教程

    1. 简介 npm 是一个 JavaScript 包管理器，它允许前端开发人员使用并共享在 npm 上发布的模块。而 alex-lib1 则是一个基于 npm 发布的前端库，旨在为开发人员提供一些常用...

    3 年前
  • npm 包 three-ziploader 使用教程

    前言 three-ziploader 是一个基于 Three.js 的 npm 包，它可以帮助开发者快速加载 zip 压缩包中的模型。这篇文章将介绍如何使用 three-ziploader 这个 np...

    3 年前
  • npm 包 Vue-gtagjs-directive 使用教程

    在 Vue.js 的开发过程中，我们经常需要使用 Google Analytics 进行统计分析。为了简化和加速这个过程，我们可以使用 npm 包 Vue-gtagjs-directive。

    3 年前
  • npm 包 vnng-auth 使用教程

    npm 包 vnng-auth 使用教程 在现代的 web 开发中，用户认证和授权是一个必不可少的部分。它可以保护我们的应用程序，限制未授权访问，确保用户身份验证和授权。

    3 年前
  • npm 包 fahrenheit 使用教程

    在前端开发中，我们经常需要将温度在华氏度和摄氏度之间进行转换。npm 包 fahrenelsius 是一个用于华氏度和摄氏度转换的工具包。本文将详细讲解 fahrenelsius 的使用教程。

    3 年前
  • npm 包 yosql 使用教程

    在 web 开发中，我们经常需要从数据库中获取数据并进行处理。为了简化这个过程，npm 社区中出现了很多优秀的包，其中 yosql 便是其中之一。yosql 是基于 SQLException 和 Jd...

    3 年前
  • npm 包 js-weapon 使用教程

    在 web 前端开发中，使用 npm 包已经成为了一种非常普遍的做法。js-weapon 是一个很棒的 npm 包，它提供了一系列的工具和方法，可以帮助前端开发者更高效地开发 web 应用程序。

    3 年前

相关推荐

    暂无文章