bizcharts-plugin-slider 的奇淫技巧

bizcharts-plugin-slider是bizcharts的一个扩展插件，可以从官网示例来一睹它的芳容。

顾名思义，Slider。官方的示例功能很全：可伸缩，可滑动，可在Slider里看到图表的趋势...... 伊思噶系，然鹅，巴特，真实的项目需求可能只是简单的：数据多的时候，只要有个水平滚动条来左右滑动即可。而不需要其它花里胡哨的，下面是最终做好的效果：

要定制这样的Slider，需要的只有三步：

1. 去掉可调整伸缩的滑块
2. 去除背景图表
3. 不在Slider上显示x轴信息
4. （可选）美化滑块

去掉可调整伸缩的滑块

handleStyle={{
    // 没有左右的Slider图片，自然就没有了伸缩的交互了
    img: null
}}

去除背景图表

backgroundChart={{
    type: ['area'],
    // 主要是这里，弄个白色覆盖掉背景图表
    color: '#ffffff'
}}

不在Slider上显示x轴信息

scales={{
    // 这里的 xAxis 是指x轴字段的名称
    [xAxis]: {
        formatter: () => '',
    },
}}

（可选）美化滑块

fillerStyle={{
    fill: '#BDCCED',
    fillOpacity: 0.6,
}}

下面附上完整的代码，可以将以下代码贴（覆盖）到这里运行下：

import React from 'react';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
} from 'bizcharts@3.5.8';
import DataSet from '@antv/data-set';
import Slider from 'bizcharts-plugin-slider';

const ds = new DataSet({
  state: {
    start: 0,
    // 初始化结束的比例
    end: 0.4,
  },
}); 
class Basiccolumn extends React.Component {
    // 必须有此 onChange 方法，来做 ds 的 setState 操作
    // 下面的 dv 才会受到影响 
    handleSliderChange = e => {
        console.log(e);
        const { startRadio, endRadio } = e;
        ds.setState('start', startRadio);
        ds.setState('end', endRadio);
    };
  render() {
    const data = [
      {
        year: '1951 年',
        sales: 38,
      },
      {
        year: '1952 年',
        sales: 52,
      },
      {
        year: '1956 年',
        sales: 61,
      },
      {
        year: '1957 年',
        sales: 145,
      },
      {
        year: '1958 年',
        sales: 48,
      },
      {
        year: '1959 年',
        sales: 38,
      },
      {
        year: '1960 年',
        sales: 38,
      },
      {
        year: '1962 年',
        sales: 38,
      },
    ];
    const cols = {
      sales: {
        tickInterval: 20,
      },
    };
    const dv = ds.createView('origin').source(data);
    // 重中之重，你以为只要把各种参数传给 Slider
    // Slider 就能 work，那还是太天真了
    // DataSet 也是 bizcharts 的一个重要配件，利用它来做数据筛选
    // 从而实现 Slider 想要的数据筛选
    dv.transform({
      type: 'filter',
      callback(item, idx) {
        const radio = idx / data.length;
        return radio >= ds.state.start && radio <= ds.state.end;
      },
    });
    return (
      <div>
        <Chart height={400} padding='auto' data={dv} scale={cols} forceFit>
          <Axis name="year" />
          <Axis name="sales" />
          <Tooltip
            crosshairs={{
              type: 'y',
            }}
          />
          <Geom type="interval" position="year*sales" />
        </Chart>
        <Slider
            data={data}
            padding={60}
            xAxis="year"
            yAxis="sales"
            // 设置开始的比例
            startRadio={ds.state.start}
            // 设置结束的比例
            endRadio={ds.state.end}
            onChange={this.handleSliderChange}
            scales={{
                // Slider x轴不显示文本信息
                year: {
                        formatter: () => '',
                }
            }}
            // 去除背景图表
            backgroundChart={{
                type: ['area'],
                color: '#ffffff',
            }}
            // 美化滑块
            fillerStyle={{
                fill: '#BDCCED',
                fillOpacity: 0.6,
            }}
            // 去掉滑块（禁止伸缩）
            handleStyle={{
                img: null,
            }}
        />
      </div>
    );
  }
}

ReactDOM.render(<Basiccolumn />, mountNode);