在現代健康管理應用中，體重記錄是一個常見的功能，透過記錄和展示使用者的體重變化，使用者可以更好地瞭解自己的身體狀況，追蹤體重管理的成效。在 UniApp 開發的專案中，uCharts 是一個常用的圖表庫，它可以用來實現資料的視覺化展示。本文將詳細介紹如何使用 uCharts 實現體重記錄的曲線圖展示功能，並結合程式碼例項講解具體實現過程。
一、uCharts 介紹
uCharts 是一個基於 JavaScript 開發的輕量級圖表庫，支援折線圖、柱狀圖、餅圖等多種圖表型別，並且相容小程式、H5、App 等多端平臺，非常適合在 UniApp 專案中使用。透過 uCharts，我們可以輕鬆地將體重記錄資料繪製成曲線圖，幫助使用者直觀地看到體重變化的趨勢。
二、功能需求
實現體重記錄的曲線圖展示功能，我們需要滿足以下需求：
資料記錄：體重記錄以時間為維度，每個時間點記錄體重值。
圖表展示：將記錄的體重資料以曲線圖的形式展示，X 軸為時間，Y 軸為體重。
互動功能：使用者可以透過滑動圖表檢視具體的體重數值變化。
處理資料缺失：當體重記錄中存在缺失資料時，需要使用插值演算法補充缺失值，以保證曲線圖的連續性。
響應式設計：在不同尺寸的裝置上，圖表能夠自適應佈局，保持良好的展示效果。
三、實現步驟
1. 安裝 uCharts
首先，我們需要在 UniApp 專案中整合 uCharts 圖表庫。可以透過以下步驟引入 uCharts：
透過 npm 安裝 uCharts：
npm install @qiun/u-charts --save
在專案中引入 uCharts：
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
2. 設計頁面佈局
在頁面模板中，我們為體重記錄圖表提供展示區域。使用 canvas 標籤來展示圖表，並設計體重記錄的表單和列表。
<template>
<view class="container">
<!-- 體重記錄折線圖 -->
<view class="chart-container">
<canvas canvas-id="lineChart" class="chart-canvas"></canvas>
</view>
<!-- 體重記錄列表 -->
<view class="record-list">
<view class="record-item" v-for="record in dataList" :key="record.recordDate">
<text>{{ record.recordDate }}</text>
<text>{{ record.weight }} kg</text>
</view>
</view>
</view>
</template>
頁面結構由折線圖和體重記錄列表組成。折線圖使用 canvas 標籤進行展示，體重記錄列表則展示了每個時間點的體重資料。
3. 初始化折線圖
在 onReady 生命週期中，初始化 uCharts 的折線圖，併爲圖表設定基礎配置項。
export default {
data() {
return {
chart: null,
dataList: [], // 體重記錄資料
};
},
onReady() {
this.initChart();
},
methods: {
initChart() {
const ctx = uni.createCanvasContext('lineChart', this);
this.chart = new uCharts({
type: 'line', // 折線圖
context: ctx,
width: this.rpx2px(750), // 圖表寬度
height: this.rpx2px(500), // 圖表高度
categories: [], // X軸分類
series: [{
name: '體重',
data: [],
}],
xAxis: {
disableGrid: true,
},
yAxis: {
format: val => `${val} kg`,
},
});
},
},
};
在該程式碼中，initChart 方法透過 uCharts 初始化折線圖。我們設定圖表的型別為 line，併爲 X 軸和 Y 軸配置了基本樣式。透過 rpx2px 方法，我們可以將 rpx 單位轉換為 px，以適應不同尺寸的螢幕。
4. 獲取體重記錄資料
體重資料通常是透過 API 獲取的，這裏假設我們已經實現了一個 API 來獲取體重記錄。資料格式如下：
[ { "recordDate": "2024-01-01", "weight": 70 }, { "recordDate": "2024-01-02", "weight": 69.5 }, { "recordDate": "2024-01-03", "weight": 70.2 }]
我們透過 getWeightRecords 方法來獲取資料，並將其展示在圖表中：
methods: {
async getWeightRecords() {
const response = await fetch('/api/weightRecords');
const records = await response.json();
this.dataList = records;
const categories = records.map(record => record.recordDate);
const seriesData = records.map(record => record.weight);
this.chart.updateData({
categories,
series: [{
name: '體重',
data: seriesData,
}],
});
}
},
在 getWeightRecords 方法中，我們首先獲取體重記錄資料，並提取日期（recordDate）作為 X 軸分類，體重值（weight）作為 Y 軸資料。透過 chart.updateData 更新圖表資料，使得折線圖能夠展示體重記錄的變化。
5. 處理資料缺失
在某些情況下，使用者可能沒有每天記錄體重，這會導致資料不完整，圖表出現斷點。為此，我們可以使用線性插值演算法來填補缺失資料，保持曲線的連續性。
methods: {
interpolateMissingData(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].weight === null) {
let before = null, after = null;
for (let j = i - 1; j >= 0; j--) {
if (data[j].weight !== null) {
before = data[j].weight;
break;
}
}
for (let k = i + 1; k < data.length; k++) {
if (data[k].weight !== null) {
after = data[k].weight;
break;
}
}
if (before !== null && after !== null) {
data[i].weight = (before + after) / 2;
}
}
}
return data;
},
},
該方法透過找到缺失資料前後的非空資料，計算其平均值來填補空缺，保持曲線的平滑和連續。
6. 響應式圖表佈局
爲了保證在不同螢幕尺寸下的良好展示效果，我們使用 rpx2px 方法動態計算圖表的寬度和高度：
methods: {
rpx2px(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth;
return (screenWidth * rpx) / 750;
}
},
這個方法將設計稿中的 rpx 單位轉換為實際裝置的 px 單位，從而保證圖表能夠自適應螢幕寬度。
四、總結
透過 uCharts，我們可以方便地實現體重記錄的曲線圖展示功能。本文介紹瞭如何透過 UniApp 獲取體重記錄資料，並使用 uCharts 將其繪製為折線圖。同時，針對資料缺失的情況，我們使用插值演算法填補了空缺值，保證圖表的連續性。最後，透過響應式設計方法，我們確保了圖表在不同尺寸裝置上的展示效果。
uCharts 提供了豐富的圖表型別和功能，可以應用於各種資料視覺化需求。在健康管理應用中，透過圖表展示體重、飲食、運動等資料，可以為使用者提供更加直觀和有價值的健康反饋。
