【OpenHarmony】 鸿蒙 UI开发之MpChart（一）

<hr> 往期笔录记录：

鸿蒙应用开发与鸿蒙体系开发哪个更有远景？

嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

对于大前端开发来说，转鸿蒙开发毕竟是福还是祸？

鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

记录一场鸿蒙开发岗位口试履历~

连续更新中……

<hr> 简介

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

安装教程

1. ohpm install @ohos/mpchart

复制代码

使用说明

柱状图

• 柱状图数据初始化：
  

1. import {
2.   BarChart, // 柱状图图表类
3.   BarChartModel, // 柱状图配置构建类
4.   BarData, // 柱状图数据包
5.   BarDataSet, // 柱状图数据集合
6.   BarEntry, // 柱状图数据结构
7.   ChartGesture, // 手势事件模式
8.   Description, // 图表Description(描述)部件
9.   EntryOhos, // 图表数据结构基础类
10.   Fill, // 图表填充类型构建类
11.   Highlight, // 图表高亮数据
12.   IBarDataSet, // 柱状图数据集合的操作类
13.   JArrayList, // 工具类：数据集合
14.   Legend, // 图表Legend(图例)部件
15.   LimitLabelPosition, // 图表的LimitLine标签位置枚举类
16.   LimitLine, // 图表LimitLine
17.   MarkerView, // 图表的Marker(标志气泡)部件
18.   OnChartGestureListener, // 手势事件监听
19.   OnChartValueSelectedListener, // 数据选择监听
20.   XAxis, // 图表X轴部件
21.   XAxisPosition, // 图表X轴标签位置枚举类
22.   YAxis, // 图表Y轴部件
23.   YAxisLabelPosition // 图表Y轴标签位置枚举类
24. } from '@ohos/mpchart';
26. // 构造数据选择监听器
27.   private valueSelectedListener: OnChartValueSelectedListener = {
28.     onValueSelected: (e: EntryOhos, h: Highlight) => {
29.     // ...todoSomething
30.     },
31.     onNothingSelected: () => {
32.     // ...todoSomething
33.     }
34.   }
36.   // 构造手势识别事件监听器
37.   private chartGestureListener: OnChartGestureListener = {
38.     onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
39.     },
40.     onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
41.     // ...todoSomething
42.     },
43.     onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
44.     // ...todoSomething
45.     },
46.     onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
47.     // ...todoSomething
48.     },
49.     onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
50.     // ...todoSomething
51.     },
52.     onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => {
53.     // ...todoSomething
54.     },
55.     onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => {
56.     // ...todoSomething
57.     },
58.     onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => {
59.     // ...todoSomething
60.     }
61.   }
63.   // 图表数据初始化
64.   aboutToAppear() {
66.           // Step1:必须：初始化图表配置构建类
67.     this.model = new BarChartModel();
69.     // Step2:配置图表指定样式，各部件间没有先后之分
71.     // 为图表添加数据选择的监听器
72.     this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
73.     // 为图表添加手势识别监听器
74.     this.model.setOnChartGestureListener(this.chartGestureListener);
75.         // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
76.     let description: Description | null = this.model.getDescription()
77.     if (description) {
78.       description.setEnabled(false);
79.     }
80.         // 获取图表图例部件，设置图表图例部件不可用
81.     let l: Legend | null = this.model.getLegend();
82.     if (l) {
83.       l.setEnabled(false);
84.     }
85.     // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
86.     this.model.setMaxVisibleValueCount(40);
87.         // 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分
88.     this.model.setDrawGridBackground(false);
89.     // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
90.     this.model.setGridBackgroundColor('#500000ff')
91.     // 设置不绘制柱状图的柱体阴影背景
92.     this.model.setDrawBarShadow(false);
93.         // 设置柱状图的数值在柱体上方
94.     this.model.setDrawValueAboveBar(false);
95.     // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别
96.     this.model.setHighlightFullBarEnabled(false);
97.         // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
98.     this.limitLine1 = new LimitLine(120, 'Upper Limit');
99.     this.limitLine1.setLineWidth(4);
100.     this.limitLine1.enableDashedLine(10, 10, 0);
101.     this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
102.     this.limitLine1.setTextSize(10);
104.     this.limitLine2 = new LimitLine(50, 'Lower Limit');
105.     this.limitLine2.setLineWidth(4);
106.     this.limitLine2.enableDashedLine(10, 10, 0);
107.     this.limitLine2.setLineColor(Color.Yellow);
108.     this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
109.     this.limitLine2.setTextSize(10);
111.     // 设置图表左Y轴信息
112.     this.leftAxis = this.model.getAxisLeft();
113.     if (this.leftAxis) {
114.       this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true)
115.       this.leftAxis.setDrawLimitLinesBehindData(false);
117.       // 添加LimitLines
118.       this.leftAxis.addLimitLine(this.limitLine1);
119.       this.leftAxis.addLimitLine(this.limitLine2);
120.     }
121.         // 设置图表右Y轴信息
122.     this.rightAxis = this.model.getAxisRight();
123.     if (this.rightAxis) {
124.       this.rightAxis.setEnabled(false);
125.       this.rightAxis.setAxisMinimum(0);
126.     }
127.         // 设置X轴信息
128.     this.xAxis = this.model.getXAxis();
129.     if (this.xAxis) {
130.       this.xAxis.setPosition(XAxisPosition.BOTTOM);
131.     }
132.         // 为图表设置markerView
133.     this.normalMarker = new MarkerView();
134.     this.model.setMarker(this.normalMarker);
135.     // 也可设置定义图表MarkerView
136.     this.stackMarker = new CustomMarkerView();
137.         // 生成单一颜色数据
138.     this.data = this.getNormalData();
139.     // 将数据与图表配置类绑定
140.     this.model.setData(this.data);
141.     // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
142.     this.model.setVisibleXRangeMaximum(20);
143.   }
145.    private getNormalData(): BarData {
146.     let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
147.     values.add(new BarEntry(1, 73.3));
148.     values.add(new BarEntry(2, 5.4));
150.     let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
151.     dataSet.setHighLightColor(Color.Black);
152.     dataSet.setDrawIcons(false);
153.     // 为柱体添加颜色信息
154.     dataSet.setColorByColor(Color.Pink);
156.     let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
157.     dataSetList.add(dataSet);
159.     let barData: BarData = new BarData(dataSetList);
160.     //设置柱状图宽度
161.     barData.setBarWidth(0.85);
162.     //设置顶部圆角半径
163.     barData.setTopRadius(5);
164.     return barData;
165.   }
167.   private getGradientData(): BarData {
168.     let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
169.     values.add(new BarEntry(1, 32.9));
170.     values.add(new BarEntry(2, 44.7));
172.     let dataSet: BarDataSet = new BarDataSet(values, 'DataSet');
173.     dataSet.setHighLightColor(Color.Black);
174.     dataSet.setDrawIcons(false);
175.     let startColor1: string = '#ffffbb33';
176.     let startColor2: string = '#ff33b5e5';
177.     let startColor3: string = '#ffffbb33';
178.     let startColor4: string = '#ff99cc00';
179.     let startColor5: string = '#ffff4444';
180.     let endColor1: string = '#ff0099cc';
181.     let endColor2: string = '#ffaa66cc';
182.     let endColor3: string = '#ff669900';
183.     let endColor4: string = '#ffcc0000';
184.     let endColor5: string = '#ffff8800';
185.     let gradientFills: JArrayList<Fill> = new JArrayList<Fill>();
186.     gradientFills.add(new Fill(startColor1, endColor1));
187.     gradientFills.add(new Fill(startColor2, endColor2));
188.     gradientFills.add(new Fill(startColor3, endColor3));
189.     gradientFills.add(new Fill(startColor4, endColor4));
190.     gradientFills.add(new Fill(startColor5, endColor5));
191.         // 为柱体添加渐变的颜色信息
192.     dataSet.setFills(gradientFills);
194.     let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
195.     dataSetList.add(dataSet);
197.     let barData: BarData = new BarData(dataSetList);
198.     barData.setBarWidth(0.85);
199.     return barData;
200.   }
202.   private getStackData(): BarData {
203.     let values: JArrayList<BarEntry> = new JArrayList<BarEntry>();
204.     values.add(new BarEntry(1, [38.0, 28.0, 39.8]));
205.     values.add(new BarEntry(2, [18.2, 16.1, 16.1]));
207.     let set1: BarDataSet | null = null;
208.     set1 = new BarDataSet(values, "Statistics Vienna 2014");
209.     set1.setDrawIcons(false);
210.     // 为柱体添加指定分段的颜色信息
211.     set1.setColorsByArr([Color.Red, Color.Green, Color.Pink]);
212.     set1.setStackLabels(["Births", "Divorces", "Marriages"]);
214.     let dataSets: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
215.     dataSets.add(set1);
217.     let data: BarData = new BarData(dataSets);
218.     data.setValueTextColor(Color.White);
219.     return data;
220.   }

