Code Monkey home page Code Monkey logo

Comments (17)

lfnb avatar lfnb commented on July 25, 2024

@xioxin

from taro-f2.

soqt avatar soqt commented on July 25, 2024

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

from taro-f2.

xioxin avatar xioxin commented on July 25, 2024

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

from taro-f2.

soqt avatar soqt commented on July 25, 2024

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

from taro-f2.

soqt avatar soqt commented on July 25, 2024

@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.

xioxin avatar xioxin commented on July 25, 2024

from taro-f2.

xioxin avatar xioxin commented on July 25, 2024

from taro-f2.

soqt avatar soqt commented on July 25, 2024

@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.

xioxin avatar xioxin commented on July 25, 2024

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

from taro-f2.

taorujun avatar taorujun commented on July 25, 2024

@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.

xioxin avatar xioxin commented on July 25, 2024

@taorujun
NervJS/taro#1260 (comment)

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

from taro-f2.

chris-mask avatar chris-mask commented on July 25, 2024

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

from taro-f2.

chris-mask avatar chris-mask commented on July 25, 2024

@xioxin

from taro-f2.

chris-mask avatar chris-mask commented on July 25, 2024

图表不显示也不报错

from taro-f2.

chris-mask avatar chris-mask commented on July 25, 2024

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

from taro-f2.

chris-mask avatar chris-mask commented on July 25, 2024

image : h5
image
小程序端

from taro-f2.

wukuy avatar wukuy commented on July 25, 2024

image
搞定

from taro-f2.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.