How to use the @antv/my-f2.Chart function in @antv/my-f2
To help you get started, we’ve selected a few @antv/my-f2 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
antvis / mini-program-f2-demos / pages / charts / dodge-bar / index.js View on Github 
function drawChart(canvas, width, height) {
var data = [
{ label: 'Mon.', type: 'series1', value: 2800 },
{ label: 'Mon.', type: 'series2', value: 2260 },
{ label: 'Tue.', type: 'series1', value: 1800 },
{ label: 'Tue.', type: 'series2', value: 1300 },
{ label: 'Wed.', type: 'series1', value: 950 },
{ label: 'Wed.', type: 'series2', value: 900 },
{ label: 'Thu.', type: 'series1', value: 500 },
{ label: 'Thu.', type: 'series2', value: 390 },
{ label: 'Fri.', type: 'series1', value: 170 },
{ label: 'Fri.', type: 'series2', value: 100 }
];
var chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data.reverse(), {
value: {
tickInterval: 750
}
});
chart.coord({
transposed: true
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May.', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data);
chart.tooltip({
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 => {onReady() {
const data = [
{"time": '2016-08-08 00:00:00',"tem": 10},
{"time": '2016-08-08 00:10:00',"tem": 22},
{"time": '2016-08-08 00:30:00',"tem": 20},
{"time": '2016-08-09 00:35:00',"tem": 26},
{"time": '2016-08-09 01:00:00',"tem": 20},
{"time": '2016-08-09 01:20:00',"tem": 26},
{"time": '2016-08-10 01:40:00',"tem": 28},
{"time": '2016-08-10 02:00:00',"tem": 20},
{"time": '2016-08-10 02:20:00',"tem": 28}
];
const chart = new MyF2.Chart({
el: my.createCanvasContext('canvas'),
width: 600,
height: 600
});
const defs = {
time: {
type: 'timeCat',
tickCount: 3
},
tem: {
tickCount: 5,
min: 0
}
};
//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('tem', {}, () => {
const { padding, appendPadding } = this.props;
this.chart = new F2.Chart({
el: canvas,
width,
height,
padding,
appendPadding,
});
render(this.chart, this.props, width, height);
});
});}, () => {
const { padding, appendPadding } = this.props;
this.chart = new F2.Chart({
el: canvas,
width,
height,
padding,
appendPadding,
});
render(this.chart, this.props, width, height);
});
});}, () => {
let { padding, appendPadding } = this.props;
if(!Array.isArray(appendPadding)) {
appendPadding = [appendPadding, appendPadding, appendPadding, appendPadding];
}
const columnAppendPadding = Object.assign([], appendPadding);
columnAppendPadding[0] = 0;
this.areaChart = new F2.Chart({
el: areaCanvas,
width: widthArea,
height: heightArea,
padding,
appendPadding,
});
this.columnChart = new F2.Chart({
el: columnCanvas,
width: widthColumn,
height: heightColumn,
appendPadding: columnAppendPadding,
});
render(this.areaChart, this.columnChart, this.props, widthArea, heightArea, widthColumn, heightColumn);
});const text2 = container.addShape('Text', {
attrs: {
text: cfg.origin._origin.pointer,
x: cfg.center.x,
y: cfg.center.y,
fillStyle: '#ccc',
textAlign: 'center',
textBaseline: 'top'
}
});
return [line, text1, text2];
}
});
chart = new F2.Chart({
el: canvas,
width,
height,
animate: false
});
chart.source(data, {
value: {
type: 'linear',
min: 0,
max: 15,
ticks: [0, 5, 7.5, 10, 15],
nice: false
},
length: { type: 'linear', min: 0, max: 10 },
y: { type: 'linear', min: 0, max: 1 }
});{ date: "2017-07-11", value: 92 },
{ date: "2017-07-12", value: 113 },
{ date: "2017-07-13", value: 107 },
{ date: "2017-07-14", value: 131 },
{ date: "2017-07-15", value: 111 },
{ date: "2017-07-16", value: 64 },
{ date: "2017-07-17", value: 69 },
{ date: "2017-07-18", value: 88 },
{ date: "2017-07-19", value: 77 },
{ date: "2017-07-20", value: 83 },
{ date: "2017-07-21", value: 111 },
{ date: "2017-07-22", value: 57 },
{ date: "2017-07-23", value: 55 },
{ date: "2017-07-24", value: 60 }
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
value: {
tickCount: 5,
min: 0
},
date: {
type: 'timeCat',
range: [ 0, 1 ],
tickCount: 3
}
});function drawChart(canvas, width, height) {
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
sales: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
