鸿蒙(HarmonyOS)应用开发实战——MpChart运动健康场景实践案例-CSDN博客

本文链接：https://blog.csdn.net/CTrup/article/details/142765086

往期知识点整理

介绍

MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。

本示例介绍了MpChart图表组件的使用方法。

该组件多用于可视化等场景。

效果图预览

使用说明：

滑动屏幕，查看各图表组件。
点击曲线图内容，展示图表信息。

实现思路

健身记录部分：使用柱状图描述近七日每日的热量消耗情况，主要实现点在于柱状图的创建过程。

初始化图表配置构建类

  // 初始化图表配置构建类
  this.model = new BarChartModel();
  // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
  this.model.setMaxVisibleValueCount(VISIBLE_VALUE_COUNT);
  // 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分
  this.model.setDrawGridBackground(true);
  // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
  this.model.setGridBackgroundColor(GRID_BG_COLOR);
  // 设置不绘制柱状图的柱体阴影背景
  this.model.setDrawBarShadow(false);
  // 设置柱状图的数值在柱体上方
  this.model.setDrawValueAboveBar(true);
  // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别
  this.model.setHighlightFullBarEnabled(true);

限制线的设置

  // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
  this.limitLine = new LimitLine(STEP_TARGET_NUMBER, STEP_TARGET);
  // 设置限制线的宽度
  this.limitLine.setLineWidth(LINE_WIDTH);
  // 设置限制线虚线类型的长度
  this.limitLine.enableDashedLine(DASHED_LINE_LENGTH, DASHED_SPACE_LENGTH, ZERO);
  // 设置限制线的颜色
  this.limitLine.setLineColor(Color