手机网站信任从哪里设置网站建设公制度

手机网站信任从哪里设置,网站建设公制度,google下载安卓版,帮企业外卖网站做推一、功能概述 喝水习惯的形成往往需要观察一周内的变化趋势。周趋势分析模块让用户能够直观看到过去 7 天的喝水量变化#xff0c;从而发现自己的规律、调整计划。本篇文章围绕周趋势分析展开#xff0c;介绍如何在 Cordova Web 层 通过 Canvas 或简…一、功能概述喝水习惯的形成往往需要观察一周内的变化趋势。周趋势分析模块让用户能够直观看到过去 7 天的喝水量变化从而发现自己的规律、调整计划。本篇文章围绕周趋势分析展开介绍如何在Cordova Web 层通过 Canvas 或简单的 SVG 绘制折线图并通过OpenHarmony ArkTS 插件提供原生图表渲染能力。我们继续采用一段代码一段说明的结构通过 HTML/JavaScript 和 ArkTS 示例构建一条完整的数据可视化动线。二、Web 端周趋势分析界面dividweekly-trend-pageclasspage page-weekly-trendh1周趋势分析/h1divclasstrend-controlsbuttonidbtn-prev-weekclassbtn-secondary上一周/buttonspanidweek-labelclasstext-label本周/spanbuttonidbtn-next-weekclassbtn-secondary下一周/button/divcanvasidtrend-canvaswidth800height400/canvasdividtrend-summaryclasssummary-box/div/div这段 HTML 定义了周趋势分析页面的基本结构。顶部的导航按钮允许用户切换不同的周trend-canvas用于绘制折线图trend-summary展示该周的统计摘要如平均喝水量、最高值等。.page-weekly-trend{padding:16px 24px;}.trend-controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;}.text-label{flex:1;text-align:center;font-weight:bold;}#trend-canvas{border:1px solid #555;margin-bottom:16px;background:#1f2937;}.summary-box{background:#374151;padding:12px;border-radius:4px;font-size:14px;}CSS 为页面添加布局和样式。Canvas 元素设置了固定的宽高背景色与深色主题一致便于绘制图表。三、加载周数据并绘制折线图asyncfunctionloadWeeklyTrend(weekOffset0){consttodaynewDate();conststartDatenewDate(today);startDate.setDate(today.getDate()-today.getDay()weekOffset*7);startDate.setHours(0,0,0,0);constendDatenewDate(startDate);endDate.setDate(startDate.getDate()6);endDate.setHours(23,59,59,999);constrecordsawaitdb.getRecordsByDateRange(startDate,endDate);constdailyDataaggregateDailyData(records,startDate);renderTrendChart(dailyData);renderTrendSummary(dailyData);updateWeekLabel(startDate);}loadWeeklyTrend函数是周趋势分析的核心数据加载函数。它首先获取当前日期然后根据weekOffset参数周偏移量计算目标周的起始日期。通过setDate(today.getDate() - today.getDay() weekOffset * 7)这行代码我们计算出该周的周一日期。例如如果weekOffset为 0表示当前周为 -1 表示上一周为 1 表示下一周。接着我们设置起始日期的时间为 00:00:00确保从该天的最开始开始计算。然后计算结束日期为起始日期加 6 天时间设为 23:59:59这样就覆盖了整个周的所有时间。从 IndexedDB 中查询该日期范围内的所有喝水记录后通过aggregateDailyData函数将这些记录按日期分组得到每天的总喝水量。最后调用renderTrendChart绘制折线图renderTrendSummary展示统计摘要updateWeekLabel更新页面上显示的周日期范围。functionaggregateDailyData(records,startDate){constdailyMapnewMap();for(leti0;i7;i){constdatenewDate(startDate);date.setDate(startDate.getDate()i);constkeydate.toISOString().split(T)[0];dailyMap.set(key,0);}records.forEach((r){constkeynewDate(r.timestamp).toISOString().split(T)[0];if(dailyMap.has(key)){dailyMap.set(key,dailyMap.get(key)r.amount);}});returnArray.from(dailyMap.values());}aggregateDailyData函数的作用是将原始的喝水记录数据按日期进行聚合。首先我们创建一个 Map 对象dailyMap用于存储每天的喝水总量。接着通过一个循环为该周的每一天共 7 天初始化一个 0 值。这一步很重要因为即使某天没有喝水记录我们也需要在图表上显示为 0这样才能保证图表的完整性和连续性。然后我们遍历所有的喝水记录。对于每条记录我们提取其时间戳中的日期部分格式为 YYYY-MM-DD然后检查这个日期是否在我们的dailyMap中。如果存在我们就将该记录的喝水量累加到对应日期的总量上。这样如果某天有多条记录它们的喝水量会被累加在一起。最后我们使用Array.from(dailyMap.values())将 Map 中的所有值转换为一个数组这个数组就是按顺序排列的 7 天的喝水量数据可以直接用于绘制图表。functionrenderTrendChart(dailyData){constcanvasdocument.getElementById(trend-canvas);if(!canvas)return;constctxcanvas.getContext(2d);constwidthcanvas.width;constheightcanvas.height;constpadding40;// 清空画布ctx.fillStyle#1f2937;ctx.fillRect(0,0,width,height);// 绘制坐标轴ctx.strokeStyle#555;ctx.beginPath();ctx.moveTo(padding,padding);ctx.lineTo(padding,height-padding);ctx.lineTo(width-padding,height-padding);ctx.stroke();// 绘制折线constmaxValueMath.max(...dailyData,1);constpointSpacing(width-2*padding)/(dailyData.length-1||1);ctx.strokeStyle#60a5fa;ctx.lineWidth2;ctx.beginPath();dailyData.forEach((value,index){constxpaddingindex*pointSpacing;constyheight-padding-(value/maxValue)*(height-2*padding);if(index0){ctx.moveTo(x,y);}else{ctx.lineTo(x,y);}});ctx.stroke();// 绘制数据点ctx.fillStyle#60a5fa;dailyData.forEach((value,index){constxpaddingindex*pointSpacing;constyheight-padding-(value/maxValue)*(height-2*padding);ctx.beginPath();ctx.arc(x,y,4,0,2*Math.PI);ctx.fill();});}renderTrendChart函数使用 Canvas 2D API 绘制一条完整的折线图。首先我们获取 Canvas 元素和其 2D 绘图上下文设置画布的宽高和内边距padding。内边距用于在画布边缘留出空间用于绘制坐标轴和标签。接着我们清空整个画布填充深色背景色#1f2937这样可以清除之前的绘图内容。然后绘制坐标轴从左上角padding, padding向下绘制一条竖线到左下角padding, height - padding再向右绘制一条横线到右下角width - padding, height - padding形成一个 L 形的坐标轴。数据的关键处理在于归一化。我们找出数据中的最大值然后将所有数据点的 y 坐标按照(value / maxValue) * (height - 2 * padding)的公式计算。这样做的好处是无论数据的绝对值是多少都能自动适应画布的高度充分利用画布空间。计算点的水平间距pointSpacing (width - 2 * padding) / (dailyData.length - 1)这样 7 个数据点会均匀分布在画布的宽度上。然后我们绘制折线。对于第一个点使用moveTo移动到该点对于后续的点使用lineTo连接到该点。这样就形成了一条连贯的折线。最后我们在每个数据点上绘制一个小圆点半径为 4这样用户可以清楚地看到每个数据点的位置。整个图表就完成了用户可以直观地看到一周内的喝水量变化趋势。functionrenderTrendSummary(dailyData){constsumdailyData.reduce((a,b)ab,0);constavgMath.round(sum/dailyData.length);constmaxMath.max(...dailyData);constminMath.min(...dailyData);constsummaryDivdocument.getElementById(trend-summary);if(!summaryDiv)return;summaryDiv.innerHTMLdiv本周总量:${sum}ml | 平均:${avg}ml | 最高:${max}ml | 最低:${min}ml/div;}renderTrendSummary函数用于计算和展示该周的统计摘要信息。首先我们使用reduce方法计算所有 7 天喝水量的总和。然后计算平均值通过将总和除以天数并使用Math.round四舍五入到整数。接着我们使用Math.max和Math.min分别找出该周的最高喝水量和最低喝水量。这些统计数据能够帮助用户快速了解自己这一周的喝水情况总量反映了整周的喝水努力程度平均值显示了日均喝水量最高值和最低值则反映了喝水量的波动范围。最后我们将这些数据格式化为易读的字符串并将其插入到摘要框的 HTML 中。四、周导航与事件绑定letcurrentWeekOffset0;functionupdateWeekLabel(startDate){constendDatenewDate(startDate);endDate.setDate(startDate.getDate()6);constlabeldocument.getElementById(week-label);if(label){label.textContent${startDate.toLocaleDateString()}-${endDate.toLocaleDateString()};}}document.addEventListener(DOMContentLoaded,(){document.getElementById(btn-prev-week)?.addEventListener(click,(){currentWeekOffset--;loadWeeklyTrend(currentWeekOffset);});document.getElementById(btn-next-week)?.addEventListener(click,(){currentWeekOffset;loadWeeklyTrend(currentWeekOffset);});loadWeeklyTrend(0);});这段代码实现了周导航的核心逻辑。我们使用全局变量currentWeekOffset来跟踪当前显示的是哪一周。初始值为 0表示当前周。updateWeekLabel函数用于更新页面上显示的周日期范围。它接收起始日期作为参数然后计算该周的结束日期起始日期加 6 天最后将起始日期和结束日期格式化为本地日期字符串并更新页面上的标签。在DOMContentLoaded事件中我们为上一周和下一周按钮绑定点击事件。当用户点击上一周按钮时currentWeekOffset减 1然后调用loadWeeklyTrend重新加载数据当点击下一周按钮时currentWeekOffset加 1。这样用户就可以方便地在不同的周之间切换查看历史数据或未来的计划。最后在页面加载完成时我们调用loadWeeklyTrend(0)加载当前周的数据这样用户打开页面时就能立即看到当前周的趋势分析。五、通过 Cordova 同步周趋势数据到原生层functionsyncWeeklyTrendToNative(dailyData){if(!window.cordova){console.warn([WeeklyTrend] cordova not ready, skip native sync);return;}cordova.exec((){console.info([WeeklyTrend] sync success);},(err){console.error([WeeklyTrend] sync failed,err);},WaterTrackerWeeklyTrend,setWeeklyData,[{dailyData}]);}syncWeeklyTrendToNative函数是 Web 层和原生层通信的桥梁。首先我们检查window.cordova是否存在这是判断 Cordova 环境是否已准备好的标准方法。如果 Cordova 还没有加载我们就打印一个警告日志并返回避免调用不存在的方法导致错误。如果 Cordova 已准备好我们使用cordova.exec方法调用原生插件。这个方法有 5 个参数成功回调函数当原生侧成功处理请求时调用失败回调函数当原生侧处理失败时调用插件名称‘WaterTrackerWeeklyTrend’方法名称‘setWeeklyData’参数数组包含要传递给原生侧的数据在这个例子中我们将dailyData7 天的喝水量数据打包成一个对象并传递给原生侧。原生侧可以接收这些数据用于绘制原生图表、进行数据分析或其他处理。六、OpenHarmony ArkTS 插件与周趋势存储// entry/src/main/ets/plugins/WaterTrackerWeeklyTrendPlugin.etsimportcommonfromohos.app.ability.common;exportinterfaceWeeklyTrendData{dailyData:number[];}exportclassWeeklyTrendStore{privatestatic_weeklyData:WeeklyTrendData|nullnull;staticsetWeeklyData(data:WeeklyTrendData){this._weeklyDatadata;}staticgetweeklyData(){returnthis._weeklyData;}}exportdefaultclassWaterTrackerWeeklyTrendPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.contextctx;}setWeeklyData(args:ArrayObject,callbackId:number){constdataargs[0]asWeeklyTrendData;WeeklyTrendStore.setWeeklyData(data);console.info([WeeklyTrendPlugin] weekly data set);}}ArkTS 侧的WaterTrackerWeeklyTrendPlugin插件接收周趋势数据并通过WeeklyTrendStore缓存。七、ArkUI 中展示周趋势图表// entry/src/main/ets/pages/WeeklyTrendPage.etsimport{WeeklyTrendStore}from../plugins/WaterTrackerWeeklyTrendPlugin;Componentstruct WeeklyTrendView{build(){constdataWeeklyTrendStore.weeklyData;Column(){Text(周趋势分析).fontSize(18).margin({bottom:8});if(datadata.dailyData.length0){Text(本周数据:${data.dailyData.join(, )}ml).fontSize(14);}else{Text(暂无数据).fontSize(14);}}.padding(16)}}WeeklyTrendView组件在原生界面中展示周趋势数据。八、小结本篇文章从周数据加载、日期聚合、Canvas 折线图绘制、周导航到 Cordova 桥接和 ArkTS 插件完整演示了周趋势分析在 Cordovaopenharmony 混合应用中的实现路径。Web 层通过loadWeeklyTrend和aggregateDailyData实现了周数据聚合通过renderTrendChart实现了 Canvas 图表绘制syncWeeklyTrendToNative将数据推送给原生侧ArkTS 侧通过WeeklyTrendStore和WaterTrackerWeeklyTrendPlugin缓存数据ArkUI 组件WeeklyTrendView则提供原生展示入口。通过一段代码一段说明的方式我们把整个周趋势分析流程拆解得足够细致。你可以在此基础上进一步扩展例如添加更多的图表类型柱状图、饼图、数据导出、趋势预测等功能让周趋势分析真正成为用户了解自己喝水习惯的有力工具.