taro-f2
taro-f2 copied to clipboard
Published
20 hours ago •
xioxin
xioxin
F2Canvas is not defined
有什么解决方案吗，编译过后小程序发现不了taro-f2包。可能是命名规范不符合。Error: module "npm/taro-f2/dist/weapp/index" is not defined
@xioxin F2Canvas.fixF2(F2);是为了支持图标的交互吗？加上之后报错F2Canvas is not defined; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous) 但是去掉之后图标是静态的，不可以交互。
@xioxin 错误跟这个issue的问题一样。用taro init新建任务，直接用npm安装taro-f2，然后复制示例代码，在F2Canvas.fix(F2)那一行会跳错。解决方法是把fixF2单独拿出来调用，不作为F2Canvas的附属函数。建议写成这样 import { F2Canvas, fixF2 } from 'taro-f2';
我的解决方案：
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('year*value').color('country').shape('smooth');
chart.line().position('year*value').color('country').shape('smooth');
chart.render();
return chart;
}
render () {
return (
<View style='width:100%;height:300px'>
<F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas>
</View>
)
}
}
因为 taro的UI组件库打包无法导出函数 https://github.com/NervJS/taro/issues/1260 所以才吧方法放入组件中 ,目前我这里是可以正常使用的
@xioxin 错误跟这个issue的问题一样。用taro init新建任务，直接用npm安装taro-f2，然后复制示例代码，在F2Canvas.fix(F2)那一行会跳错。解决方法是把fixF2单独拿出来调用，不作为F2Canvas的附属函数。建议写成这样 import { F2Canvas, fixF2 } from 'taro-f2';
我的解决方案：
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('year*value').color('country').shape('smooth'); chart.line().position('year*value').color('country').shape('smooth'); chart.render(); return chart; } render () { return ( <View style='width:100%;height:300px'> <F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas> </View> ) } }
出现一样的问题, 根据这个方式解决
@taorujun https://github.com/NervJS/taro/issues/1260#issuecomment-455541210
目前最好的方法就是吧fixF2方法放入自己的代码里来解决
: h5
小程序端
搞定