F2Canvas is not defined #10

lfnb · 2019-03-20T13:12:09Z

lfnb · 2019-03-20T14:24:42Z

@xioxin

soqt · 2019-04-04T08:15:41Z

有什么解决方案吗，编译过后小程序发现不了taro-f2包。可能是命名规范不符合。Error: module "npm/taro-f2/dist/weapp/index" is not defined

xioxin · 2019-04-04T08:28:40Z

试试吧@tarojs/cli工具升级到最新试试

soqt · 2019-04-04T08:55:09Z

@xioxin 嗯升级后发现包了。实例中F2Canvas.fixF2(F2);这一行在编译微信小程序中会导致eventListener的错误，去掉就好了。

soqt · 2019-04-04T09:57:25Z

@xioxin F2Canvas.fixF2(F2);是为了支持图标的交互吗？加上之后报错F2Canvas is not defined; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous) 但是去掉之后图标是静态的，不可以交互。

xioxin · 2019-04-04T10:47:45Z

事件补丁部分兼容补丁

xioxin · 2019-04-04T10:48:09Z

能截图报错吗

soqt · 2019-04-04T13:57:31Z

@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>
    )
  }
}

xioxin · 2019-04-04T14:31:31Z

因为 taro的UI组件库打包无法导出函数 NervJS/taro#1260
所以才吧方法放入组件中 ,目前我这里是可以正常使用的

taorujun · 2019-05-14T01:39:34Z

@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>
    )
  }
}

出现一样的问题, 根据这个方式解决

xioxin · 2019-05-14T01:46:58Z

@taorujun
NervJS/taro#1260 (comment)

目前最好的方法就是吧fixF2方法放入自己的代码里来解决

chris-mask · 2019-07-15T10:19:17Z

请问在小程序端要怎么配置，显示不了

chris-mask · 2019-07-16T01:01:10Z

@xioxin

chris-mask · 2019-07-16T01:11:24Z

图表不显示也不报错

chris-mask · 2019-07-16T03:34:30Z

@xioxin h5可以显示，在小程序端无法显示

chris-mask · 2019-07-16T03:46:23Z

: h5

小程序端

wukuy · 2020-01-15T02:35:35Z

搞定

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

F2Canvas is not defined #10

F2Canvas is not defined #10

lfnb commented Mar 20, 2019

lfnb commented Mar 20, 2019

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019

soqt commented Apr 4, 2019

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019 via email

xioxin commented Apr 4, 2019 via email

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019

taorujun commented May 14, 2019

xioxin commented May 14, 2019

chris-mask commented Jul 15, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

wukuy commented Jan 15, 2020

F2Canvas is not defined #10

F2Canvas is not defined #10

Comments

lfnb commented Mar 20, 2019

lfnb commented Mar 20, 2019

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019

soqt commented Apr 4, 2019

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019 via email

xioxin commented Apr 4, 2019 via email

soqt commented Apr 4, 2019

xioxin commented Apr 4, 2019

taorujun commented May 14, 2019

xioxin commented May 14, 2019

chris-mask commented Jul 15, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

chris-mask commented Jul 16, 2019

wukuy commented Jan 15, 2020