HarmonyOS APP开发—数据眼健康追踪App需要用到这个库做一个健康追踪 App每天的步数、心率、睡眠时长要用图表展示——自己用 Canvas 画图表太累了。ohos/mpchart覆盖 7 大图表类型手势缩放、数据高亮、自定义样式开箱即用。 仓库地址https://gitcode.com/CPF-ApplicationTPC/ohos_mpchart 安装ohpm install ohos/mpchart写在前面数据眼是一个健康追踪 App核心功能是把传感器采集的健康数据可视化步数走势最近 7 天每天的步数 → 柱状图心率曲线今天 24 小时心率变化 → 折线图睡眠分布深睡/浅睡/清醒占比 → 饼状图能力评估心肺/力量/柔韧/平衡多维评分 → 雷达图这些图表如果自己用 Canvas 画每个都得写几百行画轴、画网格、画数据点、处理手势缩放、处理点击高亮……4 种图表就是 2000 行代码。ohos/mpchart提供了 7 大图表类型线形/柱状/饼状/蜡烛/气泡/雷达/瀑布自带手势交互和数据高亮配置化使用几十行就能出图。这篇文章聊什么步数柱状图——最近 7 天步数对比心率折线图——24 小时心率曲线 缩放睡眠饼状图——深睡/浅睡/清醒占比步数心率睡眠能力传感器数据数据处理图表类型BarChart 柱状图LineChart 折线图PieChart 饼状图RadarChart 雷达图手势缩放点击高亮渲染到 UI第一步安装ohpminstallohos/mpchart无需任何权限纯渲染组件。第二步步数柱状图——最近 7 天import{BarChart,BarChartModel,BarData,BarDataSet,BarEntry,JArrayList,XAxis,XAxisPosition,YAxis,Description,OnChartValueSelectedListener,Highlight,EntryOhos}fromohos/mpchartEntryComponentstruct StepsChartPage{privatebarChart:BarChartnewBarChart()privatemodel:BarChartModelnewBarChartModel()aboutToAppear(){// 模拟最近 7 天步数conststeps[8234,10245,6789,9876,12034,5678,8901]constdays[周一,周二,周三,周四,周五,周六,周日]constentriesnewJArrayListBarEntry()steps.forEach((val,i)entries.add(newBarEntry(i,val)))constdataSetnewBarDataSet(entries,每日步数)dataSet.setColorByColor(0xFF4ECDC4)// 青绿色constbarDatanewBarData(dataSet)barData.setBarWidth(0.5)this.model.setData(barData)this.model.getXAxis().setPosition(XAxisPosition.BOTTOM)this.model.getXAxis().setValueFormatter((value)days[Math.floor(value)]||)this.model.getAxisLeft().setAxisMinimum(0)this.model.getAxisRight().setEnabled(false)// 隐藏右侧 Y 轴this.model.setDescription(newDescription().setText(单位步))// 点击柱子高亮this.barChart.setOnChartValueSelectedListener({onValueSelected:(e:EntryOhos,h:Highlight){promptAction.showToast({message:${days[Math.floor(e.getX())]}:${e.getY()}步,})},onNothingSelected:(){},})this.barChart.setModel(this.model)}build(){Column(){Text(本周步数).fontSize(20).fontWeight(FontWeight.Bold).padding(12)this.barChart}.width(100%).height(400)}}第三步心率折线图——24 小时曲线import{LineChart,LineChartModel,LineData,LineDataSet,LineEntry,JArrayList,XAxisPosition}fromohos/mpchart// 24 小时心率数据每小时一个点constheartRates[62,60,58,56,55,58,64,72,80,85,78,76,74,72,70,75,82,88,92,85,76,70,66,62]constentriesnewJArrayListLineEntry()heartRates.forEach((hr,i)entries.add(newLineEntry(i,hr)))constdataSetnewLineDataSet(entries,心率 (bpm))dataSet.setColorByColor(0xFFFF6B6B)// 红色曲线dataSet.setCircleColor(0xFFFF6B6B)dataSet.setLineWidth(2)dataSet.setDrawFilled(true)// 曲线下方填充dataSet.setFillColor(0x33FF6B6B)constmodelnewLineChartModel()model.setData(newLineData(dataSet))model.getXAxis().setPosition(XAxisPosition.BOTTOM)model.getXAxis().setValueFormatter((v)${Math.floor(v)}:00)model.getAxisLeft().setAxisMinimum(40)model.getAxisRight().setEnabled(false)model.setDescription(newDescription().setText(24h 心率))// 支持手势缩放双指缩放看细节model.setPinchZoom(true)model.setDoubleTapToZoomEnabled(true)第四步睡眠饼状图——占比分布import{PieChart,PieChartModel,PieData,PieDataSet,PieEntry,JArrayList}fromohos/mpchart// 睡眠分布深睡 2h、浅睡 5h、REM 1.5h、清醒 0.5hconstentriesnewJArrayListPieEntry()entries.add(newPieEntry(2,深睡))entries.add(newPieEntry(5,浅睡))entries.add(newPieEntry(1.5,REM))entries.add(newPieEntry(0.5,清醒))constdataSetnewPieDataSet(entries,睡眠分布)dataSet.setColors([0xFF6C5CE7,0xFF74B9FF,0xFFFDCB6E,0xFFFF7675])dataSet.setSliceSpace(2)// 扇区间隙constmodelnewPieChartModel()model.setData(newPieData(dataSet))model.setUsePercentValues(true)// 显示百分比model.setDescription(newDescription().setText())为什么数据眼选了 mpchart需求自研 Canvasohos/mpchart柱状图200 行30 行折线图300 行30 行饼状图250 行20 行手势缩放手写✅ 内置点击高亮手写✅ 内置雷达图400 行30 行总结数据眼这个场景里ohos/mpchart解决了三件事多图表覆盖——柱状/折线/饼状/雷达一个库搞定健康数据可视化全家桶交互开箱即用——手势缩放、点击高亮、数据选中不用手写高度自定义——颜色、轴、网格、动画、格式化器细节全可控如果你也在做健康、金融、电商、IoT 监控等需要数据可视化的 Appohos/mpchart让你的图表 UI 告别从零造轮子几十行出图不是梦。
HarmonyOS APP开发---“数据眼“健康追踪App，需要用到这个库
HarmonyOS APP开发—数据眼健康追踪App需要用到这个库做一个健康追踪 App每天的步数、心率、睡眠时长要用图表展示——自己用 Canvas 画图表太累了。ohos/mpchart覆盖 7 大图表类型手势缩放、数据高亮、自定义样式开箱即用。 仓库地址https://gitcode.com/CPF-ApplicationTPC/ohos_mpchart 安装ohpm install ohos/mpchart写在前面数据眼是一个健康追踪 App核心功能是把传感器采集的健康数据可视化步数走势最近 7 天每天的步数 → 柱状图心率曲线今天 24 小时心率变化 → 折线图睡眠分布深睡/浅睡/清醒占比 → 饼状图能力评估心肺/力量/柔韧/平衡多维评分 → 雷达图这些图表如果自己用 Canvas 画每个都得写几百行画轴、画网格、画数据点、处理手势缩放、处理点击高亮……4 种图表就是 2000 行代码。ohos/mpchart提供了 7 大图表类型线形/柱状/饼状/蜡烛/气泡/雷达/瀑布自带手势交互和数据高亮配置化使用几十行就能出图。这篇文章聊什么步数柱状图——最近 7 天步数对比心率折线图——24 小时心率曲线 缩放睡眠饼状图——深睡/浅睡/清醒占比步数心率睡眠能力传感器数据数据处理图表类型BarChart 柱状图LineChart 折线图PieChart 饼状图RadarChart 雷达图手势缩放点击高亮渲染到 UI第一步安装ohpminstallohos/mpchart无需任何权限纯渲染组件。第二步步数柱状图——最近 7 天import{BarChart,BarChartModel,BarData,BarDataSet,BarEntry,JArrayList,XAxis,XAxisPosition,YAxis,Description,OnChartValueSelectedListener,Highlight,EntryOhos}fromohos/mpchartEntryComponentstruct StepsChartPage{privatebarChart:BarChartnewBarChart()privatemodel:BarChartModelnewBarChartModel()aboutToAppear(){// 模拟最近 7 天步数conststeps[8234,10245,6789,9876,12034,5678,8901]constdays[周一,周二,周三,周四,周五,周六,周日]constentriesnewJArrayListBarEntry()steps.forEach((val,i)entries.add(newBarEntry(i,val)))constdataSetnewBarDataSet(entries,每日步数)dataSet.setColorByColor(0xFF4ECDC4)// 青绿色constbarDatanewBarData(dataSet)barData.setBarWidth(0.5)this.model.setData(barData)this.model.getXAxis().setPosition(XAxisPosition.BOTTOM)this.model.getXAxis().setValueFormatter((value)days[Math.floor(value)]||)this.model.getAxisLeft().setAxisMinimum(0)this.model.getAxisRight().setEnabled(false)// 隐藏右侧 Y 轴this.model.setDescription(newDescription().setText(单位步))// 点击柱子高亮this.barChart.setOnChartValueSelectedListener({onValueSelected:(e:EntryOhos,h:Highlight){promptAction.showToast({message:${days[Math.floor(e.getX())]}:${e.getY()}步,})},onNothingSelected:(){},})this.barChart.setModel(this.model)}build(){Column(){Text(本周步数).fontSize(20).fontWeight(FontWeight.Bold).padding(12)this.barChart}.width(100%).height(400)}}第三步心率折线图——24 小时曲线import{LineChart,LineChartModel,LineData,LineDataSet,LineEntry,JArrayList,XAxisPosition}fromohos/mpchart// 24 小时心率数据每小时一个点constheartRates[62,60,58,56,55,58,64,72,80,85,78,76,74,72,70,75,82,88,92,85,76,70,66,62]constentriesnewJArrayListLineEntry()heartRates.forEach((hr,i)entries.add(newLineEntry(i,hr)))constdataSetnewLineDataSet(entries,心率 (bpm))dataSet.setColorByColor(0xFFFF6B6B)// 红色曲线dataSet.setCircleColor(0xFFFF6B6B)dataSet.setLineWidth(2)dataSet.setDrawFilled(true)// 曲线下方填充dataSet.setFillColor(0x33FF6B6B)constmodelnewLineChartModel()model.setData(newLineData(dataSet))model.getXAxis().setPosition(XAxisPosition.BOTTOM)model.getXAxis().setValueFormatter((v)${Math.floor(v)}:00)model.getAxisLeft().setAxisMinimum(40)model.getAxisRight().setEnabled(false)model.setDescription(newDescription().setText(24h 心率))// 支持手势缩放双指缩放看细节model.setPinchZoom(true)model.setDoubleTapToZoomEnabled(true)第四步睡眠饼状图——占比分布import{PieChart,PieChartModel,PieData,PieDataSet,PieEntry,JArrayList}fromohos/mpchart// 睡眠分布深睡 2h、浅睡 5h、REM 1.5h、清醒 0.5hconstentriesnewJArrayListPieEntry()entries.add(newPieEntry(2,深睡))entries.add(newPieEntry(5,浅睡))entries.add(newPieEntry(1.5,REM))entries.add(newPieEntry(0.5,清醒))constdataSetnewPieDataSet(entries,睡眠分布)dataSet.setColors([0xFF6C5CE7,0xFF74B9FF,0xFFFDCB6E,0xFFFF7675])dataSet.setSliceSpace(2)// 扇区间隙constmodelnewPieChartModel()model.setData(newPieData(dataSet))model.setUsePercentValues(true)// 显示百分比model.setDescription(newDescription().setText())为什么数据眼选了 mpchart需求自研 Canvasohos/mpchart柱状图200 行30 行折线图300 行30 行饼状图250 行20 行手势缩放手写✅ 内置点击高亮手写✅ 内置雷达图400 行30 行总结数据眼这个场景里ohos/mpchart解决了三件事多图表覆盖——柱状/折线/饼状/雷达一个库搞定健康数据可视化全家桶交互开箱即用——手势缩放、点击高亮、数据选中不用手写高度自定义——颜色、轴、网格、动画、格式化器细节全可控如果你也在做健康、金融、电商、IoT 监控等需要数据可视化的 Appohos/mpchart让你的图表 UI 告别从零造轮子几十行出图不是梦。