HarmonyOS-Next开源三方库 MPChart：打造出色的图表体验

络腮胡菲菲  金牌会员 | 2024-7-24 09:05:15 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 838|帖子 838|积分 2514

点击下载源码
https://download.csdn.net/download/liuhaikang/89228765

     
简介

随着移动应用的不停发展，数据可视化成为提高用户体验和数据交换的重要手段之一。在 OpenAtom OpenHarmony（简称“OpenHarmony”）应用开发中，一个强大而机动的图表库是实现这一目标的关键。
在 ohpm 中心仓（OpenHarmony三方库中心仓）中，汇聚了众多开发者贡献的图表库，其中之一就是 MPChart。自其发布以来，MPChart 已被广泛应用于各类应用步调，它为开发者提供了丰富的功能和机动性，使得创建各种范例的图表变得安若泰山。
效果图

特性与上风

         

  • 多样的图表范例： MPChart 支持多种图表范例，从根本的折线图、柱状图、圆饼图、散点图到更复杂的蜡烛图、雷达图、瀑布图和组合图等，开发者可以根据项目需要选择最得当的图表范例。
  • 高度可定制： 该库允许开发者通过代码自界说图表的外观和行为，从而实现个性化的设计，可以定制图表的颜色、字体、坐标轴样式等，以满足项目标 UI 需求。
  • 动画效果： 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 })
  2.           .width('100%')
  3.           .height('70%')
  4. ​
复制代码
        

  • 新增图表横向滚动功能，使得宽幅数据图表得以部分显示。用户仅需滑动屏幕便可渐渐浏览全部信息。该功能不仅提升了信息的细节展示，还扩大了可视内容的范围。
  • 新增了对自界说点击、长按、双击、拖拽等变乱的支持。用户可以设置监听器监听这些交互，而且支持引入自界说组件以相应这些动作。
  • 对组合图进行了扩展，新增设置瀑布图的支持。
  • 对手势缩放以及双击缩放的交互进行了优化，提高了利用的流通性。
  • 提供了更加简化的利用体验，利用时需要界说的代码量更少。
这些改进使得 MPChart 更加易用且功能丰富，满足了用户对高效图表工具的需求。
因代码重构，MPChart 2.7.0 及以下版本（以下简称”2.7 版本“）利用的方法和 MPChart 3.0.0-rc.0 及以上版本（以下检查”3.0 版本”）略有不同，接下来分别介绍利用方法。
一、 创建图表对象

首先需要创建一个 model 对象，用来承载图表数据。
1）3.0 版本
  1. this.model = new LineChartModel();
  2. ​
复制代码
2）2.7 版本
2.7 版本需要在创建 model 对象而且传入数据后调用 init 方法进行初始化。
  1. this.model = new LineChartModel();
  2. //省略传入数据代码
  3. model.init();
  4. ​
复制代码
二、 设置图表数据

1）3.0 版本
  1. // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据
  2. let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
  4. // 循环生成 1 到 20 的随机数据，并添加到 values 中
  5. for (let i = 1; i <= 20; i++) {
  6.   values.add(new EntryOhos(i, Math.random() * 100));
  7. }
  9. // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'
  10. let dataSet = new LineDataSet(values, 'DataSet');
  12. let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
  13. dataSetList.add(dataSet);
  14. // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model
  15. let lineData: LineData = new LineData(dataSetList);
  16. this.model.setData(lineData);
  17. ​
复制代码
利用 JArrayList 存储 EntryOhos 范例的数据，然后通过 LineDataSet 和 LineData 对象来设置图表的数据集。最后，将数据传递给 model。在 2.7 版本中，需要将最后一行的 setData 方法更换为 setLineData 方法，即 this.model.setLineData(lineData)。
三、 引入图表组件

