Cordova与OpenHarmony目标进度可视化-编程实验室

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

数据可视化的重要性

目标进度的可视化展示能够让用户更直观地了解自己的运动成果。通过Cordova框架与OpenHarmony的图表库，我们可以创建多种形式的进度展示。本文将介绍如何实现这一功能。

进度条组件

classProgressBar{constructor(containerId,options){this.container=document.getElementById(containerId);this.options={width:options.width||300,height:options.height||20,color:options.color||'#4ECDC4',backgroundColor:options.backgroundColor||'#E0E0E0'};}render(progress){constpercentage=Math.min(progress,100);this.container.innerHTML=`<div class="progress-bar-wrapper" style="width:${this.options.width}px; height:${this.options.height}px; background-color:${this.options.backgroundColor}; border-radius: 10px; overflow: hidden;"> <div class="progress-bar-fill" style="width:${percentage}%; height: 100%; background-color:${this.options.color}; transition: width 0.3s ease;"></div> </div> <div class="progress-text">${percentage.toFixed(1)}%</div>`;}}

ProgressBar类提供了一个可配置的进度条组件。通过options参数，用户可以自定义进度条的宽度、高度和颜色。render方法根据进度百分比动态更新进度条的宽度。这种组件化的设计使得代码更加可复用。

圆形进度指示器

functionrenderCircularProgress(goal){constcanvas=document.getElementById('circular-progress');constctx=canvas.getContext('2d');constradius=50;constcircumference=2*Math.PI*radius;constprogress=(goal.progress/100)*circumference;// 绘制背景圆ctx.beginPath();ctx.arc(60,60,radius,0,2*Math.PI);ctx.strokeStyle='#E0E0E0';ctx.lineWidth=8;ctx.stroke();// 绘制进度圆ctx.beginPath();ctx.arc(60,60,radius,-Math.PI/2,-Math.PI/2+(progress/circumference)*2*Math.PI);ctx.strokeStyle='#4ECDC4';ctx.lineWidth=8;ctx.stroke();// 绘制文字ctx.fillStyle='#333';ctx.font='bold 24px Arial';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(`${goal.progress.toFixed(0)}%`,60,60);}

圆形进度指示器提供了一种更加美观的进度展示方式。这个函数使用Canvas绘制一个圆形进度条，中心显示百分比。这种设计特别适合在仪表板上展示单个目标的进度。

多目标对比图表

functionrenderGoalComparison(goals){constchartData={labels:goals.map(g=>g.name),datasets:[{label:'完成进度',data:goals.map(g=>g.progress),backgroundColor:['#FF6B6B','#4ECDC4','#45B7D1','#FFA07A','#98D8C8'],borderColor:'#fff',borderWidth:2}]};renderBarChart('goal-comparison',chartData);}

多目标对比图表让用户能够一目了然地看到所有目标的进度。这个函数准备了柱状图数据，每个目标对应一个柱子。通过不同的颜色区分不同的目标，使得图表更加清晰易读。

时间线进度展示

functionrenderProgressTimeline(goal){consttimeline=document.getElementById('progress-timeline');constmilestones=calculateMilestones(goal);lettimelineHTML='<div class="timeline">';milestones.forEach((milestone,index)=>{constisCompleted=goal.currentValue>=milestone.value;conststatus=isCompleted?'completed':'pending';timelineHTML+=`<div class="timeline-item${status}"> <div class="timeline-marker"></div> <div class="timeline-content"> <div class="milestone-label">${milestone.label}</div> <div class="milestone-value">${milestone.value}${getUnitForType(goal.type)}</div> <div class="milestone-date">${formatDate(milestone.date)}</div> </div> </div>`;});timelineHTML+='</div>';timeline.innerHTML=timelineHTML;}functioncalculateMilestones(goal){constmilestones=[];conststep=goal.targetValue/4;for(leti=1;i<=4;i++){milestones.push({value:step*i,label:`里程碑${i}`,date:newDate(goal.createdAt+(i*(goal.deadline-goal.createdAt)/4))});}returnmilestones;}

时间线进度展示将目标分解为多个里程碑，展示用户的进度路径。这个函数计算了四个等间距的里程碑，并根据用户的当前进度标记完成状态。这种展示方式能够让用户看到自己的进度轨迹。

热力图展示

functionrenderActivityHeatmap(workoutData){constheatmapContainer=document.getElementById('activity-heatmap');constweeks=12;constdaysPerWeek=7;letheatmapHTML='<div class="heatmap">';for(letweek=0;week<weeks;week++){heatmapHTML+='<div class="heatmap-week">';for(letday=0;day<daysPerWeek;day++){constdate=newDate();date.setDate(date.getDate()-(weeks*7-week*7-day));constdateStr=date.toISOString().split('T')[0];constactivity=workoutData[dateStr]||0;constintensity=getIntensityLevel(activity);heatmapHTML+=`<div class="heatmap-cell intensity-${intensity}" title="${dateStr}:${activity}次运动"></div>`;}heatmapHTML+='</div>';}heatmapHTML+='</div>';heatmapContainer.innerHTML=heatmapHTML;}functiongetIntensityLevel(activity){if(activity===0)return'none';if(activity<1)return'low';if(activity<2)return'medium';if(activity<3)return'high';return'very-high';}

热力图展示提供了一个长期的运动活动概览。这个函数创建了一个12周的热力图，每个格子代表一天的运动活动。通过不同的颜色强度表示运动频率，用户可以直观地看到自己的运动规律。

目标达成率统计

functioncalculateGoalAchievementRate(allGoals){conststats={totalGoals:allGoals.length,completedGoals:0,inProgressGoals:0,overdueGoals:0,achievementRate:0};allGoals.forEach(goal=>{if(goal.status==='completed'){stats.completedGoals++;}elseif(goal.isOverdue()){stats.overdueGoals++;}else{stats.inProgressGoals++;}});stats.achievementRate=(stats.completedGoals/stats.totalGoals)*100;returnstats;}