taro-f2 icon indicating copy to clipboard operation
taro-f2 copied to clipboard

chart.interaction('pan'),设置了无法平移

Open czb128abc opened this issue 5 years ago • 0 comments

import Taro, { Component, Config } from '@tarojs/taro';
import { View } from '@tarojs/components';
import data from '../../data/sroll-line.js';
import { F2Canvas } from 'taro-f2';

const F2 = require('@antv/f2/lib/core'); // 必须引入
require('@antv/f2/lib/geom/interval'); // 引入 interval 几何标记
require('@antv/f2/lib/coord/polar'); // 引入 极坐标
require('@antv/f2/lib/geom/adjust/stack'); // 引入数据层叠调整类型
require('@antv/f2/lib/interaction/');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
const Tooltip = require('@antv/f2/lib/plugin/tooltip');

F2.Chart.plugins.register([ScrollBar, Tooltip]);

export default class Index extends Component {
  config = {
    navigationBarTitleText: '线图平移交互(长按展示 tooltip)',
    disableScroll: true,
  };

  state = {};

  initChart(canvas, width, height) {
    try {
      // F2Canvas.fixF2(F2);
    } catch (error) {
      console.log('TCL: Index -> initChart -> error', error);
    }
    const chart = new F2.Chart({
      el: canvas,
      width,
      height,
      animate: false,
    });
    chart.source(data, {
      release: {
        min: 1990,
        max: 2010,
      },
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: '#1890FF',
        padding: [3, 5],
      },
      nameStyle: {
        fill: '#fff',
      },
      onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
      },
    });
    chart.line().position('release*count');
    chart
      .point()
      .position('release*count')
      .style({
        lineWidth: 1,
        stroke: '#fff',
      });

    chart.interaction('pan', {
      mode: 'x',
      onEnd(a) {
        console.log('onEnd', a);
      },
      onStart(a) {
        console.log('onStart', a);
      },
    });
    chart.interaction('swipe', {
      speed: 15,
    });
    // 定义进度条
    chart.scrollBar({
      mode: 'x',
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    chart.guide().tag({
      position: [1969, 1344],
      withPoint: false,
      content: '1,344',
      limitInPlot: true,
      offsetX: 5,
      direct: 'cr',
    });
    chart.render();
    return chart;
  }

  render() {
    console.log('FFFF', F2);
    return (
      <View style={{ height: '100%', width: '100%' }}>
        <F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas>
      </View>
    );
  }
}

代码是参考你的 scroll-line目录代码, 版本信息:Taro v1.3.18 image

czb128abc avatar Nov 03 '19 09:11 czb128abc