在页面结构中引入 LineChart 组件，可通过属性设置图表的宽高，配景致等。
1）3.0 版本
  1. LineChart({ model: this.model })
  2.           .width('100%')
  3.           .height('100%')
  4.           .backgroundColor(Color.White)
  5. ​
复制代码
2）2.7 版本
2.7 版本不支持通过组件.width 和.height 设置宽高属性，而是通过 model 的 setWidth()和 setHeight()方法设置宽高，而且不能设置百分比宽高，只能设置固定的数值宽高。
  1. aboutToAppear() {
  2.     //...
  3.     this.model.setWidth(300);
  4.     this.model.setHeight(300);
  5.     this.model.init();
  6. }
  7. LineChart({ lineChartModel: $model })
  8. ​
复制代码
通过以上三步即可创建一个底子的 LineChart，效果图如下：

3.0 版本的页面完整代码如下：
  1. import {
  2. JArrayList,EntryOhos,LineDataSet,ILineDataSet,LineData,LineChart,LineChartModel,
  3. } from '@ohos/mpchart';
  5. @Entry
  6. @Component
  7. struct Index {
  8.   private model: LineChartModel = new LineChartModel();
  10.   aboutToAppear() {
  11.     // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据
  12.     let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
  13.     // 循环生成 1 到 20 的随机数据，并添加到 values 中
  14.     for (let i = 1; i <= 20; i++) {
  15.       values.add(new EntryOhos(i, Math.random() * 100));
  16.     }
  17.     // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'
  18.     let dataSet = new LineDataSet(values, 'DataSet');
  20.     let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
  21.     dataSetList.add(dataSet);
  22.     // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model
  23.     let lineData: LineData = new LineData(dataSetList);
  24.     this.model?.setData(lineData);
  25.   }
  27.   build() {
  28.     Column() {
  29.       LineChart({ model: this.model })
  30.         .width('100%')
  31.         .height('100%')
  32.         .backgroundColor(Color.White)
  33.     }
  34.   }
  35. }
  36. ​
复制代码
2.7 版本的页面完整代码如下：
  1. import {
  2.   LineChart,LineChartModel,XAxis,XAxisPosition,YAxis,
  3.   AxisDependency,YAxisLabelPosition,LineData,LineDataSet,EntryOhos,JArrayList,ILineDataSet
  4. } from '@ohos/mpchart'
  6. @Entry
  7. @Component
  8. struct Basic {
  9.   topAxis: XAxis = new XAxis(); //顶部X轴
  10.   bottomAxis: XAxis = new XAxis(); //底部X轴
  11.   mWidth: number = 350; //表的宽度
  12.   mHeight: number = 300; //表的高度
  13.   leftAxis: YAxis | null = null;
  14.   rightAxis: YAxis | null = null;
  15.   lineData: LineData | null = null;
  16.   @State
  17.   lineChartModel: LineChartModel = new LineChartModel();
  18.   titleSelcetString: string = 'X'
  20.   public aboutToAppear() {
  21.     this.lineData = this.initCurveData(30, 180);
  23.     this.topAxis.setLabelCount(4, false);
  24.     this.topAxis.setPosition(XAxisPosition.TOP);
  25.     this.topAxis.setAxisMinimum(11);
  26.     this.topAxis.setAxisMaximum(44);
  28.     this.bottomAxis.setLabelCount(4, false);
  29.     this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
  30.     this.bottomAxis.setAxisMinimum(11);
  31.     this.bottomAxis.setAxisMaximum(44);
  33.     this.leftAxis = new YAxis(AxisDependency.LEFT);
  34.     this.leftAxis.setLabelCount(10, false);
  35.     this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
  36.     this.leftAxis.setAxisMinimum(10);
  37.     this.leftAxis.setAxisMaximum(200);
  39.     this.rightAxis = new YAxis(AxisDependency.RIGHT);
  40.     this.rightAxis.setDrawGridLines(false);
  41.     this.rightAxis.setLabelCount(10, false);
  42.     this.rightAxis.setAxisMinimum(10); // this replaces setStartAtZero(true)
  43.     this.rightAxis.setAxisMaximum(200);
  45.     this.leftAxis.setDrawLimitLinesBehindData(true);
  47.     this.lineChartModel.setTopAxis(this.topAxis);
  48.     this.lineChartModel.setBottomAxis(this.bottomAxis);
  49.     this.lineChartModel.setWidth(this.mWidth);
  50.     this.lineChartModel.setHeight(this.mHeight);
  51.     if (this.leftAxis) {
  52.       this.lineChartModel.setLeftAxis(this.leftAxis);
  53.     }
  54.     if (this.rightAxis) {
  55.       this.lineChartModel.setRightAxis(this.rightAxis);
  56.     }
  57.     if (this.lineData) {
  58.       this.lineChartModel.setLineData(this.lineData);
  59.     }
  60.     this.lineChartModel.init();
  61.   }
  63.   /**
  64.    * 初始化数据
  65.    * @param count  曲线图点的个数
  66.    * @param range  y轴范围
  67.    */
  68.   private initCurveData(count: number, range: number): LineData {
  70.     let values = new JArrayList<EntryOhos>();
  72.     for (let i = 0; i < count; i++) {
  73.       let val: number = Math.random() * range;
  74.       values.add(new EntryOhos(i, val));
  75.     }
  77.     let dataSet = new JArrayList<ILineDataSet>();
  79.     let set1 = new LineDataSet(values, "DataSet 1");
  80.     dataSet.add(set1);
  82.     return new LineData(dataSet)
  83.   }
  85.   build() {
  86.     Column() {
  87.       Stack({ alignContent: Alignment.TopStart }) {
  88.         LineChart({ lineChartModel: $lineChartModel })
  89.       }
  90.     }
  91.   }
  92. }
  93. ​
复制代码
除了根本设置之外，我们还可以进行图表的其他个性化设置，接下来介绍图表的个性化设置。
四、 个性化设置

1、 XY 轴的绘制

1）3.0 版本
3.0 版本中可以通过如下代码获取到 x 轴/y 轴对象。
  1. //获取x轴
  2. let xAxis = model.getXAxis();
  3. //获取左y轴
  4. let leftAxis = model.getAxisLeft();
  5. //获取右y轴
  6. let rightAxis = model.getAxisRight();
  7. ​
复制代码
2）2.7 版本
2.7 版本可以通过如下代码设置 x 轴/y 轴对象。
  1. //x轴
  2. let topAxis = new XAxis();
  3. //...省略设置属性方法
  4. topAxis.setPosition(XAxisPosition.TOP);
  6. //左y轴
  7. let leftAxis = new YAxis(AxisDependency.LEFT);
  8. //...省略设置属性方法
  9. this.lineChartModel.setLeftAxis(leftAxis);
  11. //右y轴
  12. let rightAxis = new YAxis(AxisDependency.RIGHT);
  13. //...省略设置属性方法
  14. this.lineChartModel.setRightAxis(rightAxis);
  15. ​
复制代码
获取 x 轴和左右 y 轴对象之后，可以调用以下方法设置它们的属性，在 3.0 版本和 2.7 版本中都可利用。
x 轴/y 轴都可设置：
  2.              ● setEnabled(enabled: boolean):设置轴是否被绘制。默认绘制，设置为false则不会被绘制。
  4.              ● setDrawLabels(enabled: boolean):设置为true绘制轴的标签。
  6.              ● setDrawAxisLine(enabled: boolean): 设置为true绘制轴线。
  8.              ● setDrawGridLines(enabled: boolean): 设置为true绘制网格线。
  10.              ● setTextColor(color: string | number | CanvasGradient | CanvasPattern): 设置轴标签文本颜色。
  12.              ● setTextSize(size: number):设置轴标签的字体大小。
  13.              ● setTypeface(tf: FontFamily):设置轴标签的FontFamily，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
  14.              ● setGridColor(color: number): 设置网格线颜色。
  16.              ● setGridLineWidth(width: number):设置网格线宽度。
  18.              ● setAxisLineColor(color: number):设置此轴的坐标轴的颜色。
  20.              ● setAxisLineWidth(width: number): 设置此轴的坐标轴的宽度。
  22.              ● enableGridDashedLine(lineLength: number, spaceLength: number, phase: number): 显示网格线虚线模式，"lineLength"控制短线条的长度，"spaceLength"控制两段线之间的间隔长度，"phase"控制开始的点。
  24.              ● setAxisMaxValue(max: number):设置一个自定义的最大值，如果设置了数值，这个值将不会依赖于提供的数据自动计算。
  26.              ● setAxisMinValue(min: number): 设置一个自定义的最小值。如果设置了数值，这个值将不会依赖于提供的数据进行自动计算。
  27. ​
复制代码
x 轴专属设置：
  1.              ● setAvoidFirstLastClipping(enabled: boolean):如果设置为true，图表将避免在图表或屏幕的边缘的标签条目被裁剪掉。
  3.              ● setPosition(pos: XAxisPosition):设置XAxis应该出现的位置。可以选择TOP，BOTTOM，BOTH\_SIDED，TOP\_INSIDE或者BOTTOM\_INSIDE。
  4. ​
复制代码
y 轴专属设置：
  1.              ● setInverted(enabled: boolean): 如果设置为true，这个轴将被反向，那意味着最大值将被放到底部，最小值将被放到顶部。
  3.              ● setSpaceTop(percent: number):设置在图表上最高处的值相比轴上最高值的顶端空间（占总轴范围的百分比）。
  5.              ● setSpaceBottom(percent: number): 设置在图表上最低处的值相比轴上最低处值的底部空间（总轴范围的百分比）。
  7.              ● setPosition(pos: YAxisLabelPosition):设置轴标签应该被绘制的位置。INSIDE\_CHART或者OUTSIDE\_CHART中的一个。
  8. ​
复制代码
2、 图表交互设置

图表 model 对象可调用以下方法进行图表交互个性化设置：
  1.              ● setTouchEnabled( enabled: boolean): 允许打开或者关闭与图表的所有触摸交互的情况。
  3.              ● setDragEnabled( enabled: boolean): 打开或关闭对图表的拖动。
  5.              ● setScaleEnabled(enabled: boolean):打开或关闭对图表所有轴的的缩放。
  7.              ● setScaleXEnabled(enabled: boolean): 打开或关闭x轴的缩放
  9.              ● setScaleYEnabled(enabled: boolean): 打开或关闭y轴的缩放。
  11.              ● setPinchZoom(enabled: boolean): 如果设置为true，手势捏合缩放被打开。如果设置为false，x和y轴可以被手势捏合缩放。
  13.              ● setHighlightPerTapEnabled(enabled: boolean): 如果设置为true，在图表中选中触发高亮效果。
  15.              ● setHighlightPerDragEnabled(enabled: boolean): 设置为true时允许在手指滑动结束时显示高亮效果。默认：true
  17.              ● setHighlightIndicatorEnabled(enabled: boolean): 如果设置为true， 选中数据时，将展示指标线。
  19.              ● 此方法为dataset设置：setVisibleXRangeMaximum(maxXRange： number):设置x轴最多显示数据条数，（要在设置数据源后调用，否则是无效的）
  20. ​
复制代码
3、 颜色设置

         

  • 数据集颜色设置
针对某个数据集，可以利用 dataSet.setColor(color：number) 方法来设置其颜色。例如，在折线图中：
  1. this.dataSet.setColorByColor(Color.Blue); //设置折线的颜色为蓝色
  2. ​
复制代码
        

  • 渐变颜色设置
