slider
Previous
scrollbar
Next
title
Loading...
缩略轴(slider)是一种辅助看数据的组件,它将大量数据浓缩到一个轴上,既可以缩小宏观看数据全貌,又可以放大微观看数据的片段,同时还可以拖拽观察数据在一定区间内的演变。
缩略轴是值域数据的浓缩,它跟位置通道 x
, y
对应的比例尺的类型息息相关。一般来说时间类型上使用缩略轴的频率高,连续轴使用缩略轴频次低、分类轴几乎不会使用到缩略轴。
const config = {slider: {x: {}}}
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
values | 初始选区范围,位于 0 ~ 1 区间 | [number, number] | - |
slidable | 是否允许拖动选取和手柄 | boolean | true |
brushable | 是否启用刷选 | boolean | true |
style. padding | 迷你图的内边距 | number | number[] | 0 |
style. selectionFill | 缩略轴选区填充色 | string | - |
style. selectionFillOpacity | 缩略轴选区填充色透明度 | number | - |
style. selectionStroke | 缩略轴选区描边色 | string | – |
style. selectionStrokeOpacity | 缩略轴选区描边色透明度 | number | – |
style. trackFill | 缩略轴滑轨填充色 | string | – |
style. trackFillOpacity | 缩略轴滑轨填充色透明度 | number | – |
style. trackStroke | 缩略轴滑轨描边色 | string | – |
style. trackStrokeOpacity | 缩略轴滑轨描边色透明度 | number | – |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
handle | 是否显示拖动手柄 | boolean | true |
label | 是否显示拖动手柄文本 | boolean | true |
formatter | 拖动手柄标签格式化 | (value: number)=>string | - |
style. handleIconSize | 缩略轴手柄大小 | number | 10 |
style. handleIconFill | 缩略轴手柄填充色 | string | - |
style. handleIconFillOpacity | 缩略轴手柄填充色透明度 | number | - |
style. handleIconStroke | 缩略轴手柄描边色 | string | - |
style. handleIconStrokeOpacity | 缩略轴手柄描边色透明度 | number | - |
style. handleLabelFontSize | 缩略轴手柄标签字体大小 | number | - |
style. handleLabelFontWeight | 缩略轴手柄标签字体权重高 | number | string | - |
style. handleLabelStroke | 缩略轴手柄标签字体颜色 | string | - |
style. handleLabelStrokeOpacity | 缩略轴手柄标签字体透明度 | number | - |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
sparklineType | 迷你图类型:折线图、直方图 | line | column | line |
sparklineIsStack | 是否对数据进行堆叠 | boolean | false |
sparklineRange | 指定值范围,未指定时将使用 data 的最小值和最大值 | [number, number] | - |
sparklineColor | 指定颜色 | string | string[] | (index: number)=>string | - |
sparklineSmooth | 适用于折线图,平滑曲线 | boolean | false |
sparklineLineStroke | 适用于折线图,线条颜色 | string | - |
sparklineLineStrokeOpacity | 适用于折线图,线条透明度 | number | - |
sparklineLineLineDash | 适用于折线图,线条的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | [number,number] | - |
sparklineAreaFill | 适用于折线图,填充区域颜色 | string | - |
sparklineAreaFillOpacity | 适用于折线图,填充区域透明度 | number | - |
sparklineColumnFill | 适用于直方图,条形颜色 | string | - |
sparklineColumnFillOpacity | 适用于直方图,条形透明度 | number | - |
sparklineIsGroup | 适用于直方图,是否分组显示 | boolean | false |
sparklineSpacing | 适用于直方图,分组直方的间距 | number | 0 |
属性 | 描述 | 类型 |
---|---|---|
valuechange | 选区发生变化时触发,通过事件监听 | function(e) |
const config = {slider: {x: {}},onReady: (chart) => {const { canvas } = chart.getContext();const { document } = canvas;document.querySelector('.slider').addEventListener('valuechange', (evt) => {console.info(evt.detail);});}}