小程序使用antv f2 绘图，求教怎么把onInitChart方法写到data外面？

Question

下面是antv f2 的一个demo，求教怎么把onInitChart方法写到data外面？
最终呈现：

index.wxml↓

<view class="container">
 <f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>

index.json↓

{
 "usingComponents": {
    "f2": "@antv/wx-f2"
 }
}

index.js↓

Page({

 data: {

 onInitChart (F2, config) {

 const chart = new F2.Chart(config);

 const data = [

 { value: 63.4, city: 'New York', date: '2011-10-01' },

 { value: 62.7, city: 'Alaska', date: '2011-10-01' },

 { value: 72.2, city: 'Austin', date: '2011-10-01' },

 { value: 58, city: 'New York', date: '2011-10-02' },

 { value: 59.9, city: 'Alaska', date: '2011-10-02' },

 { value: 67.7, city: 'Austin', date: '2011-10-02' },

 { value: 53.3, city: 'New York', date: '2011-10-03' },

 { value: 59.1, city: 'Alaska', date: '2011-10-03' },

 { value: 69.4, city: 'Austin', date: '2011-10-03' },

 ];

 chart.source(data, {

 date: {

 range: [0, 1],

 type: 'timeCat',

 mask: 'MM-DD'

 },

 value: {

 max: 300,

 tickCount: 4

 }

 });

 chart.area().position('date*value').color('city').adjust('stack');

 chart.line().position('date*value').color('city').adjust('stack');

 chart.render();

 // 注意：需要把chart return 出来

 return chart;

 }

 },

 onLoad:function(){

 // console.log(Page())

 // this.data.onInitChart()

 },

});

这是官方给的demo，但是onInitChart方法是写到data中的，不太理解。怎么把这个方法拿出来呢？

Answer 1

Page({

data: {

dataa:'xiaotong',

onInitChart(F2, config) {

drawChart(F2, config)

}

},

});

function drawChart(F2, config){

let pages = getCurrentPages();

let currPage = pages[pages.length - 1]

console.log(currPage.data)

const chart = new F2.Chart(config);

const data = [

{ value: 63.4, city: 'New York', date: '2011-10-01' },

{ value: 62.7, city: 'Alaska', date: '2011-10-01' },

{ value: 72.2, city: 'Austin', date: '2011-10-01' },

{ value: 58, city: 'New York', date: '2011-10-02' },

{ value: 59.9, city: 'Alaska', date: '2011-10-02' },

{ value: 67.7, city: 'Austin', date: '2011-10-02' },

{ value: 53.3, city: 'New York', date: '2011-10-03' },

{ value: 59.1, city: 'Alaska', date: '2011-10-03' },

{ value: 69.4, city: 'Austin', date: '2011-10-03' },

];

chart.source(data, {

date: {

range: [0, 1],

type: 'timeCat',

mask: 'MM-DD'

},

value: {

max: 300,

tickCount: 4

}

});

chart.area().position('date*value').color('city').adjust('stack');

chart.line().position('date*value').color('city').adjust('stack');

chart.render();

// 注意：需要把chart return 出来

return chart;

}

Answer 2

我也遇到同样的问题 想问下是怎么解决的 谢谢了