ArkUI Canvas 实战：快速绘制柱状图图表组件

摘要

在 HarmonyOS 应用开发中，数据可视化越来越常见，比如健康数据、销售业绩、学习进度等都离不开图表展示。不过目前 ArkUI 并没有提供现成的图表组件，这时候开发者就需要用 Canvas 自己"动手"画图了。本文就带你一步步实战一个简单的柱状图绘制方法，并结合一些实际场景演示 ArkUI 在图表方面的可行方案。

引言

在 Web 前端或 Flutter、React Native 这类跨平台框架中，我们通常可以直接使用像 Chart.js、ECharts、fl_chart 这样的图表库。但在 ArkUI（特别是 HarmonyOS NEXT 的 Stage 模型中），官方目前并没有内置图表组件，开发者只能通过 Canvas API 来自己绘制。

虽然听起来有点"原始"，但其实操作起来也没那么复杂，只要掌握基本的绘图逻辑，就能灵活实现柱状图、折线图、饼图等功能。而且自绘的图表灵活度更高，样式定制也更自由，非常适合做自定义可视化控件。

如何使用 ArkUI 的 Canvas 实现柱状图

搭建基本框架

ArkUI 的 Canvas 就像一块画布，我们可以在上面使用 rect()、fillStyle()、fill() 等指令去绘制各种图形。我们以一个简单的柱状图为例：

代码示例

ts 复制代码

@Entry
@Component
struct BarChartExample {
  private data: number[] = [50, 100, 150, 200, 250];

  build() {
    Column() {
      Text('销售数据柱状图')
        .fontSize(20)
        .margin({ bottom: 20 })

      Canvas(() => {
        this.data.forEach((value, index) => {
          const x = index * 60 + 10;  // 每根柱子之间留点空隙
          const y = 300 - value;      // y 坐标从顶部开始，越小越高
          const width = 40;
          const height = value;

          rect(x, y, width, height);         // 绘制矩形
          fillStyle('#007DFF');              // 设置颜色
          fill();                            // 填充颜色
        });
      }).width('100%').height(300).backgroundColor('#f4f4f4')
    }
    .padding(20)
  }
}

实际应用场景案例分析

应用场景一：健康类应用展示步数统计

你可以用柱状图来展示用户一周每天的步数，图表通过 Canvas 实现：

示例代码

ts 复制代码

private steps: number[] = [3000, 5000, 7000, 10000, 9000, 6000, 4000];

Canvas(() => {
  this.steps.forEach((step, index) => {
    const x = index * 50 + 15;
    const y = 200 - step / 100;
    const width = 30;
    const height = step / 100;

    rect(x, y, width, height);
    fillStyle('#34C759'); // 健康绿色
    fill();

    // 绘制底部文字
    fillStyle('#000');
    fillText(['日', '一', '二', '三', '四', '五', '六'][index], x, 210);
  });
}).width('100%').height(250);

分析说明：

使用 step / 100 做了缩放处理，避免柱子过高。
使用 fillText() 添加了底部说明，方便用户识别每一天。
这种形式适合健康、健身类应用快速实现统计展示。

应用场景二：财务类 App 展示月度收支

假设你做的是一个财务应用，每个月的收入可以用柱状图来表示：

ts 复制代码

private incomeData: number[] = [3200, 2800, 3500, 4000, 3800, 4100];

Canvas(() => {
  this.incomeData.forEach((value, index) => {
    const scale = 3000; // 设置一个基准高度做缩放
    const x = index * 55 + 20;
    const y = 300 - (value / scale) * 200;
    const width = 35;
    const height = (value / scale) * 200;

    rect(x, y, width, height);
    fillStyle('#FF9500'); // 收入用橘黄色表示
    fill();
  });
}).width('100%').height(300);

场景亮点：

数据来源可直接绑定后台 API。
UI 可以根据收入值动态调整柱子高度，便于用户直观看到趋势。
柱状图也可以通过动画逐步增长，增强用户体验（后续可配合 animateTo() 实现）。

应用场景三：学习类平台展示课程完成进度

如果你开发的是一款教育类 App，柱状图可以展示各个课程模块的学习完成百分比：

ts 复制代码

private progress: number[] = [0.6, 0.8, 0.3, 0.9, 0.5];

Canvas(() => {
  this.progress.forEach((rate, index) => {
    const x = index * 60 + 10;
    const y = 200 - rate * 150;
    const width = 40;
    const height = rate * 150;

    rect(x, y, width, height);
    fillStyle('#5856D6'); // 紫色代表学习进度
    fill();
  });
}).width('100%').height(250);

场景说明：

rate 是 0~1 之间的浮点数，表示进度百分比。
这种图表可以配合课程名称和进度条文本一同展示，提升用户交互感知。

QA 问答环节

Q1：Canvas 的性能表现怎么样？会不会卡顿？ **A：**对于一般的数据量（比如几十个图形元素），Canvas 绘制性能完全没问题。如果数据量较大，可以考虑分页渲染或懒加载策略。

Q2：可以做动态动画效果吗？比如柱状图"长高"？ **A：**目前 ArkUI Canvas 不直接支持动画指令，但可以通过定时更新数据 + update() 的方式实现动画效果，比如每 16ms 高度加 5px 实现平滑增长。

Q3：有没有第三方库可以快速做图表？ **A：**目前社区有一些 HarmonyOS 图表组件项目，比如 harmonyos-chart（需要查看社区仓库），但集成复杂度略高。Canvas 是目前最通用、最灵活的方式。

总结

虽然 ArkUI 目前没有内置图表组件，但借助 Canvas 你完全可以实现各种自定义图表展示------无论是柱状图、折线图还是饼图，只要理解基本绘图逻辑，就能灵活扩展。

如果你正在做健康管理、数据统计、教育进度类的 App，不妨试着用 Canvas 自绘图表，既能灵活定制样式，又能锻炼你的绘图功力。

后续你还可以尝试：

加入动画效果（逐步增长）
支持图例、标签、动态点击交互
使用手势放大缩小图表区域

HarmonyOS 的图表之路还在不断探索中，但一步步手绘，也是一种极好的成长方式。