F2Canvas.fixF2(F2)这个命令报错

[Joenny]

ReferenceError: F2Canvas is not defined
请问现在有啥解决方案嘛？

[moling1234]

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import PropTypes from 'prop-types';

import { F2Canvas } from "taro-f2";
import F2 from "@antv/f2"

const fixF2 = (FF) => {
if( ( !FF ) || F2.TaroFixed){return FF}
if (process.env.TARO_ENV !== 'h5') {
function strLen(str) {
let len = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
len++;
} else {
len += 2;
}
}
return len;
}
FF.Util.measureText = function(text, font, ctx) {
if (!ctx) {
let fontSize = 12;
if (font) {
fontSize = parseInt(font.split(' ')[3], 10);
}
fontSize /= 2;
return {
width: strLen(text) * fontSize
};
}
ctx.font = font || '12px sans-serif';
return ctx.measureText(text);
};
FF.Util.addEventListener = function (source, type, listener) {
source.addListener(type, listener);
};
FF.Util.getStyle = function (el, property) {
return el.currentStyle ? el.currentStyle[property] : undefined;
};
FF.Util.removeEventListener = function (source, type, listener) {
source.removeListener(type, listener);
};
FF.Util.createEvent = function (event, chart) {
const type = event.type;
let x = 0;
let y = 0;
const touches = event.touches;
if (touches && touches.length > 0) {
x = touches[0].x;
y = touches[0].y;
}
return {
type,
chart,
x,
y
};
};
if(Taro && Taro.getSystemInfoSync){
const systeamInfo = Taro.getSystemInfoSync();
if(systeamInfo && systeamInfo.pixelRatio) {
FF.Global.pixelRatio = systeamInfo.pixelRatio
}
}
} else {
FF.Global.pixelRatio = window.devicePixelRatio
}
FF.TaroFixed = true;
return FF
}

export default class Index extends Component {

initChart (canvas, width, height) {
fixF2(F2);
const data = [{ "country": "USA", "value": null, "year": 1940 }, { "country": "USA", "value": null, "year": 1941 }, { "country": "USA", "value": null, "year": 1942 }];
const chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data);
chart.scale('year', {
tickCount: 5
});
chart.axis('year', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.axis('value', {
label(text) {
return {
text: text / 1000 + 'k'
};
}
});
// tooltip 与图例结合
chart.tooltip({
showCrosshairs: true,
custom: true, // 自定义 tooltip 内容框
onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.map(item => {
map[item.name] = Object.assign({}, item);
});
tooltipItems.map(item => {
const { name, value } = item;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(Object.values(map));
},
onHide() {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}
});
chart.area().position('yearvalue').color('country').shape('smooth');
chart.line().position('yearvalue').color('country').shape('smooth');
chart.render();
return chart;
}

render () {

return (
    <View style='width:100%;height:300px'>
      <F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas>
    </View>
)

}
}

复制的

[Joenny]

@moling1234 可以了，但是我的折线图还是不能平移，我还以为这因为这个命令没生效造成，请问你知道这是为什么么？

[moling1234]

http://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-smooth-line.html 你看看这个

[Joenny]

@moling1234 我就是看着这里面写的，不知道为什么我的就全挤在一屏里，
chart.interaction('pan')

chart.scrollBar({
  mode: 'x',
  xStyle: {
    offsetY: -5,
    backgroundColor: '#e8e8e8',
    fillerColor: '#808080',
  }
})

[Joenny]

@moling1234
我调用chart.interaction('pan').interaction('pinch')报错，Cannot read property 'get' of undefined
把后面�的“pinch”改成swipe,变成chart.interaction('pan').interaction('swipe')就没问题，都引用了