使用前提:

  1. Slider 组件作为 G2 的交互插件,必须在 G2 引入的前提下使用!

  2. 为了做到纯粹和解耦,Slider 组件是完全基于数据的筛选操作,需要配合 DataSet 以及状态量使用,当滑动条发生变化时,通过定义 onChange 更新状态量,来达到图表的自动更新。

创建 Slider 的方式如下:

  1. new Slider({
  2. container: {string} | {HTMLElement},
  3. width?: {number} | {string},
  4. height?: {number},
  5. padding?: {object} | {number} | {array},
  6. xAxis: {string},
  7. yAxis: {string},
  8. start: {string} | {number},
  9. end: {string} | {number},
  10. data: {array} | {dataview},
  11. fillerStyle?: {object},
  12. backgroundStyle?: {object},
  13. textStyle?: {object},
  14. handleStyle?: {object},
  15. backgroundChart?: {object}
  16. });

属性

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)

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

scales

(object)

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

示例代码:

  1. scales: {
  2. [`${xAxis}`]: {
  3. type: 'time',
  4. mask: 'MM-DD'
  5. }
  6. }

onChange

(function)

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

  1. onChange: (obj) => {
  2. const { startValue, endValue, startText, endText } = obj;
  3. }
  • startValue 起点滑块当前对应的原始数据值,如果是 time 或者 timeCat 类型是,该值为时间戳,请注意。

  • endValue 终点滑块当前对应的原始数据值,如果是 time 或者 timeCat 类型是,该值为时间戳,请注意。

  • startText 起点滑块当前的显示文本值

  • endText 终点滑块当前的显示文本值

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

fillerStyle

(object)

选中区域的样式配置,默认配置如下:

  1. {
  2. fill: '#BDCCED',
  3. fillOpacity: 0.3
  4. }

图中红框框选区域: Slider 滑块插件 - 图1

backgroundStyle

(object)

slider 整体背景样式。

textStyle

(object)

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

handleStyle

(object)

slider 滑块的样式配置,可配置的属性如下:

  1. {
  2. img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // 可以使图片地址也可以是 data urls
  3. width: 5,
  4. height: 26
  5. }

backgroundChart

(object)

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

  1. {
  2. type: [ 'area' ], // 图表的类型,可以是字符串也可是是数组
  3. color: '#CCD6EC'
  4. }

方法

render

slider.render() 渲染组件,即将其绘制到页面上。

changeData

slider.changeData(data) 更新数据源。

  • 示例

点击更新数据

  1. $.getJSON('/assets/data/top2000-disc.json',function(data) {
  2. const ds = new DataSet({
  3. state: {
  4. from: 1970,
  5. to: 1990
  6. }
  7. });
  8. const dv = ds.createView();
  9. dv.source(data)
  10. .transform({
  11. type: 'filter',
  12. callback: obj => {
  13. return obj.release >= ds.state.from && obj.release <= ds.state.to;
  14. }
  15. });
  16. const chart = new G2.Chart({
  17. container: 'mountNode',
  18. forceFit: true,
  19. height: 350,
  20. animate: false,
  21. padding: [ 20, 100, 60 ]
  22. });
  23. chart.source(dv, {
  24. count: {
  25. alias: 'top2000 唱片总量'
  26. },
  27. release: {
  28. alias: '唱片发行年份'
  29. }
  30. });
  31. chart.interval().position('release*count').color('#e50000');
  32. chart.render();
  33. const slider = new Slider({
  34. container: document.getElementById('slider'),
  35. padding: [ 20, 100, 60 ],
  36. start: ds.state.from,
  37. end: ds.state.to,
  38. data,
  39. xAxis: 'release',
  40. yAxis: 'count',
  41. scales: {
  42. release: {
  43. formatter: (val) => {
  44. return parseInt(val, 10);
  45. }
  46. }
  47. },
  48. backgroundChart: {
  49. type: 'interval',
  50. color: 'rgba(0, 0, 0, 0.3)'
  51. },
  52. onChange: ({ startText, endText }) => {
  53. // !!! 更新状态量
  54. ds.setState('from', startText);
  55. ds.setState('to', endText);
  56. }
  57. });
  58. slider.render();
  59. // 更新数据源示例
  60. $('#changeData').click( ev => {
  61. const newData = data.slice(10, 90);
  62. ds.setState('from', 2000);
  63. ds.setState('to', 2015);
  64. dv.source(newData); // dv 重新装载数据即可
  65. slider.start = 2000;
  66. slider.end = 2015;
  67. slider.changeData(newData);
  68. });
  69. });

repaint

slider.repaint() 重绘。

destroy

slider.destroy() 销毁。