Comments (5)
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>
)
}
}
复制的
from taro-f2.
@moling1234 可以了,但是我的折线图还是不能平移,我还以为这因为这个命令没生效造成,请问你知道这是为什么么?
from taro-f2.
http://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-smooth-line.html 你看看这个
from taro-f2.
@moling1234 我就是看着这里面写的,不知道为什么我的就全挤在一屏里,
chart.interaction('pan')
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5,
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
}
})
from taro-f2.
@moling1234
我调用chart.interaction('pan').interaction('pinch')报错,Cannot read property 'get' of undefined
把后面�的“pinch”改成swipe,变成chart.interaction('pan').interaction('swipe')就没问题,都引用了
from taro-f2.
Related Issues (20)
- F2编译之后出现的问题
- taro-f2最近怎么了,怎么都编译不成功 HOT 1
- h5端引入 taro-f2 F2Canvas 导致页面不跳转 HOT 2
- 小程序编译提示canvasEl.addEventListener is not a function HOT 9
- taro 2.0.5 版本现在不支持,希望可以更新一下。 HOT 9
- 关于onCanvasInit 只执行一次的问题
- 项目还有人维护么...clone下来跑不起来。。。
- taro 2.0.7 配置报错 HOT 2
- 请问下,有计划支持百度小程序吗?
- 安卓上点击和滑动不生效偶尔能点中一下,还有iOS上图表放scrollView里有滑动冲突
- Taro 直接引用 @antv/my-f2
- 3.5.0版本h5下页面报错
- 如何在react函数组件中使用taro-f21?
- 如何在react函数组件中使用taro-f21?
- 引入 taro-f2/dist/weapp/common/f2-tool.ts 报语法错误 HOT 1
- Super expression must either be null or a function HOT 9
- taro3 vue 版本集成报错 HOT 1
- 设置了pixelRatio之后支付宝小程序图表仍然模糊
- fixF2(F2)报错
- Taro3版本报错啊 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from taro-f2.