Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
czb128abc opened this issue Nov 3, 2019 · 0 comments
Open

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

czb128abc opened this issue Nov 3, 2019 · 0 comments

Comments

@czb128abc
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant