【鸿蒙南向开发】开源三方库新版本MPChart

简介

随着移动应用的不断发展，数据可视化成为提高用户体验和数据交流的重要手段之一。在OpenAtom OpenHarmony（简称“OpenHarmony”）应用开发中，一个强大而灵活的图表库是实现这一目标的关键。

在ohpm中心仓中，汇聚了众多开发者贡献的图表库，其中之一就是MPChart。自其发布以来，MPChart已被广泛应用于各类应用程序，它为开发者提供了丰富的功能和灵活性，使得创建各种类型的图表变得轻而易举。

效果图

特性与优势

1.多样的图表类型：MPChart支持多种图表类型，从基本的折线图、柱状图、圆饼图、散点图到更复杂的蜡烛图、雷达图、瀑布图和组合图等，开发者可以根据项目需要选择最适合的图表类型。2.高度可定制：该库允许开发者通过代码自定义图表的外观和行为，从而实现个性化的设计，可以定制图表的颜色、字体、坐标轴样式等，以满足项目的UI需求。3.动画效果：MPChart内置了丰富的动画效果，使得图表的展示更加生动有趣。这不仅提升了用户体验，也使得数据的变化更加直观。

新版本使用说明

MPChart在2023年6月1日推出了首个正式版2.0.0，该版本主要利用Path和Shape组件实现了图表的绘制。而后，经过了多个版本的优化与迭代，在2024年1月8日，MPChart迎来重大更新，发布了采用Canvas组件绘制的重构版本3.0.0-rc.0，标志着MPChart库进入全新阶段。与先前版本相比，重构版本在细节处理和功能拓展上均进行了显著优化，同时要求SDK版本在API10以上。截至发稿前，MPChart重构版本还处于rc版本阶段。以下是MPChart重构版本新增和优化的一些功能：

1.图表支持按百分比设置宽高尺寸；且当图表尺寸调整时，能够自动重绘以适配新的大小，确保内容的准确展示。

BarChart({ model: this.model })
          .width('100%')
          .height('70%')

2.新增图表横向滚动功能，使得宽幅数据图表得以部分显示。用户仅需滑动屏幕便可逐步浏览全部信息。该功能不仅提升了信息的细节展示，还扩大了可视内容的范围。

3.新增了对自定义点击、长按、双击、拖拽等事件的支持。用户可以设置监听器监听这些交互，并且支持引入自定义组件以响应这些动作。

4.对组合图进行了扩展，新增设置瀑布图的支持。

5.对手势缩放以及双击缩放的交互进行了优化，提高了操作的流畅性。6.提供了更加简化的使用体验，使用时需要定义的代码量更少。这些改进使得MPChart更加易用且功能丰富，满足了用户对高效图表工具的需求。因代码重构，MPChart 2.7.0及以下版本（以下简称”2.7版本“）使用的方法和MPChart 3.0.0-rc.0及以上版本（以下检查”3.0版本”）略有不同，接下来分别介绍使用方法。

一、创建图表对象

首先需要创建一个model对象，用来承载图表数据。1）3.0版本

this.model = new LineChartModel();

2）2.7版本2.7版本需要在创建model对象并且传入数据后调用init方法进行初始化。

this.model = new LineChartModel();
//省略传入数据代码
model.init();

二、设置图表数据

1）3.0版本

// 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据
let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();

// 循环生成 1 到 20 的随机数据，并添加到 values 中
for (let i = 1; i <= 20; i++) {
  values.add(new EntryOhos(i, Math.random() * 100));
}

// 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'
let dataSet = new LineDataSet(values