F2Canvas is not defined about taro-f2 HOT 17 OPEN

@xioxin

from taro-f2.

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

from taro-f2.

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

from taro-f2.

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

from taro-f2.

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

from taro-f2.

from taro-f2.

from taro-f2.

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

from taro-f2.

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

from taro-f2.

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

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

from taro-f2.

@taorujun
NervJS/taro#1260 (comment)

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

from taro-f2.

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

from taro-f2.

@xioxin

from taro-f2.

图表不显示也不报错

from taro-f2.

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

from taro-f2.

: h5

小程序端

from taro-f2.

搞定

from taro-f2.