注意！！：这篇文章是针对以前的版本的所以并不完全适合现在的版本，可以作为参考，思路是一样的
小程序要画图表，但是突然发现小程序版的f2，如果我要在页面加载完成并且请求完数据的时候，加载图表就会出现一些问题。可能没遇到过的不能理解，我先解释一下
1. f2初始化的流程
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
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;
items[0].value = '¥ ' + items[0].value;
}
});
chart.interval().position('year*sales');
chart.render();
return chart;
}
Page({
data: {
opts: {
onInit: initChart
}
}
});
这是官方的流程，当然直接这样搞可以显示图表，问题如下
2. 问题梳理
- 需求
刚进入页面的时候需要请求数据，然后再加载图表。 - 解决方案
熟悉f2的人可能会说使用changData，但是文档给出的更新数据都是图表已经初始化完成后再进行更新的接口，换句话说你不知道图表什么时候加载完成，如果你的请求时间很短，图表还没有初始化完成，就会报错chart is null。
其实很简单，只要保证初始化函数的数据是你期望的就行了，利用闭包很轻松就能实现。
let chart = {}
page({
data: {
opts:{
onInit: () => {}
},
showChart: false
},
onLoad(options) {
// 请求完成后再生成初始化函数 加载图表
// 必须用wx：if控制图表 不然页面一加载就执行初始化了
const func = this.initChart(数据)
this.setData({
opts: {
onInit: func
},
showChart: true
})
},
initChart(data) {
/// 返回一个初始化函数
return function (canvas, width, height, F2) {
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data);
// ,......
chart.render();
return chart;
}
}
})
