【闲谈鸿蒙三方库】图表库@ohos/mpchart 原创

三方库背景

在鸿蒙应用开发场景中，同样会遇到很多场景，需要将复杂的数据转化为直观易懂的图表形式，如折线图、柱状图、饼图等，帮助开发者在电商、金融、健康等多种应用中高效、准确地展示数据趋势和统计信息。例如，在电商应用中，往往需要一些图表展示商品销量趋势，帮助用户了解热门商品；在金融应用中，也能通过一些图表呈现gu票走势，辅助用户做出投资决策。

mpchart是一个OpenHarmony/HarmonyOS的网络图片加载库。它主要对标安卓MPAndroidChart，提供线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库，简化了数据可视化的实现过程，提升了应用的用户体验和数据呈现效果。

开源代码地址：https://gitcode.com/openharmony-tpc/ohos_mpchart

快速上手方法

1.下载安装

ohpm install @ohos/mpchart

当前稳定版本3.0.20

2.构建图表配置类

let model:ChartModel = new LineChartModel();
// 配置图表
// model.setXXX

3.绑定图表数据

// 获取图表详细数据
let lineData: LineData = this.getLineData();
// 将数据与图表配置类绑定
model.setData(lineData);

4.在组件/页面中使用对应的图表组件

LineChart({ model: this.model })
  .width('100%')
  .height('30%')

更多功能展示

示例1 折线图

首先构建LineChartModel，内部包含数据data，然后使用LineChart自定义组件。

@Component
struct LineChartDemo {
  @State private model: LineChartModel = new LineChartModel();

  async aboutToAppear(): Promise<void> {
    // Step1:初始化图表配置构建类
    this.model = new LineChartModel();
    // Step2:获取图表数据
    let lineData: LineData = await this.getLineData();
    this.model.setData(lineData);
  }

  private async getLineData(): Promise<LineData> {
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();

    for (let i = 0; i < 20; i++) {
      let val = Number(Math.random() * 141);
      if (Math.random() * 100 < 25) {
        values.add(new EntryOhos(i, val));
      } else {
        values.add(new EntryOhos(i, val));
      }
    }
    let dataSet:LineDataSet = new LineDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    dataSet.setDrawIcons(true);

    dataSet.setMode(Mode.LINEAR);
    dataSet.setDrawCircles(true); //折线点画圆圈
    dataSet.setDrawCircleHole(false); //设置内部孔
    dataSet.setColorByColor(Color.Black); //设置折线颜色

    let gradientFillColor = new JArrayList<ChartColorStop>();
    gradientFillColor.add(["#0C0099CC", 0.2]);
    gradientFillColor.add(["#7F0099CC", 0.4]);
    gradientFillColor.add(["#0099CC", 1.0]);
    dataSet.setGradientFillColor(gradientFillColor);
    dataSet.setDrawFilled(true);

    // 设置数据点的颜色
    dataSet.setCircleColor(Color.Blue); // 可以设置为你想要的颜色

    // 设置数据点的半径
    dataSet.setCircleRadius(4); // 设置半径大小
    dataSet.setCircleHoleRadius(2); //设置内径

    let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
    dataSetList.add(dataSet);

    return new LineData(dataSetList);
  }