复制代码

• 添加数据到自定义竖向柱状图表组件
  

1. // 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
2. // 如果在之后通过事件触发，
3. // 可通过barData.notifyDataSetChanged();来触发数据更新，
4. // 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
5. // 可通过this.model.invalidate();来触发绘制更新。
6. BarChart({ model: this.model })
7.   .width('100%')
8.   .height('30%')

复制代码

线形图

• 线形图数据初始化：
  

1. import {
2.   JArrayList, // 工具类：数据集合
3.   XAxis, // 图表X轴部件
4.   XAxisPosition, // 图表X轴标签位置枚举类
5.   YAxis, // 图表Y轴部件
6.   Description, // 图表描述标签
7.   Legend, // 图表Legend(图例)部件
8.   OnChartValueSelectedListener, //
9.   Highlight,// 图表高亮数据
10.   EntryOhos,// 图表数据结构基础类
11.   YAxisLabelPosition,// 图表Y轴标签位置枚举类
12.   LineDataSet, //线形图数据集合
13.   ILineDataSet, // 线形图数据集合的操作类
14.   LineData, //线形图数据包
15.   Mode, //线形图形状
16.   LineChart, // 线形图图表类
17.   LineChartModel,// 线形图配置构建类
18.   LimitLine, // 图表LimitLine
19.   LimitLabelPosition, // 图表的LimitLine标签位置枚举类
20.   ChartColorStop, //颜色类
21.   LegendForm, //图例形状
22. } from '@ohos/mpchart';
24. // 构造数据选择监听器
25.   private valueSelectedListener: OnChartValueSelectedListener = {
26.     onValueSelected: (e: EntryOhos, h: Highlight) => {
27.     // ...todoSomething
28.     },
29.     onNothingSelected: () => {
30.     // ...todoSomething
31.     }
32.   }
34.   // 图表数据初始化
35.   aboutToAppear() {
37.           // Step1:必须：初始化图表配置构建类
38.     this.model = new LineChartModel();
40.     // Step2:配置图表指定样式，各部件间没有先后之分
42.     // 为图表添加数据选择的监听器
43.     this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
44.         // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
45.     let description: Description | null = this.model.getDescription()
46.     if (description) {
47.       description.setEnabled(false);
48.     }
50.         // 获取图表图例部件，设置图表图例形状为线形
51.     let legend: Legend | null = this.model.getLegend();
52.     if (legend) {
53.       legend.setEnabled(true);
54.       // draw legend entries as lines
55.       legend.setForm(LegendForm.LINE);
56.     }
58.     // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
59.     this.model.setMaxVisibleValueCount(60);
61.         // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
62.     this.limitLine1 = new LimitLine(120, 'Upper Limit');
63.     this.limitLine1.setLineWidth(4);
64.     //设置虚线样式
65.     this.limitLine1.enableDashedLine(10, 10, 0);
66.     //设置标签位置
67.     this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
68.     this.limitLine1.setTextSize(10);
70.     this.limitLine2 = new LimitLine(50, 'Lower Limit');
71.     this.limitLine2.setLineWidth(4);
72.     this.limitLine2.enableDashedLine(10, 10, 0);
73.     this.limitLine2.setLineColor(Color.Yellow);
74.     this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
75.     this.limitLine2.setTextSize(10);
77.     // 设置图表左Y轴信息
78.     this.leftAxis = this.model.getAxisLeft();
79.     if (this.leftAxis) {
80.       //设置绘制标签个数
81.       this.leftAxis.setLabelCount(8, false);
82.       //设置标签位置
83.       this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)
84.       //设置距离顶部距离
85.       this.leftAxis.setSpaceTop(15);
86.       //设置最大值
87.       this.leftAxis.setAxisMinimum(0);
88.       //设置最小值
89.       this.leftAxis.setAxisMaximum(200);
90.     }
92.         // 设置图表右Y轴信息
93.     this.rightAxis = this.model.getAxisRight();
94.     if (this.rightAxis) {
95.       this.rightAxis.setLabelCount(8, false);
96.       this.rightAxis.setDrawGridLines(false);
97.       this.rightAxis.setSpaceTop(15);
98.       this.rightAxis.setAxisMinimum(0);
99.       this.rightAxis.setAxisMaximum(200);
100.       this.rightAxis.setEnabled(false);
101.     }
103.         // 设置X轴信息
104.         this.xAxis = this.model.getXAxis();
105.     if (this.xAxis) {
106.       this.xAxis.setPosition(XAxisPosition.BOTTOM);
107.       this.xAxis.setDrawGridLines(false);
108.       this.xAxis.setGranularity(1);
109.       this.xAxis.setLabelCount(7);
110.     }
112.         // 为图表设置markerView
113.     this.normalMarker = new MarkerView();
114.     this.model.setMarker(this.normalMarker);
115.     // 也可设置定义图表MarkerView
116.     this.stackMarker = new CustomMarkerView();
117.     // 生成图表数据
118.     let lineData: LineData = this.getLineData();
119.     // 将数据与图表配置类绑定
120.     this.model.setData(lineData);
121.     // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
122.     this.model.setVisibleXRangeMa

复制代码

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