对于一些图表元素，可以利用渐变颜色。可以通过 dataSet.setGradientFillColor() 方法来实现。这通常用于折线图的填充色效果。
  1. let gradientFillColor = new JArrayList<ChartColorStop>();
  2. gradientFillColor.add(["#0C0099CC", 0.2]);
  3. gradientFillColor.add(["#7F0099CC", 0.4]);
  4. gradientFillColor.add(["#0099CC", 1.0]);
  5. this.dataSet.setGradientFillColor(gradientFillColor);
  6. ​
复制代码
        

  • 多种颜色设置
如果想为数据点设置不同的颜色，可以通过设置 dataSet.setColorsByVariable(colors: number[]) 方法，传入一个颜色列表。
  1. dataSet.setColorsByVariable([
  2. ColorTemplate.colorRgb(192, 255, 140), 
  3. ColorTemplate.colorRgb(255, 247, 140), 
  4. ColorTemplate.colorRgb(255, 208, 140)]);
  5. ​
复制代码
4、 自界说坐标轴标签

如果不想用坐标轴本身的阿拉伯数字标签，也可以自界说坐标轴标签，实现方法是通过创建自界说类实现 IAxisValueFormatter 接口，修改其中的 getFormattedValue 方法，最后调用坐标轴对象的 setValueFormatter 方法就可以实现自界说坐标轴标签，3.0 和 2.7 版本代码类似，如下所示：
  1. class MyAxisValueFormatter implements IAxisValueFormatter {
  2.   getFormattedValue(value: number, axis: AxisBase): string {
  3.     let mmdd = new Date().toDateString().split(' ')
  4.     let day = Number(mmdd[2]) + value / 20
  5.     let hours = new Date().getHours() + value / 20
  6.     console.log('lz getFormattedValue value:' + value)
  7.     return day + ' ' + mmdd[1] + ' ' + hours
  8.   }
  9. }
  10. ...
  11. this.topAxis.setValueFormatter(new TopAxisValueFormatter())
  12. ​
复制代码
实现效果如图所示：

五、 MPChart 常见题目

1 . 如何潜伏 Y 轴线
  1. this.model.getAxisLeft().setEnabled(false) //隐藏左边Y轴轴线，此时标签数字也隐藏
  2. ​
复制代码
如果想潜伏轴线但是想显示数字标签：
  1. this.model.getAxisRight().setDrawAxisLine(false);
  2. ​
复制代码
2 . 如何控制 Y 轴线数据标签个数
  1. this.model.getAxisLeft().setLabelCount(8, false);//设置了8个
  2. ​
复制代码
3 . 如何设置轴线颜色，宽度等信息
  1. let leftAxis = this.model.getAxisLeft();
  2. leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);//显示轴线在图表内部则使用INSIDE_CHART
  3. this.leftAxis.setAxisLineColor(ColorTemplate.rgb("#ff0000"));//设置轴线颜色
  4. leftAxis.setAxisLineWidth(1);// 设置轴线宽度
  5. leftAxis.setTextSize(20);//设置y轴标签字体大小
  6. leftAxis.setDrawGridLines(true);//设置显示网格线
  7. ​
复制代码
下载安装

下载和安装 MPChart 可以通过以下命令完成：
  1. ohpm install @ohos/mpchart
  2. ​
复制代码
OpenHarmony ohpm 环境设置等更多内容，请参考如何安装 OpenHarmony ohpm 包
源码链接

如果您对 MPChart 的源代码感兴趣，可以在以下链接找到它的源码：
OpenHarmony-SIG/ohos-MPChart，请随时查阅这些资源，以获取关于 MPChart 的更多信息和详细说明。如果大家对 OpenHarmony 开源三方库有更多的诉求和题目，接待在 OpenHarmony 开发者论坛三方库专区一起研讨：标签 - JS/ArkTS三方库 OpenHarmony开发者论坛

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

络腮胡菲菲

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表