  build() {
    Column() {
      // Step3:使用图表组件
      LineChart({ model: this.model })
        .width('100%')
        .height('30%')
        .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
  }

示例2 柱状图

首先构建BarChartModel，内部包含数据data，然后使用BarChart自定义组件。

@Component
struct BarChartDemo {
  @State private model: BarChartModel = new BarChartModel();

  async aboutToAppear(): Promise<void> {
    // Step1:初始化图表配置构建类
    this.model = new BarChartModel();
    this.model.getDescription()?.setEnabled(false);
    // Step2:获取图表数据
    let barData: BarData = await this.getBarData();
    this.model.setData(barData);
  }

  private async getBarData(): Promise<BarData> {
    let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
    values.add(new BarEntry(1, 73.3));
    values.add(new BarEntry(2, 5.4));
    values.add(new BarEntry(3, 73.9));
    values.add(new BarEntry(4, 79.9));
    values.add(new BarEntry(5, 69.3));
    values.add(new BarEntry(6, 70.7));
    values.add(new BarEntry(7, 81.2));
    values.add(new BarEntry(8, 13.1));
    values.add(new BarEntry(9, 34.2));
    values.add(new BarEntry(10, 58.4));

    let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
    dataSet.setHighLightColor(Color.Black);
    dataSet.setDrawIcons(false);
    dataSet.setColorByColor(Color.Pink);

    let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
    dataSetList.add(dataSet);

    let barData: BarData = new BarData(dataSetList);
    barData.setBarWidth(0.85);
    return barData;
  }

  build() {
    Column() {
      // Step3:使用图表组件
      BarChart({ model: this.model })
        .width('100%')
        .height('30%')
    }
    .height('100%')
    .width('100%')
  }
}

示例3 饼图

首先构建PieChartModel，内部包含数据data，然后使用PieChart自定义组件。

@Component
struct PieChartDemo {
  private model: PieChartModel = new PieChartModel();
  protected parties: string[] = [
    "Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H",
    "Party I", "Party J", "Party K", "Party L", "Party M", "Party N", "Party O", "Party P",
    "Party Q", "Party R", "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
    "Party Y", "Party Z"
  ];

  async aboutToAppear(): Promise<void> {
    // Step1:初始化图表配置构建类
    this.model = new PieChartModel();
    // Step2:获取图表数据
    let pieData: PieData = await this.getPieData();
    this.model.setData(pieData);
  }

  private async getPieData(): Promise<PieData> {
    let entries: JArrayList<PieEntry> = new JArrayList<PieEntry>();

    for (let i = 0; i < 5; i++) {
      entries.add(new PieEntry(((Math.random() * 3) + 3 / 5),
        this.parties[i % this.parties.length]));
    }

    let dataSet: PieDataSet = new PieDataSet(entries, "Election Results");
    dataSet.setDrawIcons(false);
    dataSet.setSliceSpace(1);
    dataSet.setSelectionShift(5);
    dataSet.setValueTextColor(Color.White);
    dataSet.setValueTextColor(25);

    return new PieData(dataSet);
  }

  build() {
    Column() {
      // Step3:使用图表组件
      PieChart({ model: this.model })
        .width('100%')
        .height('70%')
        .backgroundColor(Color.White)
    }
    .height('100%')
    .width('100%')
  }
}

实现原理

1.核心类关系

从上述例子来看，每种图表都对应分成了三个类：Chart组件，Model图表配置类,Data图表数据

classDiagram
    class Chart{
    }
    class Model{
    }
    class Data{
    }
    Chart "1" o-- "1" Model : 聚合
    Model "1" o-- "1" Data : 聚合

2.核绘图流程

在Model的onDraw方法里，通过操作CanvasRenderingContext2D绘图。

局限性

1.该库作者核心逻辑是参考安卓MPAndroidChart移植，因此一些对象和接口设计上还保留了JAVA的风格。比如JArrayList类，就完全按照java的接口设计的容器类，不过这对java程序员倒是蛮友好。
2.图表配置Model类聚合了图表数据data类。这2个类参考MPAndroidChart设计的话也应该都是Chart的属性，不应该有聚合的关系，也不应该通过Model类来触发invalidate重新绘制。

结束语

随着越来越多的鸿蒙应用上线，各种开源的闭源的，开发者自发的和大厂贡献的库也正在逐步涌现出来，同时也有一些早期的库已被淘汰。今年我将抽空基于HarmonyOS 5.0+试试水，根据实际效果和下载量筛选在awesome-harmony-library，帮助大家快速找到合适的三方库，也请大家也帮忙Star下这个仓库:)