112 lines
2.3 KiB
JavaScript
112 lines
2.3 KiB
JavaScript
Page({
|
|
data: {
|
|
chartData: [], // 图表数据
|
|
heightData: [], // 身高数据
|
|
weightData: [], // 体重数据
|
|
currentAge: 0, // 当前年龄
|
|
currentHeight: 0, // 当前身高
|
|
currentWeight: 0 // 当前体重
|
|
},
|
|
|
|
onLoad() {
|
|
// 初始化图表数据
|
|
this.initChartData();
|
|
},
|
|
|
|
// 初始化图表数据
|
|
initChartData() {
|
|
const chartData = [];
|
|
for (let i = 0; i <= 18; i++) {
|
|
chartData.push({
|
|
age: i,
|
|
height: null,
|
|
weight: null
|
|
});
|
|
}
|
|
this.setData({ chartData });
|
|
},
|
|
|
|
// 输入当前年龄
|
|
inputAge(e) {
|
|
this.setData({ currentAge: e.detail.value });
|
|
},
|
|
|
|
// 输入当前身高
|
|
inputHeight(e) {
|
|
this.setData({ currentHeight: e.detail.value });
|
|
},
|
|
|
|
// 输入当前体重
|
|
inputWeight(e) {
|
|
this.setData({ currentWeight: e.detail.value });
|
|
},
|
|
|
|
// 添加数据点
|
|
addDataPoint() {
|
|
const { currentAge, currentHeight, currentWeight, chartData } = this.data;
|
|
if (!currentAge || !currentHeight || !currentWeight) return;
|
|
|
|
const newData = [...chartData];
|
|
newData[currentAge] = {
|
|
age: currentAge,
|
|
height: currentHeight,
|
|
weight: currentWeight
|
|
};
|
|
|
|
this.setData({
|
|
chartData: newData,
|
|
currentAge: 0,
|
|
currentHeight: 0,
|
|
currentWeight: 0
|
|
});
|
|
|
|
this.drawChart();
|
|
},
|
|
|
|
// 绘制图表
|
|
drawChart() {
|
|
const { chartData } = this.data;
|
|
const ctx = wx.createCanvasContext('growthChart');
|
|
|
|
// 绘制身高曲线
|
|
ctx.beginPath();
|
|
ctx.setStrokeStyle('#007bff');
|
|
ctx.setLineWidth(2);
|
|
chartData.forEach((point, index) => {
|
|
if (point.height) {
|
|
const x = index * 20;
|
|
const y = 300 - point.height;
|
|
if (index === 0) {
|
|
ctx.moveTo(x, y);
|
|
} else {
|
|
ctx.lineTo(x, y);
|
|
}
|
|
}
|
|
});
|
|
ctx.stroke();
|
|
|
|
// 绘制体重曲线
|
|
ctx.beginPath();
|
|
ctx.setStrokeStyle('#28a745');
|
|
ctx.setLineWidth(2);
|
|
chartData.forEach((point, index) => {
|
|
if (point.weight) {
|
|
const x = index * 20;
|
|
const y = 300 - point.weight * 2;
|
|
if (index === 0) {
|
|
ctx.moveTo(x, y);
|
|
} else {
|
|
ctx.lineTo(x, y);
|
|
}
|
|
}
|
|
});
|
|
ctx.stroke();
|
|
|
|
ctx.draw();
|
|
},
|
|
// 返回
|
|
onClickLeft() {
|
|
wx.navigateBack();
|
|
}
|
|
});
|