数据滑动条插件使用

简介如何使用 slider 组件1. 引入 slider 组件2. 创建 dom3. 生成 slider 组件并渲染一个简单的例子股票图简介用于数据范围的选择插件，尤其适用于大数据量的图表绘制，帮助用户更好得关注某一范围的数据可视化结果。 如下图所示： 如何使用 slider 组件1. 引入 slider 组件有两种引入 slider 组件的方式： （1）方式 1： 通过使用 标签引入。

 src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.2.1/slider.js">

（2）方式 2：npm 模块引入。 首先需要安装 slider 模块: tnpm install g2-plugin-slider，然后按照如下代码引入

import G2 from 'g2';
import 'g2-plugin-range';

引入之后，slider 组件会将自己自动注册到 G2.Plugin 上，即我们通过调用 G2.Plugin.slider 即可获取。

1. 创建 dom然后还需要创建一个展示 range 插件的 DOM 容器，如：

    id="slider">

1. 生成 slider 组件并渲染在正常绘制好图表之后，需要将 chart 对象和 slider 对象进行关联，最后由 slider 对象负责最后的渲染。 Example：

   // 绘制 chart 代码，此处省略
   // 创建 slider 对象
   var slider = new Slider({
   domId: 'slider', // 用于显示该组件的 dom 容器 ID
   width: 800, // 可选，指定滑块的宽度，如果不指定则默认同 chart 相同，如果 chart 自适应宽度，slider 也会自适应宽度
   height: 30, // 指定滑块的高度
   charts: [chart, chart1], // 滑块控制的 chart 对象，如果有多个使用数组，只有一个传入对象即可
   xDim: 'time', // 滑块控制的维度
   yDim: 'max' // 滑块背景图表对应的 Y 轴维度, 没有传入则默认不绘制背景图
   start: // 滑块开始值，用户未定义则使用默认值
   end: // 滑块结束值，用户未定义则使用默认值
   });
   slider.render(); // 渲染

注意： charts 属性支持传图 View 视图对象，但是传入的视图对象必须同属于一个 chart 对象。 一个简单的例子当用户没有设置 start end 两个参数时（即数据的选择范围），slider 会使用默认的选择范围。 完整的代码：

股票图

                    当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
                        上一篇:
                        下一篇:
            <div class="