OpenHarmony UI开发-组件mpchart_ohos-mpchart

简介

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

效果展示：

安装教程

 ohpm install @ohos/mpchart
1

OpenHarmony ohpm环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包 。

使用说明

柱状图

1. 柱状图数据初始化：

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

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

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

线形图

1. 线形图数据初始化：

import {
 JArrayList, // 工具类：数据集合
 XAxis, // 图表X轴部件
 XAxisPosition, // 图表X轴标签位置枚举类
 YAxis, // 图表Y轴部件
 Description, // 图表描述标签
 Legend, // 图表Legend(图例)部件
 OnChartValueSelectedListener, //
 Highlight,// 图表高亮数据
 EntryOhos,// 图表数据结构基础类
 YAxisLabelPosition,// 图表Y轴标签位置枚举类
 LineDataSet, //线形图数据集合
 ILineDataSet, // 线形图数据集合的操作类
 LineData, //线形图数据包
 Mode, //线形图形状
 LineChart, // 线形图图表类
 LineChartModel,// 线形图配置构建类
 LimitLine, // 图表LimitLine
 LimitLabelPosition, // 图表的LimitLine标签位置枚举类
 ChartColorStop, //颜色类
 LegendForm, //图例形状
} from '@ohos/mpchart';
// 构造数据选择监听器
 private valueSelectedListener: OnChartValueSelectedListener = {
 onValueSelected: (e: EntryOhos, h: Highlight) => {
 // ...todoSomething
 },
 onNothingSelected: () => {
 // ...todoSomething
 }
 }
  
 // 图表数据初始化
 aboutToAppear() {
  
 // Step1:必须：初始化图表配置构建类
 this.model = new LineChartModel();
  
 // Step2:配置图表指定样式，各部件间没有先后之分
  
 // 为图表添加数据选择的监听器
 this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
 // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
 let description: Description | null = this.model.getDescription()
 if (description) {
 description.setEnabled(false);
 }
  
 // 获取图表图例部件，设置图表图例形状为线形
 let legend: Legend | null = this.model.getLegend();
 if (legend) {
 legend.setEnabled(true);
 // draw legend entries as lines
 legend.setForm(LegendForm.LINE);
 }
  
 // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
 this.model.setMaxVisibleValueCount(60);
  
 // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
 this.limitLine1 = new LimitLine(120, 'Upper Limit');
 this.limitLine1.setLineWidth(4);
 //设置虚线样式
 this.limitLine1.enableDashedLine(10, 10, 0);
 //设置标签位置
 this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT\_TOP);
 this.limitLine1.setTextSize(10);
 this.limitLine2 = new LimitLine(50, 'Lower Limit');
 this.limitLine2.setLineWidth(4);
 this.limitLine2.enableDashedLine(10, 10, 0);
 this.limitLine2.setLineColor(Color.Yellow);
 this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT\_BOTTOM);
 this.limitLine2.setTextSize(10);
 // 设置图表左Y轴信息
 this.leftAxis = this.model.getAxisLeft();
 if (this.leftAxis) {
 //设置绘制标签个数
 this.leftAxis.setLabelCount(8, false);
 //设置标签位置
 this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE\_CHART)
 //设置距离顶部距离
 this.leftAxis.setSpaceTop(15);
 //设置最大值
 this.leftAxis.setAxisMinimum(0);
 //设置最小值
 this.leftAxis.setAxisMaximum(200);
 }
 // 设置图表右Y轴信息
 this.rightAxis = this.model.getAxisRight();
 if (this.rightAxis) {
 this.rightAxis.setLabelCount(8, false);
 this.rightAxis.setDrawGridLines(false);
 this.rightAxis.setSpaceTop(15);
 this.rightAxis.setAxisMinimum(0);
 this.rightAxis.setAxisMaximum(200);
 this.rightAxis.setEnabled(false);
 }
  
 // 设置X轴信息
 this.xAxis = this.model.getXAxis();
 if (this.xAxis) {
 this.xAxis.setPosition(XAxisPosition.BOTTOM);
 this.xAxis.setDrawGridLines(false);
 this.xAxis.setGranularity(1);
 this.xAxis.setLabelCount(7);
 }
  
 // 为图表设置markerView
 this.normalMarker = new MarkerView();
 this.model.setMarker(this.normalMarker);
 // 也可设置定义图表MarkerView
 this.stackMarker = new CustomMarkerView();
 // 生成图表数据
 let lineData: LineData = this.getLineData();
 // 将数据与图表配置类绑定
 this.model.setData(lineData);
 // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
 this.model.setVisibleXRangeMaximum(20);
 }
 private getLineData(): LineData {
 let start: number = 1;
 let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
 for (let i = start; 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));
 }
 }
 this.dataSet = new LineDataSet(values, 'DataSet');
 this.dataSet.setHighLightColor(Color.Black);
 this.dataSet.setDrawIcons(false);
 this.dataSet.setMode(Mode.LINEAR); //直线模式
 this.dataSet.setDrawCircles(true); //折线点画圆圈
 this.dataSet.setDrawCircleHole(false); //设置内部孔
 this.dataSet.setColorByColor(Color.Black); //设置折线颜色
 //渐变色填充
 let gradientFillColor = new JArrayList<ChartColorStop>();
 gradientFillColor.add(\["#0C0099CC", 0.2\]);
 gradientFillColor.add(\["#7F0099CC", 0.4\]);
 gradientFillColor.add(\["#0099CC", 1.0\]);
 this.dataSet.setGradientFillColor(gradientFillColor);
 this.dataSet.setDrawFilled(true);
 // 设置数据点的颜色
 this.dataSet.setCircleColor(Color.Blue); // 可以设置为你想要的颜色
 // 设置数据点的半径
 this.dataSet.setCircleRadius(4); // 设置半径大小
 this.dataSet.setCircleHoleRadius(2); //设置内径
 let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
 dataSetList.add(this.dataSet);
 let lineData: LineData = new LineData(dataSetList);
 return lineData
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

2. 添加数据到自定义线形图表组件

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

饼状图

1. 饼状图数据初始化：

 import {
 ChartGesture,         // 图表手势
 ColorTemplate,        // 颜色模板
 EntryOhos,            // 图表数据结构基础类
 Highlight,            // 高亮
 IPieDataSet,          // 饼状图数据集接口
 JArrayList,           // 工具类：数据集合
 Legend,               // 图表Legend(图例)部件
 MPPointF,             // MPPointF
 OnChartGestureListener,   // 图表手势监听器接口
 OnChartValueSelectedListener,  // 图表数值选择监听器接口
 PieChart,             // 饼状图组件
 PieChartModel,        // 饼状图配置构建类
 PieData,              // 饼状图数据包
 PieDataSet,           // 饼状图数据集合
 PieEntry,             // 饼状图数据结构
 } from '@ohos/mpchart';
  
 // 图表数据初始化
  
 // Step1:必须：初始化图表配置构建类
 private model: PieChartModel = new PieChartModel();
  
 aboutToAppear() {
 // Step2：配置图表的特定样式，各部件间没有先后之分
 let l: Legend | null = this.model.getLegend();
 if (l) {
 l.setEnabled(true);
 }
 this.model.animateX(1000);  // 启用X轴动画效果，动画持续时间为1000毫秒
 this.model.setUsePercentValues(true);  // 使用百分比值
 this.model.getDescription()?.setEnabled(false);  // 禁用描述信息
 this.model.setExtraOffsets(5, 10, 5, 5);  // 设置额外偏移量
 this.model.setOnChartGestureListener(this.chartGestureListener);  // 设置图表手势监听器
 this.model.setDragDecelerationFrictionCoef(0.95);  // 设置拖动减速摩擦系数
 this.model.setCenterText("mpchart");  // 设置中心文本
 this.model.setCenterTextSize(22);  // 设置中心文本大小
 this.model.setDrawHoleEnabled(true);  // 启用绘制中心孔
 this.model.setHoleColor(Color.White);  // 设置中心孔颜色
 this.model.setTransparentCircleColor(Color.Red);  // 设置透明圆环颜色
 this.model.setTransparentCircleAlpha(110);  // 设置透明圆环透明度
 this.model.setHoleRadius(58);  // 设置中心孔半径
 this.model.setTransparentCircleRadius(61);  // 设置透明圆环半径
 this.model.setDrawCenterText(true);  // 绘制中心文本
 this.model.setRotationAngle(0);  // 设置旋转角度
 // 通过触摸启用图表的旋转
 this.model.setRotationEnabled(true);
 this.model.setHighlightPerTapEnabled(true);  // 启用点击高亮效果
 this.setData(4, 10);  // 设置图表数据
 }
 // 初始化饼状图数据
 private setData(count: number, range: number): void {
 let entries: JArrayList<PieEntry> = new JArrayList<PieEntry>();
 // NOTE: The order of the entries when being added to the entries array determines their position around the center of
 // the chart.
 for (let i = 0; i < count; i++) {
 entries.add(new PieEntry(((Math.random() \* range) + range / 5),
 this.parties\[i % this.parties.length\], undefined, undefined));
 }
 // 创建饼状图数据集对象，设置数据项和数据集名称
 let dataSet: PieDataSet = new PieDataSet(entries, "Election Results");
 // 设置是否绘制数据项图标
 dataSet.setDrawIcons(false);
 // 设置数据项之间的间隙
 dataSet.setSliceSpace(1);
 // 设置数据项图标的偏移量
 dataSet.setIconsOffset(new MPPointF(0, 40));
 // 设置选中时数据项的偏移距离
 dataSet.setSelectionShift(5);
 // 设置数据项文本颜色
 dataSet.setValueTextColor(Color.White);
 // add a lot of colors
 let colors: JArrayList<number> = new JArrayList();
 for (let index = 0; index < ColorTemplate.VORDIPLOM\_COLORS.length; index++) {
 colors.add(ColorTemplate.VORDIPLOM\_COLORS\[index\]);
 }
 for (let index = 0; index < ColorTemplate.JOYFUL\_COLORS.length; index++) {
 colors.add(ColorTemplate.JOYFUL\_COLORS\[index\]);
 }
 for (let index = 0; index < ColorTemplate.COLORFUL\_COLORS.length; index++) {
 colors.add(ColorTemplate.COLORFUL\_COLORS\[index\]);
 }
 for (let index = 0; index < ColorTemplate.LIBERTY\_COLORS.length; index++) {
 colors.add(ColorTemplate.LIBERTY\_COLORS\[index\]);
 }
 for (let index = 0; index < ColorTemplate.PASTEL\_COLORS.length; index++) {
 colors.add(ColorTemplate.PASTEL\_COLORS\[index\]);
 }
 colors.add(ColorTemplate.getHoloBlue());
 dataSet.setColorsByList(colors);
 // 生成图表数据
 let data: PieData = new PieData(dataSet);
 // 将数据与图表配置类绑定
 this.model.setData(data);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

2. 添加数据到自定义饼状图图表组件

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

气泡图

1. 气泡图数据初始化：

 // 导入一些图表相关的组件和类
 import {
 JArrayList,  //工具类：数据集合
 XAxis,  // 图表X轴部件
 XAxisPosition,  // 图表X轴标签位置枚举类
 YAxis,  // 图表Y轴部件
 Description,  // 图表的描述信息
 Legend,  // 图例
 OnChartValueSelectedListener,  // 图表数值选中的监听器
 Highlight,  // 高亮显示
 EntryOhos,  // 图表数据结构基础类
 YAxisLabelPosition,  // 图表Y轴标签位置枚举类
 BubbleEntry,  // 气泡图数据结构
 ChartPixelMap,  // 图表像素映射
 IBubbleDataSet,  // 气泡图数据集的接口
 BubbleDataSet,  // 气泡图数据集
 MPPointF,  // MPPonitF
 BubbleChart,  // 气泡图组件
 BubbleChartModel,  // 气泡图配置构建类
 BubbleData  // 气泡图数据
 } from '@ohos/mpchart';
  
 // 构造数据选择监听器
 private valueSelectedListener: OnChartValueSelectedListener = {
 onValueSelected: (e: EntryOhos, h: Highlight) => {
 // ...todoSomething
 },
 onNothingSelected: () => {
 // ...todoSomething
 }
 }
  
 // 图表数据初始化
 private model: BubbleChartModel | null = null;
  
 aboutToAppear() {
 // Step1:必须：初始化图表配置构建类
 this.model = new BubbleChartModel();
 // Step2：配置图表的特定样式，各部件间没有先后之分
 //设置图例
 let l: Legend | null = this.model.getLegend();
 if (l) {
 l.setEnabled(true);
 }
  
 //设置描述
 let description: Description | null = this.model.getDescription();
 if (description) {
 description.setEnabled(false);
 }
 // 设置最大可见条目数量为60
 this.model.setMaxVisibleValueCount(60);
  
 // 禁用x和y轴方向同时缩放，但是可以单独x轴方向或者y轴方向缩放
 this.model.setPinchZoom(false);
  
 // 获取X轴对象
 let xAxis: XAxis | null = this.model.getXAxis();
 if (xAxis) {
 // 设置X轴位置在底部
 xAxis.setPosition(XAxisPosition.BOTTOM);
  
 // 不绘制X轴网格线
 xAxis.setDrawGridLines(false);
  
 // 设置X轴坐标的最小间隔为1
 xAxis.setGranularity(1);
  
 // 设置X轴标签数量为7
 xAxis.setLabelCount(7);
 }
  
 // 获取左侧Y轴对象
 let leftAxis: YAxis | null = this.model.getAxisLeft();
 if (leftAxis) {
 // 设置左侧Y轴标签数量为8，不强制使用整数标签
 leftAxis.setLabelCount(8, false);
  
 // 设置左侧Y轴标签位置在图表外部
 leftAxis.setPosition(YAxisLabelPosition.OUTSIDE\_CHART);
  
 // 设置顶部空白区域为15个单位
 leftAxis.setSpaceTop(15);
  
 // 设置左侧Y轴的最小值为0
 leftAxis.setAxisMinimum(0);
 }
  
 // 获取右侧Y轴对象
 let rightAxis: YAxis | null = this.model.getAxisRight();
 if (rightAxis) {
 // 设置右侧Y轴标签数量为8，不强制使用整数标签
 rightAxis.setLabelCount(8, false);
  
 // 不绘制右侧Y轴网格线
 rightAxis.setDrawGridLines(false);
  
 // 设置顶部空白区域为15个单位
 rightAxis.setSpaceTop(15);
  
 // 设置右侧Y轴的最小值为0
 rightAxis.setAxisMinimum(0);
 }
  
 // 初始化起始值为1
 let start: number = 1;
  
 // 创建气泡图数据集
 let values: JArrayList<BubbleEntry> = new JArrayList<BubbleEntry>();
 for (let i = start; i < 20; i++) {
 // 生成随机值（0到40之间）
 let val = Number(Math.random() \* 41);
  
 // 按照一定概率添加气泡数据
 if (Math.random() \* 100 < 25) {
 values.add(new BubbleEntry(i, val));
 } else {
 values.add(new BubbleEntry(i, val));
 }
 }
  
 // 创建气泡图数据集
 let dataSet: BubbleDataSet = new BubbleDataSet(values, 'DataSet');
 dataSet.setHighLightColor(Color.Black);
 dataSet.setDrawIcons(false);
  
 // 创建气泡图数据集列表
 let dataSetList: JArrayList<IBubbleDataSet> = new JArrayList<IBubbleDataSet>();
 dataSetList.add(dataSet);
  
 // 设置图表数据
 this.setData(5, 50);
  
 // 设置图表最大的X轴显示范围为7个单位
 this.model.setVisibleXRangeMaximum(7);
 }
 // 初始化气泡图数据
 /\*\*
 \* 设置气泡图表的数据
 \* @param count 数据点的数量
 \* @param range 数据点的范围
 \*/
 private setData(count: number, range: number): void {
 // 创建三个气泡图数据集
 let values1 = new JArrayList<BubbleEntry>();
 let values2 = new JArrayList<BubbleEntry>();
 let values3 = new JArrayList<BubbleEntry>();
  
 // 创建图标绘制对象
 let imgePaint: ChartPixelMap = new ChartPixelMap();
 // 设置图标的宽度和高度
 imgePaint.setWidth(32);
 imgePaint.setHeight(32);
 // 循环生成数据点
 for (let i = 0; i < count; i++) {
 // 向数据集添加带有图标的气泡数据点
 values1.add(new BubbleEntry(i, Math.random() \* range, Math.random() \* range, imgePaint));
 values2.add(new BubbleEntry(i, Math.random() \* range, Math.random() \* range, imgePaint));
  
 // 向数据集添加不带图标的气泡数据点
 values3.add(new BubbleEntry(i, Math.random() \* range, Math.random() \* range));
 }
 // 创建气泡数据集1
 let set1: BubbleDataSet = new BubbleDataSet(values1, "DS 1");
 set1.setDrawIcons(false);
 set1.setColorByColor(0x88c12552);
 set1.setIconsOffset(new MPPointF(0, 0));
 set1.setDrawValues(this.isDrawValuesEnable);
 // 创建气泡数据集2
 let set2: BubbleDataSet = new BubbleDataSet(values2, "DS 2");
 set2.setDrawIcons(false);
 set2.setIconsOffset(new MPPointF(0, 0));
 set2.setColorByColor(0x88ff6600);
 set2.setDrawValues(this.isDrawValuesEnable);
 // 创建气泡数据集3
 let set3: BubbleDataSet = new BubbleDataSet(values3, "DS 3");
 set3.setDrawIcons(false);
 set3.setIconsOffset(new MPPointF(0, 0));
 set3.setColorByColor(0x88f5c700);
 set3.setDrawValues(this.isDrawValuesEnable);
 // 创建气泡图数据集列表
 let dataSets = new JArrayList<IBubbleDataSet>();
 dataSets.add(set1);
 dataSets.add(set2);
 dataSets.add(set3);
 // 创建气泡图数据对象
 let dataResult: BubbleData = new BubbleData(dataSets);
 dataResult.setDrawValues(this.isDrawValuesEnable);
 dataResult.setValueTextSize(8);
 dataResult.setValueTextColor(Color.White);
 dataResult.setHighlightCircleWidth(1.5);
 dataResult.setHighlightEnabled(true);
 dataResult.notifyDataChanged();
 // 如果存在图表模型，则设置图表数据
 if (this.model) {
 this.model.setData(dataResult);
 }
 } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

2. 添加数据到自定义气泡图图表组件

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

蜡烛图

1. 蜡烛图数据初始化：

 // 导入一些图表相关的组件和类
 import {
 AxisDependency, // 轴依赖类
 CandleData, // 蜡烛图数据包
 CandleDataSet, // 蜡烛图数据集合
 CandleEntry, // 蜡烛图数据结构
 CandleStickChart, // 蜡烛图图表类
 CandleStickChartModel, // 蜡烛图配置构建类
 ChartPixelMap, // 图表像素映射类
 Description, // 图表Description(描述)部件
 JArrayList, // 工具类：数据集合
 Legend, // 图表Legend(图例)部件
 Style, // 图表样式类
 XAxis, // 图表X轴部件
 XAxisPosition, // 图表X轴标签位置枚举类
 YAxis // 图表Y轴部件
 } from '@ohos/mpchart';
  
 aboutToAppear() {
 // 图表数据初始化
 // Step1:必须：初始化图表配置构建类
 this.model = new CandleStickChartModel();
  
 // Step2：配置图表的特定样式，各部件间没有先后之分
 //设置描述
 let description: Description | null = this.model.getDescription();
 if (description) {
 description.setEnabled(false);
 }
 //设置图例
 let l: Legend | null = this.model.getLegend();
 if (l) {
 l.setEnabled(true);
 }
  
 this.model.setMaxVisibleValueCount(60);  // 设置图表最大可见数值数量为60
 this.model.setPinchZoom(false);  // 禁用捏合缩放
 this.model.setDrawGridBackground(true);  // 启用绘制网格背景
 this.model.setGridBackgroundColor(Color.White);  // 设置网格背景颜色为白色
 this.setData(40, 100);  // 设置图表数据
  
 let xAxis: XAxis | null = this.model.getXAxis();
 if (xAxis) {
 xAxis.setPosition(XAxisPosition.BOTTOM);  // 设置X轴位置在底部
 xAxis.setDrawGridLines(true);  // 启用绘制X轴网格线
 }
  
 let leftAxis: YAxis | null = this.model.getAxisLeft();
 if (leftAxis) {
 leftAxis.setLabelCount(7, false);  // 设置左侧Y轴标签数量为7，不强制使用整数标签
 leftAxis.setDrawGridLines(true);  // 启用绘制左侧Y轴网格线
 leftAxis.setDrawAxisLine(true);  // 启用绘制左侧Y轴轴线
 }
  
 let rightAxis: YAxis | null = this.model.getAxisRight();
 if (rightAxis) {
 rightAxis.setLabelCount(7, false);  // 设置右侧Y轴标签数量为7，不强制使用整数标签
 rightAxis.setDrawGridLines(true);  // 启用绘制右侧Y轴网格线
 rightAxis.setDrawAxisLine(true);  // 启用绘制右侧Y轴轴线
 }
  
 let legend: Legend | null = this.model.getLegend();
 if (legend) {
 legend.setEnabled(true);  // 启用图例
 }
 }
 // 初始化蜡烛图数据
 private setData(count: number, range: number):void{
 let values: JArrayList<CandleEntry> = new JArrayList<CandleEntry>();
 for (let i = 0; i < count; i++) {
 let val: number = (Math.random() \* 40) + (range + 3);
 let high: number = Number(Math.random() \* 9) + 8.0;
 let low: number = Number(Math.random() \* 9) + 8.0;
 let open: number = Number(Math.random() \* 6) + 1.0;
 let close: number = Number(Math.random() \* 6) + 1.0;
 let even: boolean = i % 2 == 0;
 values.add(new CandleEntry(
 i,
 val + high,
 val - low,
 even ? val + open : val - open,
 even ? val - close : val + close,
 new ChartPixelMap()));
 }
 // 创建蜡烛图数据集，并设置数据集的名称为 "Data Set"
 let dataSet: CandleDataSet = new CandleDataSet(values, "Data Set");
 // 设置是否绘制图标为 false
 dataSet.setDrawIcons(false);
 // 设置数据集的轴依赖为左侧Y轴
 dataSet.setAxisDependency(AxisDependency.LEFT);
 // 设置蜡烛图阴影颜色为灰色
 dataSet.setShadowColor(Color.Gray);
 // 设置蜡烛图阴影宽度为 0.7
 dataSet.setShadowWidth(0.7);
 // 设置蜡烛图下跌蜡烛的绘制样式为填充
 dataSet.setDecreasingPaintStyle(Style.FILL);
 // 设置蜡烛图下跌蜡烛的颜色为红色
 dataSet.setDecreasingColor(Color.Red);
 // 设置蜡烛图上涨蜡烛的颜色为绿色
 dataSet.setIncreasingColor(Color.Green);
 // 设置蜡烛图上涨蜡烛的绘制样式为描边
 dataSet.setIncreasingPaintStyle(Style.STROKE);
 // 设置蜡烛图中性蜡烛的颜色为蓝色
 dataSet.setNeutralColor(Color.Blue);
 let data: CandleData = new CandleData(\[dataSet\]);
 data.setValueTextSize(7);
 if (this.model) {
 this.model.resetTracking();
 this.model.setData(data);
 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

组合图

1. 组合图数据初始化：

 // 导入一些图表相关的组件和类
 import {
 ColorTemplate,  // 颜色模板
 CombinedChart,  // 组合图表类
 CombinedChartModel,  // 组合图表配置构建类
 CombinedData,  // 组合图表数据包
 EntryOhos,  // 图表数据结构基础类
 JArrayList,  // 工具类：数据集合
 LineData,  // 折线图数据包
 LineDataSet,  // 折线图数据集合
 Color,  // 颜色类
 Mode,  // 图表模式枚举类
 AxisDependency,  // 轴依赖类
 BarEntry,  // 柱状图数据结构
 BarData,  // 柱状图数据包
 BarDataSet,  // 柱状图数据集合
 IBarDataSet,  // 柱状图数据集合的操作类
 ScatterData,  // 散点图数据包
 ScatterDataSet,  // 散点图数据集合
 CandleData,  // 蜡烛图数据包
 CandleEntry,  // 蜡烛图数据结构
 CandleDataSet,  // 蜡烛图数据集合
 BubbleData,  // 气泡图数据包
 BubbleEntry,  // 气泡图数据结构
 BubbleDataSet,  // 气泡图数据集合
 YAxisLabelPosition,  // 图表Y轴标签位置枚举类
 XAxisPosition,  // 图表X轴标签位置枚举类
 XAxis,  // 图表X轴部件
 YAxis,  // 图表Y轴部件
 LegendHorizontalAlignment,  // 图例水平对齐方式枚举类
 LegendVerticalAlignment  // 图例垂直对齐方式枚举类
 } from '@ohos/mpchart';
 // Step1:必须：初始化图表配置构建类
 private model: CombinedChartModel = new CombinedChartModel();
  
 aboutToAppear() {
 // Step2：配置图表的特定样式，各部件间没有先后之分
  
 // 禁用图表描述
 this.model.getDescription()?.setEnabled(false);
 // 获取图例对象
 let l = this.model.getLegend();
 if (l) {
 // 启用图例
 l.setEnabled(true);
  
 // 启用图例文字自动换行
 l.setWordWrapEnabled(true);
  
 // 设置图例水平对齐方式为左侧
 l.setHorizontalAlignment(LegendHorizontalAlignment.LEFT);
  
 // 设置图例垂直对齐方式为底部
 l.setVerticalAlignment(LegendVerticalAlignment.BOTTOM);
  
 // 设置图例不绘制在图表内部
 l.setDrawInside(false);
 }
 // 设置图表最大可见数值数量为60
 this.model.setMaxVisibleValueCount(60);
 // 禁用图表的捏合缩放功能
 this.model.setPinchZoom(false);
 // 禁用图表绘制网格背景
 this.model.setDrawGridBackground(false);
 // 获取X轴对象
 let xAxis: XAxis | null = this.model.getXAxis();
 if (xAxis) {
 // 设置X轴位置在底部
 xAxis.setPosition(XAxisPosition.BOTTOM);
  
 // 不绘制X轴网格线
 xAxis.setDrawGridLines(false);
  
 // 设置X轴坐标的最小间隔为1
 xAxis.setGranularity(1);
  
 // 设置X轴标签数量为7
 xAxis.setLabelCount(7);
 }
 // 获取左侧Y轴对象
 let leftAxis: YAxis | null = this.model.getAxisLeft();
 if (leftAxis) {
 // 设置左侧Y轴标签数量为8，不强制使用整数标签
 leftAxis.setLabelCount(8, false);
  
 // 设置左侧Y轴标签位置在图表外部
 leftAxis.setPosition(YAxisLabelPosition.OUTSIDE\_CHART);
  
 // 设置顶部空白区域为15个单位
 leftAxis.setSpaceTop(15);
  
 // 设置左侧Y轴的最小值为0
 leftAxis.setAxisMinimum(0);
 }
 // 获取右侧Y轴对象
 let rightAxis: YAxis | null = this.model.getAxisRight();
 if (rightAxis) {
 // 设置右侧Y轴标签数量为8，不强制使用整数标签
 rightAxis.setLabelCount(8, false);
  
 // 不绘制右侧Y轴网格线
 rightAxis.setDrawGridLines(false);
  
 // 设置顶部空白区域为15个单位
 rightAxis.setSpaceTop(15);
  
 // 设置右侧Y轴的最小值为0
 rightAxis.setAxisMinimum(0);
 }
 // 创建组合图表数据对象
 let data: CombinedData = new CombinedData();
  
 // 生成线形图数据
 this.generateLineData(data);
  
 // 生成柱状图数据
 this.generateBarData(data);
  
 // 生成气泡图数据
 this.generateBubbleData(data);
  
 // 生成散点图数据
 this.generateScatterData(data);
  
 // 生成蜡烛图数据
 this.generateCandleData(data);
  
 // 设置图表数据
 this.model.setData(data);
 }
 // 生成线形图数据
 private generateLineData(data: CombinedData): void {
 let d: LineData = new LineData();
 let entries: JArrayList<EntryOhos> = new JArrayList();
 for (let index = 0; index < this.count; index++) {
 entries.add(new EntryOhos(index + 0.5, this.getRandom(15, 5)));
 }
 let set: LineDataSet = new LineDataSet(entries, "Line DataSet");
 set.setColorByColor(Color.rgb(240, 238, 70));
 set.setLineWidth(2.5);
 set.setCircleColor(Color.rgb(240, 238, 70));
 set.setCircleRadius(5);
 set.setFillColor(Color.rgb(240, 238, 70));
 set.setMode(Mode.CUBIC\_BEZIER);
 set.setDrawValues(true);
 set.setValueTextSize(10);
 set.setValueTextColor(Color.rgb(240, 238, 70));
 set.setAxisDependency(AxisDependency.LEFT);
 d.addDataSet(set);
 data.setLineData(d);
 }
  
 // 生成柱状图数据
 private generateBarData(data: CombinedData): void {
 let entries1: JArrayList<BarEntry> = new JArrayList();
 let entries2: JArrayList<BarEntry> = new JArrayList();
 for (let index = 0; index < this.count; index++) {
 entries1.add(new BarEntry(0, this.getRandom(25, 25)));
 // stacked
 entries2.add(new BarEntry(0, \[this.getRandom(13, 12), this.getRandom(13, 12)\]));
 }
 let set1: BarDataSet = new BarDataSet(entries1, "Bar 1");
 set1.setColorByColor(Color.rgb(60, 220, 78));
 set1.setValueTextColor(Color.rgb(60, 220, 78));
 set1.setValueTextSize(10);
 set1.setAxisDependency(AxisDependency.LEFT);
 let set2: BarDataSet = new BarDataSet(entries2, "");
 set2.setStackLabels(\["Stack 1", "Stack 2"\]);
 set2.setColorsByArr(\[Color.rgb(61, 165, 255), Color.rgb(23, 197, 255)\]);
 set2.setValueTextColor(Color.rgb(61, 165, 255));
 set2.setValueTextSize(10);
 set2.setAxisDependency(AxisDependency.LEFT);
 let groupSpace = 0.06;
 let barSpace = 0.02; // x2 dataset
 let barWidth = 0.45; // x2 dataset
 // (0.45 + 0.02) \* 2 + 0.06 = 1.00 -> interval per "group"
 let set: JArrayList<IBarDataSet> = new JArrayList();
 set.add(set1);
 set.add(set2);
 let d: BarData = new BarData(set);
 d.setBarWidth(barWidth);
 // make this BarData object grouped
 d.groupBars(0, groupSpace, barSpace); // start at x = 0
 data.setBarData(d);
 }
 // 生成散点图数据
 private generateScatterData(data: CombinedData): void {
 let d: ScatterData = new ScatterData();
 let entries: JArrayList<EntryOhos> = new JArrayList();
 for (let index = 0; index < this.count; index += 0.5)
 entries.add(new EntryOhos(index + 0.25, this.getRandom(10, 55)));
 let set: ScatterDataSet = new ScatterDataSet(entries, "Scatter DataSet");
 set.setColorsByArr(ColorTemplate.MATERIAL\_COLORS);
 set.setScatterShapeSize(7.5);
 set.setDrawValues(false);
 set.setValueTextSize(10);
 d.addDataSet(set);
 data.setScatterData(d);
 }
 // 生成蜡烛图数据
 private generateCandleData(data: CombinedData): void {
 let d: CandleData = new CandleData();
 let entries: JArrayList<CandleEntry> = new JArrayList();
 for (let index = 0; index < this.count; index += 2) {
 entries.add(new CandleEntry(index + 1, 90, 70, 85, 75));
 }
 let set: CandleDataSet = new CandleDataSet(entries, "Candle DataSet");
 set.setDecreasingColor(Color.rgb(142, 150, 175));
 set.setShadowColor(ColorTemplate.DKGRAY);
 set.setBarSpace(0.3);
 set.setValueTextSize(10);
 set.setDrawValues(false);
 d.addDataSet(set);
 data.setCandleData(d);
 }
 //生成气泡图数据
 private generateBubbleData(data: CombinedData): void {
 let bd: BubbleData = new BubbleData();
 let entries: JArrayList<BubbleEntry> = new JArrayList();
 for (let index = 0; index < this.count; index++) {
 let y = this.getRandom(10, 105);
 let size = this.getRandom(20, 30);
 entries.add(new BubbleEntry(index + 0.5, y, size));
 }
 let set: BubbleDataSet = new BubbleDataSet(entries, "Bubble DataSet");
 set.setColorsByArr(ColorTemplate.VORDIPLOM\_COLORS);
 set.setValueTextSize(10);
 set.setValueTextColor(Color.rgb(255, 255, 255));
 set.setHighlightCircleWidth(1.5);
 set.setDrawValues(true);
 bd.addDataSet(set);
 data.setBubbleData(bd);
 }
 //生成随机数据
 getRandom(range: number, start: number): number {
 return (Math.random() \* range) + start;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237

2. 添加数据到自定义组合图图表组件

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

雷达图

1. 雷达图数据初始化：

 // 导入一些图表相关的组件和类
 import {
 ChartColor,  // 图表颜色类
 JArrayList,  // 工具类：数据集合
 XAxis,  // 图表X轴部件
 XAxisPosition,  // 图表X轴标签位置枚举类
 Description,  // 图表Description(描述)部件
 Legend,  // 图表Legend(图例)部件
 OnChartValueSelectedListener,  // 数据选择监听
 Highlight,  // 图表高亮数据
 EntryOhos,  // 图表数据结构基础类
 RadarEntry,  // 雷达图数据结构
 RadarChart,  // 雷达图图表类
 RadarDataSet,  // 雷达图数据集合
 RadarChartModel,  // 雷达图配置构建类
 IRadarDataSet,  // 雷达图数据集合的操作类
 RadarData,  // 雷达图数据包
 YAxis,  // 图表Y轴部件
 IAxisValueFormatter,  // 轴数值格式化接口
 AxisBase,  // 轴基础类
 LegendVerticalAlignment,  // 图例垂直对齐方式枚举类
 LegendHorizontalAlignment,  // 图例水平对齐方式枚举类
 LegendOrientation,  // 图例方向枚举类
 } from '@ohos/mpchart';
  
 // Step1:必须：初始化图表配置构建类
 private model: RadarChartModel = new RadarChartModel();
  
 aboutToAppear() {
 // Step2：配置图表的特定样式，各部件间没有先后之分
 // 设置雷达图数值选择监听器
 this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
 // 获取图表描述对象
 let description: Description | null = this.model.getDescription();
 if (description) {
 // 禁用图表描述
 description.setEnabled(false);
 }
 // 获取图例对象
 let l: Legend | null = this.model.getLegend();
 if (l) {
 // 启用图例
 l.setEnabled(true);
  
 // 设置图例垂直对齐方式为顶部
 l.setVerticalAlignment(LegendVerticalAlignment.TOP);
  
 // 设置图例水平对齐方式为居中
 l.setHorizontalAlignment(LegendHorizontalAlignment.CENTER);
  
 // 设置图例方向为水平
 l.setOrientation(LegendOrientation.HORIZONTAL);
  
 // 设置图例不绘制在图表内部
 l.setDrawInside(false);
  
 // 设置图例X轴方向间隔
 l.setXEntrySpace(7);
  
 // 设置图例Y轴方向间隔
 l.setYEntrySpace(5);
  
 // 设置图例文字颜色为白色
 l.setTextColor(Color.White);
 }
 // 设置雷达图网格线宽度、颜色和透明度
 this.model.setWebLineWidth(0.3);
 this.model.setWebColor(0xFFCCCCCC);
 this.model.setWebLineWidthInner(0.3);
 this.model.setWebColorInner(0xFFCCCCCC);
 this.model.setWebAlpha(100);
 // 设置雷达图顶部的额外偏移量
 this.model.setExtraTopOffset(-100);
 // 创建雷达图标记视图对象
 this.normalMarker = new RadarMarkerView();
  
 // 设置雷达图标记
 this.model.setMarker(this.normalMarker);
 // 获取X轴对象
 let xAxis: XAxis | null = this.model.getXAxis();
 if (xAxis) {
 // 设置X轴位置在底部
 xAxis.setPosition(XAxisPosition.BOTTOM);
  
 // 不绘制X轴网格线
 xAxis.setDrawGridLines(false);
  
 // 设置X轴标签文字大小
 xAxis.setTextSize(20);
  
 // 设置X轴Y轴方向的偏移量
 xAxis.setYOffset(0);
 xAxis.setXOffset(0);
  
 // 设置X轴坐标的最小间隔为1
 xAxis.setGranularity(1);
  
 // 设置X轴标签数量为7
 xAxis.setLabelCount(7);
  
 // 设置X轴数值格式化器
 xAxis.setValueFormatter(new valueFormatter());
  
 // 设置X轴标签文字颜色为白色
 xAxis.setTextColor(Color.White);
 }
 // 获取Y轴对象
 let yAxis: YAxis | null = this.model.getYAxis();
 if (yAxis) {
 // 设置Y轴标签数量为5，不强制使用整数标签
 yAxis.setLabelCount(5, false);
  
 // 设置Y轴标签文字大小
 yAxis.setTextSize(20);
  
 // 设置Y轴的最小值为0
 yAxis.setAxisMinimum(0);
  
 // 设置Y轴的最大值为80
 yAxis.setAxisMaximum(80);
  
 // 不绘制Y轴标签
 yAxis.setDrawLabels(false);
 }
 // 设置雷达图数据
 this.setData();
 }
 /\*\*
 \* 设置雷达图的数据
 \*/
 private setData(): void {
 let mul = 80;  // 随机值的放大倍数
 let min = 20;  // 随机值的最小基准
 let cnt = 5;   // 数据点数量
 // 创建雷达图数据点集合
 let entries1: JArrayList<RadarEntry> = new JArrayList<RadarEntry>();
 let entries2: JArrayList<RadarEntry> = new JArrayList<RadarEntry>();
 // 注意: 将数据点添加到数据点数组中的顺序决定它们在图表中心周围的位置。
 for (let i = 0; i < cnt; i++) {
 let val1 = (Math.random() \* mul) + min;
 entries1.add(new RadarEntry(val1));
 let val2 = (Math.random() \* mul) + min;
 entries2.add(new RadarEntry(val2));
 }
 // 创建雷达图数据集
 let set1: RadarDataSet = new RadarDataSet(entries1, "Last Week");
 set1.setColorByColor(ChartColor.rgb(103, 110, 129));
 set1.setFillColor(ChartColor.rgb(103, 110, 129));
 set1.setDrawFilled(true);
 set1.setFillAlpha(180);
 set1.setLineWidth(2);
 set1.setDrawHighlightCircleEnabled(true);
 set1.setDrawHighlightIndicators(false);
 // 创建雷达图数据集
 let set2: RadarDataSet = new RadarDataSet(entries2, "This Week");
 set2.setColorByColor(ChartColor.rgb(121, 162, 175));
 set2.setFillColor(ChartColor.rgb(121, 162, 175));
 set2.setDrawFilled(true);
 set2.setFillAlpha(180);
 set2.setLineWidth(2);
 set2.setDrawHighlightCircleEnabled(true);
 set2.setDrawHighlightIndicators(false);
 // 创建雷达图数据集合
 let sets: JArrayList<IRadarDataSet> = new JArrayList<IRadarDataSet>();
 sets.add(set1);
 sets.add(set2);
 // 创建雷达图数据对象
 let data: RadarData = new RadarData(sets);
 data.setValueTextSize(20);
  
 // 不绘制数据值
 data.setDrawValues(false);
  
 // 设置数据值文字颜色为白色
 data.setValueTextColor(Color.White);
  
 // 设置图表数据
 this.model.setData(data);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

2. 添加数据到雷达图图表组件

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

散点图

1. 散点图数据初始化：

 // 导入一些图表相关的组件和类
 import {
 JArrayList,  // 工具类：数据集合
 XAxis,  // 图表X轴部件
 XAxisPosition,  // 图表X轴标签位置枚举类
 YAxis,  // 图表Y轴部件
 Description,  // 图表Description(描述)部件
 Legend,  // 图表Legend(图例)部件
 OnChartValueSelectedListener,  // 数据选择监听
 Highlight,  // 图表高亮数据
 EntryOhos,  // 图表数据结构基础类
 YAxisLabelPosition,  // 图表Y轴标签位置枚举类
 ScatterChart,  // 散点图图表类
 ScatterChartModel,  // 散点图配置构建类
 ScatterData,  // 散点图数据包
 ScatterDataSet,  // 散点图数据集合
 IScatterDataSet,  // 散点图数据集合的操作类
 ColorTemplate,  // 颜色模板
 ChartShape,  // 图表形状枚举类
 } from '@ohos/mpchart';
  
 aboutToAppear() {
 // Step1:必须：初始化图表配置构建类
 this.model = new ScatterChartModel();
 // Step2：配置图表的特定样式，各部件间没有先后之分
 // 获取图例对象
 let l: Legend | null = this.model.getLegend();
 if (l) {
 // 启用图例
 l.setEnabled(true);
 }
  
 // 设置散点图数值选择监听器
 this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
 // 获取描述对象
 let description: Description | null = this.model.getDescription();
 if (description) {
 // 禁用图表描述
 description.setEnabled(false);
 }
 // 设置图表最大可见数值数量、是否支持缩放、是否绘制网格背景
 this.model.setMaxVisibleValueCount(160);
 this.model.setPinchZoom(false);
 this.model.setDrawGridBackground(false);
 // 获取X轴对象
 let xAxis: XAxis | null = this.model.getXAxis();
 if (xAxis) {
 // 设置X轴位置在底部
 xAxis.setPosition(XAxisPosition.BOTTOM);
  
 // 不绘制X轴网格线
 xAxis.setDrawGridLines(false);
  
 // 设置X轴坐标的最小间隔为1
 xAxis.setGranularity(1);
  
 // 设置X轴标签数量为7
 xAxis.setLabelCount(7);
 }
 // 获取左侧Y轴对象
 let leftAxis: YAxis | null = this.model.getAxisLeft();
 if (leftAxis) {
 // 设置左侧Y轴标签数量为8，不强制使用整数标签
 leftAxis.setLabelCount(8, false);
  
 // 设置左侧Y轴标签位置在图表外部
 leftAxis.setPosition(YAxisLabelPosition.OUTSIDE\_CHART);
  
 // 设置左侧Y轴顶部空白区域大小
 leftAxis.setSpaceTop(15);
  
 // 设置左侧Y轴的最小值为0
 leftAxis.setAxisMinimum(0);
 }
 // 获取右侧Y轴对象
 let rightAxis: YAxis | null = this.model.getAxisRight();
 if (rightAxis) {
 // 设置右侧Y轴标签数量为8，不绘制右侧Y轴网格线
 rightAxis.setLabelCount(8, false);
 rightAxis.setDrawGridLines(false);
  
 // 设置右侧Y轴顶部空白区域大小
 rightAxis.setSpaceTop(15);
  
 // 设置右侧Y轴的最小值为0
 rightAxis.setAxisMinimum(0);
 }
 // 生成随机数据
 let start: number = 1;
 let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
 for (let i = start; i < 20; i++) {
 let val = Number(Math.random() \* 41);
 if (Math.random() \* 100 < 25) {
 values.add(new EntryOhos(i, val));
 } else {
 values.add(new EntryOhos(i, val));
 }
 }
 // 创建散点图数据集
 let dataSet: ScatterDataSet = new ScatterDataSet(values, 'DataSet');
 dataSet.setHighLightColor(Color.Black);
 dataSet.setDrawIcons(false);
 // 创建散点图数据集合
 let dataSetList: JArrayList<IScatterDataSet> = new JArrayList<IScatterDataSet>();
 dataSetList.add(dataSet);
 // 设置图表数据
 this.setData(20, 100);
 }
  
 /\*\*
 \* 设置散点图数据
 \* @param xRange - X轴数据范围
 \* @param yRange - Y轴数据范围
 \*/
 private setData(xRange: number, yRange: number): void {
  
 // 生成随机数据集合
 let values1 = this.generateRandomData(xRange, yRange);
 let values2 = this.generateRandomData(xRange, yRange);
 let values3 = this.generateRandomData(xRange, yRange);
  
 // 创建散点图数据集1
 let set1 = new ScatterDataSet(values1, "DS 1");
 set1.setScatterShape(ChartShape.SQUARE);
 set1.setColorByColor(ColorTemplate.COLORFUL\_COLORS\[0\]);
  
 // 创建散点图数据集2
 let set2 = new ScatterDataSet(values2, "DS 2");
 set2.setScatterShape(ChartShape.CIRCLE);
 set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL\_COLORS\[3\]);
 set2.setScatterShapeHoleRadius(3);
 set2.setColorByColor(ColorTemplate.COLORFUL\_COLORS\[1\]);
  
 // 创建散点图数据集3
 let set3 = new ScatterDataSet(values3, "DS 3");
 set3.setShapeRenderer(new CustomScatterShapeRenderer());
 set3.setColorByColor(ColorTemplate.COLORFUL\_COLORS\[2\]);
  
 // 设置散点图数据集形状大小
 set1.setScatterShapeSize(8);
 set2.setScatterShapeSize(8);
 set3.setScatterShapeSize(8);
  
 // 创建散点图数据集合
 let dataSets: JArrayList<IScatterDataSet> = new JArrayList<IScatterDataSet>();
 dataSets.add(set1); // 添加数据集
 dataSets.add(set2);
 dataSets.add(set3);
  
 // 创建散点图数据
 let dataResult: ScatterData = new ScatterData(dataSets);
 dataResult.setDrawValues(this.isDrawValuesEnable);
 dataResult.setValueTextSize(8);
 dataResult.setHighlightEnabled(true);
  
 // 设置数据项文本大小
 dataResult.setValueTextSize(10);
  
 // 设置图表数据
 if (this.model) {
 this.model.setData(dataResult);
 }
 }
 /\*\*
 \* 生成随机散点图数据
 \* @param xRange - X轴数据范围
 \* @param yRange - Y轴数据范围
 \* @returns 随机散点图数据集合
 \*/
 private generateRandomData(xRange: number, yRange: number): JArrayList<EntryOhos> {
 let values = new JArrayList<EntryOhos>();
  
 // 循环生成随机数据
 for (let i = 0; i < xRange; i++) {
 let x = i; // 在指定范围内生成随机X值
 let y = Math.random() \* yRange; // 在指定范围内生成随机Y值
 values.add(new EntryOhos(x, y));
 }
 return values;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

2. 添加数据到散点图图表组件

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

瀑布图

1. 瀑布图数据初始化：

 import {
 WaterfallChart, // 瀑布图图表类
 WaterfallChartModel, // 瀑布图配置构建类
 BarData, // 瀑布图数据包
 WaterfallDataSet, // 瀑布图数据集合
 WaterfallEntry, // 瀑布图数据结构
 ChartGesture, // 手势事件模式
 Description, // 图表Description(描述)部件
 EntryOhos, // 图表数据结构基础类
 Fill, // 图表填充类型构建类
 Highlight, // 图表高亮数据
 IBarDataSet, // 瀑布图数据集合的操作类
 JArrayList, // 工具类：数据集合
 Legend, // 图表Legend(图例)部件
 LimitLabelPosition, // 图表的LimitLine标签位置枚举类
 LimitLine, // 图表LimitLine
 MarkerView, // 图表的Marker(标志气泡)部件
 OnChartGestureListener, // 手势事件监听
 OnChartValueSelectedListener, // 数据选择监听
 XAxis, // 图表X轴部件
 XAxisPosition, // 图表X轴标签位置枚举类
 YAxis, // 图表Y轴部件
 YAxisLabelPosition // 图表Y轴标签位置枚举类
} from '@ohos/mpchart';
 // 构造数据选择监听器
 private valueSelectedListener: OnChartValueSelectedListener = {
 onValueSelected: (e: EntryOhos, h: Highlight) => {
 LogUtil.info("SimpleWaterfallChartPage onValueSelected: " + e.getX());
 },
 onNothingSelected: () => {
 LogUtil.info("SimpleWaterfallChartPage onNothingSelected");
 }
 }
  
 // 构造手势识别事件监听器
 private chartGestureListener: OnChartGestureListener = {
 onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
 },
 onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => {
 // ...todoSomething
 },
 onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
 // ...todoSomething
 },
 onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
 // ...todoSomething
 },
 onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => {
 // ...todoSomething
 },
 onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => {
 // ...todoSomething
 },
 onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => {
 // ...todoSomething
 },
 onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => {
 // ...todoSomething
 }
 }
  
 // 图表数据初始化
 aboutToAppear() {
  
 // Step1:必须：初始化图表配置构建类
 this.model = new WaterfallChartModel();
  
 // Step2:配置图表指定样式，各部件间没有先后之分
  
 // 为图表添加数据选择的监听器
 this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
 // 为图表添加手势识别监听器
 this.model.setOnChartGestureListener(this.chartGestureListener);
 // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
 let description: Description | null = this.model.getDescription()
 if (description) {
 description.setEnabled(false);
 }
 // 获取图表图例部件，设置图表图例部件不可用
 let l: Legend | null = this.model.getLegend();
 if (l) {
 l.setEnabled(false);
 }
 // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
 this.model.setMaxVisibleValueCount(40);
 // 是否绘制图表的背景色，绘制范围为图表瀑布图的绘制范围，不包含轴线之外的部分
 this.model.setDrawGridBackground(false);
 // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
 this.model.setGridBackgroundColor('#500000ff')
 // 设置不绘制瀑布图的柱体阴影背景
 this.model.setDrawBarShadow(false);
 // 设置瀑布图的数值在柱体上方
 this.model.setDrawValueAboveBar(false);
 // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
 this.limitLine1 = new LimitLine(120, 'Upper Limit');
 this.limitLine1.setLineWidth(4);
 this.limitLine1.enableDashedLine(10, 10, 0);
 this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT\_TOP);
 this.limitLine1.setTextSize(10);
 this.limitLine2 = new LimitLine(50, 'Lower Limit');
 this.limitLine2.setLineWidth(4);
 this.limitLine2.enableDashedLine(10, 10, 0);
 this.limitLine2.setLineColor(Color.Yellow);
 this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT\_BOTTOM);
 this.limitLine2.setTextSize(10);
 // 设置图表左Y轴信息
 this.leftAxis = this.model.getAxisLeft();
 if (this.leftAxis) {
 this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true)
 this.leftAxis.setDrawLimitLinesBehindData(false);
 // 添加LimitLines
 this.leftAxis.addLimitLine(this.limitLine1);
 this.leftAxis.addLimitLine(this.limitLine2);
 }
 // 设置图表右Y轴信息
 this.rightAxis = this.model.getAxisRight();
 if (this.rightAxis) {
 this.rightAxis.setEnabled(false);
 this.rightAxis.setAxisMinimum(0);
 }
 // 设置X轴信息
 this.xAxis = this.model.getXAxis();
 if (this.xAxis) {
 this.xAxis.setPosition(XAxisPosition.BOTTOM);
 }
 // 为图表设置markerView
 this.normalMarker = new MarkerView();
 this.model.setMarker(this.normalMarker);
 // 也可设置定义图表MarkerView
 this.stackMarker = new CustomMarkerView();
 // 生成单一颜色数据
 this.data = this.getNormalData();
  
 // 按Y轴刻度范围绘制多种颜色数据
 this.data = this.getSegmentationData();
  
 // 高亮最高点最低点数据
 this.data = this.getTopAndBottomHighlightData();
  
 // 将数据与图表配置类绑定
 this.model.setData(this.data);
 // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
 this.model.setVisibleXRangeMaximum(20);
 }
  
 private getNormalData(): BarData {
 let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();
 // 设置标记点位置及颜色
 let h1 = new WaterfallHighlight(20, 30, Color.Gray);
 let h2 = new WaterfallHighlight(30, 40, Color.Gray);
 let h3 = new WaterfallHighlight(40, 60, Color.Green);
 let h4 = new WaterfallHighlight(60, 70, Color.Red);
 values.add(new WaterfallEntry(1, 10, 30, undefined, undefined, h1));
 values.add(new WaterfallEntry(2, 15, 50));
 values.add(new WaterfallEntry(4, 5, 95, undefined, undefined, h2, h3, h4));
 values.add(new WaterfallEntry(6, 45, 80, undefined, undefined, h2, h3));
 this.dataSet = new WaterfallDataSet(values, 'DataSet');
 this.dataSet.setHighLightColor(Color.Gray);
 this.dataSet.setDrawIcons(false);
 // 为柱体添加颜色信息
 this.dataSet.setColorByColor(Color.Pink);
 this.dataSet.setValueTextSize(10)
 let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
 dataSetList.add(this.dataSet);
 let barData: BarData = new BarData(dataSetList);
 //设置瀑布图宽度
 barData.setBarWidth(0.3);
 //设置顶部圆角半径
 barData.setTopRadius(1);
 return barData;
 }
 private getSegmentationData(): BarData {
 let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();
 values.add(new WaterfallEntry(1, 10, 70));
 values.add(new WaterfallEntry(2, 15, 80));
 this.dataSet = new WaterfallDataSet(values, 'DataSet');
 this.dataSet.setHighLightColor(Color.Gray);
 this.dataSet.setDrawIcons(false);
 this.dataSet.setColorByColor(Color.Pink);
 this.dataSet.setValueTextSize(10)
 // 根据Y刻度范围设置颜色
 let highlightList: WaterfallHighlight\[\] = \[\];
 highlightList.push(new WaterfallHighlight(0, 40, Color.Green));
 highlightList.push(new WaterfallHighlight(40, 60, Color.Orange));
 highlightList.push(new WaterfallHighlight(60, 100, Color.Pink));
 this.dataSet.setYAxisSegmentationColors(highlightList);
 let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
 dataSetList.add(this.dataSet);
 let barData: BarData = new BarData(dataSetList);
 barData.setBarWidth(0.3);
 return barData;
 }
  
 private getTopAndBottomHighlightData(): BarData {
 let values: JArrayList<WaterfallEntry> = new JArrayList<WaterfallEntry>();
 let highlightList: WaterfallHighlight\[\] = \[\];
 // Y刻度范围颜色设置
 highlightList.push(new WaterfallHighlight(0, 40, Color.Green));
 highlightList.push(new WaterfallHighlight(40, 60, Color.Orange));
 highlightList.push(new WaterfallHighlight(60, 100, Color.Pink));
 // 瀑布图数据封装
 values.add(new WaterfallEntry(1, 10, 90));
 values.add(new WaterfallEntry(2, 15, 80));
 values.add(new WaterfallEntry(3, 20, 90));
 this.dataSet = new WaterfallDataSet(values, 'DataSet');
 // 设置瀑布图选中时颜色
 this.dataSet.setHighLightColor(Color.Gray);
 this.dataSet.setDrawIcons(false);
 // 设置瀑布图颜色
 this.dataSet.setColorByColor(Color.Pink);
 // Y刻度范围颜色设置
 this.dataSet.setYAxisSegmentationColors(highlightList);
 // 最高点最低点是否高亮
 this.dataSet.setEnableMaxOrMinHighlightColor(true);
 // 最高点高亮时颜色设置
 this.dataSet.setMaxyHighlightColor(Color.Brown);
 // 最低点高亮时颜色设置
 this.dataSet.setMinyHighlightColor(Color.Yellow);
 let dataSetList: JArrayList<IBarDataSet> = new JArrayList<IBarDataSet>();
 dataSetList.add(this.dataSet);
 let barData: BarData = new BarData(dataSetList);
 barData.setBarWidth(0.3);
 return barData;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

2. 添加数据到瀑布图表组件

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

自定义图表

1. 定制数据结构

图表数据分为三层 ，分别对应基类：EntryOhos, DataSet,ChartData

• CustomEntry: 定制图表基础数据实体

继承自EntryOhos,类，对外提供数据实体类的属性的get,set方法。

• CustomDataSet: 定制图表实体的集合类

继承自DataSet, 描述一组实体信息，每个entry通用的属性可在此类中配置及处理，如获取数据集合中的X轴/Y轴最大最小值，设置图表高亮颜色等。

• CustomData: 定制图表数据容器

继承自ChartData,处理通用的实体集合(Dataset)的信息，如计算获取最终显示时的X轴/Y轴最大最小值，或者如柱状图的柱体宽度等。

2. 定制图表配置构建类

继承自ChartModel基础类，根据需要可以继承子类BarLineChartBaseModel，PieRadarChartBaseModel，同时需要实现各自图表的 DataProvoder接口，主要用于获取图表数据容器CustomData，DataProvider 继承自ChartInterface。

图表配置构建类，需要重写以下重要方法：

• setContext2D 必须

由于图表绘制依赖于Canvas组件，所以需要在绘制的流程中获取到绑定到Canvas组件上的操作上下文CanvasRenderingContext2D，通过此方法将Canvas的操作上下文与图表绘制流程进行绑定，用于后续图表绘制操作。

        public setContext2D(context2d: CanvasRenderingContext2D) {
         this.context2d = context2d;
        }
1
2
3

• onChartSizeChanged 必须

如果想要在页面初始化时就显示图表，需要在aboutToAppear()方法中进行图表数据构建及配置，例如此种情况下，图表绘制流程获取到的组件宽高数据就是不正确的。

所以需要Canvas组件完成布局之后通过监听组件Size变化回调onAreaChange()通知绘制流程根据组件当前正确的Size进行计算缩放比例，坐标校正等。

        public onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number) {
         super.onSizeChanged(newWidth, newHeight, oldWidth, oldHeight);
        }
1
2
3

• invalidate 必须

用于手动触发图表重新绘制，如图表数据，轴边界，显示设置更新等操作之后，需要手动触发重新绘制，刷新最新显示效果。

        public invalidate(): void {
         if (this.context2d) {
         super.onDraw(this.context2d);
         }
        }
1
2
3
4
5

• init 必须

        此方法用于初始化图表的各个部件及其渲染类
        
        定制部件如：XAxis，YAxis，Description，Legend等，
        
        定制坐标转换类如：Transformer
        
        定制渲染类如：XAxisRenderer,YAxisRenderer,DataRenderer等。
        
        public init(): void {
         super.init();
         this.mRenderer = new BarChartRenderer(this, this.mAnimator!, this.mViewPortHandler);
         this.setHighlighter(new BarHighlighter(this));
         let xAxis : XAxis | null = this.getXAxis();
         if (xAxis) {
         xAxis.setSpaceMin(0.5);
         xAxis.setSpaceMax(0.5);
         }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• onDraw 必须

用于规定图表绘制流程，一般BarLineChartBaseModel，PieRadarChartBaseModel基本符合绘制要求，也可根据业务进行定制，每次图表刷新本质上就是调用此方法进行重新绘制。

注意:

• 不要在onDraw方法做耗时操作;

• 不要在onDraw方法中新建对象;

3. 定制图表部件

图表各部件(Description，Legend，LimitLine，XAxis，YAxis)都继承自基类ComponentBase，提供图表部件的基础属性，xOffset，yOffset，enabled，textSize，textColor等，同时各部件可以根据特性进行添加定制属性，如X轴/Y轴通过calculate()计算出预期的坐标轴最大最小值（与Dataset里面的最大最小值可能会有差异，X轴/Y轴的最大最小值可以设置预留空间）。

    /\*\*
     \* 计算要显示的坐标轴最大最小值
     \* @param dataMin: 实际的数据最小值
     \* @param dataMax: 实际的数据最大值
     \*/
    public calculate(dataMin: number, dataMax: number): void {
     // if custom, use value as is, else use data value
     let min: number = this.mCustomAxisMin ? this.mAxisMinimum : (dataMin - this.mSpaceMin);
     let max: number = this.mCustomAxisMax ? this.mAxisMaximum : (dataMax + this.mSpaceMax);
     // temporary range (before calculations)
     let range: number = Math.abs(max - min);
     // in case all values are equal
     if (range == 0) {
     max = max + 1;
     min = min - 1;
     }
     this.mAxisMinimum = min;
     this.mAxisMaximum = max;
     // actual range
     this.mAxisRange = Math.abs(max - min);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4. 定制渲染类

CustomXAxisRenderer/CustomYAxisRenderer ：坐标轴渲染器

• computeAxis

根据配置信息判断是否需要再次校正要显示的X轴/Y轴的最大最小值

        /\*\*
         \* X轴渲染器计算要显示的X轴最小值和最大值
         \* @param min : XAxis的calculate中计算获取的预期显示的X轴刻度最小值
         \* @param max : XAxis的calculate中计算获取的预期显示的X轴刻度最大值
         \* @param inverted: 是否反转坐标轴
         \*/
        public computeAxis(min: number, max: number, inverted: boolean) {
         // calculate the starting and entry point of the y-labels (depending on
         // zoom / contentrect bounds)
         if (!this.mViewPortHandler || !this.mTrans) {
         return;
         }
          
         // 如果修改过X轴比例，则根据当前组件宽度，和scalex重新计算新的X轴最大最小值
         if (this.mViewPortHandler.contentWidth() > 10 && !this.mViewPortHandler.isFullyZoomedOutX()) {
         let p1: MPPointD | undefined = this.mTrans?.getValuesByTouchPoint(this.mViewPortHandler.contentLeft(), this.mViewPortHandler.contentTop());
         let p2: MPPointD | undefined = this.mTrans?.getValuesByTouchPoint(this.mViewPortHandler.contentRight(), this.mViewPortHandler.contentTop());
         if (!!p1 && !!p2) {
         if (inverted) {
         min = p2.x;
         max = p1.x;
         } else {
         min = p1.x;
         max = p2.x;
         }
         MPPointD.recycleInstance(p1);
         MPPointD.recycleInstance(p2);
         }
         }
         this.computeAxisValues(min, max);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• computeAxisValues

根据确定好的X轴/Y轴的最大最小值，再进行计算在最大最小值之间应该显示多少个刻度标签，对应的值都应该是多少。

• renderAxisLabels

用于绘制坐标轴的刻度标签。

• renderGridLines

用于绘制坐标轴的网格线。

• renderAxisLine

用于绘制坐标轴的轴线。

• renderLimitLines

用于绘制坐标轴数据的限制线。

CustomDataRender：数据渲染器

• initBuffers

用于处理图表的缓存数据，此方法会分配内存，请谨慎使用，非必要不要使用此方法。

• drawData

用于绘制图表，将数据转换为图形。

• drawValues

用于绘制图表数据数值显示。

• drawExtras

额外绘制图表内容。

• drawHighlighted

绘制图表高亮显示样式。

5. 定制图表组件

图表绘制基于Canvas组件实现，所以自定义的图表布局需要包含Canvas画布，在Canvas的onReady中开启绘制，通过onAreaChange回调方法校正图表Size。

    import CustomModel from '../xx/CustomModel';
    @Component
    export struct CustomChart {
     model: CustomModel | null = null;
     private setting: RenderingContextSettings = new RenderingContextSettings(true);
     private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting);
     build() {
     Column() {
     Canvas(this.context2D)
     .onReady(() => {
     if (this.model) {
      
     // 画布上下文绑定到图表绘制流程
     this.model.setContext2D(this.context2D);
      
     // 开始绘制图表
     this.model.onDraw(this.context2D);
     }
     })
     .onAreaChange((oldArea: Area, newArea: Area) => {
     if (this.model && ((newArea.width !== oldArea.width) || (newArea.height !== oldArea.height))) {
      
     // 校正图表Size 
     this.model.onChartSizeChanged(Number(newArea.width), Number(newArea.height), Number(oldArea.width), Number(oldArea.height));
     }
     })
     // 绑定手势识别事件
     .priorityGesture(GestureGroup(GestureMode.Parallel,
     TapGesture({ count: 1 })
     .onAction((event?: GestureEvent) => {
     if (event && this.model) {
     this.model.onSingleTapUp(false, event);
     }
     }),
     PanGesture()
     .onActionStart((event?: GestureEvent) => {
     if (this.model && event) {
     this.model.onPan(false, 'Down', event);
     }
     })
     .onActionUpdate((event?: GestureEvent) => {
     if (this.model && event) {
     this.model.onPan(false, 'Move', event);
     }
     })
     .onActionEnd((event?: GestureEvent) => {
     if (this.model && event) {
     this.model.onPan(false, 'Up', event);
     }
     })
     ))
     }
     }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

6. 图表显示

   初始化数据，设置UI显示。
   
   aboutToAppear() {
    this.model = new CustomModel();
    // ... 配置各部件样式
    // ... 初始化数据
   }
   build() {
    Column() {
    CustomChart({ model: this.model })
    .width('100%')
    .height('100%')
    }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

接口说明

一、ChartModel

所有图表配置构建类的基类。

1.animateX

public animateX(durationMillis: number): void;
1

展示图表时带有X轴动画。

参数：

public animateX(durationMillis: number, easing: string): void;
1

展示图表时带有X轴动画。

参数：

2.animateXY

public animateXY(durationMillisX: number, durationMillisY: number): void;
1

展示图表时同时带有X轴，Y轴动画。

参数：

public animateXY(durationMillisX: number, durationMillisY: number, easingX: string): void;
1

展示图表时同时带有X轴，Y轴动画。

参数：

public animateXY(durationMillisX: number, durationMillisY: number, easingX: string, easingY: string): void;
1

展示图表时同时带有X轴，Y轴动画。

参数：

3.animateY

展示图表时带有Y轴动画。

public animateY(durationMillis: number): void;
1

参数：

public animateY(durationMillis: number, easing: string): void;
1

参数：

4.calcMinMax

protected abstract calcMinMax() : void;
1

计算 y-min 和 y-max 值以及 y-delta 和 x-delta 值。

5.calculateOffsets

protected abstract calculateOffsets() : void;
1

计算图表到边框的偏移量，具体取决于图例的位置，x轴y轴的长度，及其的标签位置。

6.clear

public clear() : void;
1

清空图表的所有数据，将其置空null，并刷新图表。

7.clearValues

public clearValues() : void;
1

从图表中删除所有数据集（以及条目），并刷新图表。

8.getAnimator

public getAnimator(): ChartAnimator | null;
1

返回负责对图表值进行动画处理的动画制作者。

返回值：

9.getCenter

public getCenter(): MPPointF;
1

返回图表(整个视图)的中心点的可回收的MPPointF实例。

返回值：

10.getCenterOffsets

public getCenterOffsets(): MPPointF | null;
1

返回图表的图形绘制的中心区域的可回收的MPPointF实例。

返回值：

11.getCenterOfView

public getCenterOfView(): MPPointF;
1

返回图表(整个视图)的中心点的可回收的MPPointF实例。

返回值：

12.getContentRect

public getContentRect(): Rect;
1

返回图表绘制的内容区域的矩形。

返回值：

13.getData

public getData(): T | null ;
1

返回已为图表设置的 ChartData 对象。

返回值：

14.getDefaultValueFormatter

public getDefaultValueFormatter(): IValueFormatter;
1

返回默认的数据格式化接口实现类。

返回值：

15.getHighlightByTouchPoint

public getHighlightByTouchPoint(x: number, y: number): Highlight | null;
1

返回 LineChart，ScatterChart，CandleStickChart等图表触摸屏幕时的Highlight 对象（包含 x-index 和 DataSet 索引）。

参数：

返回值：

16.getHighlighted

public getHighlighted(): Highlight\[\] | null;
1

返回当前高亮显示值的数组。这可能是空值，如果没有突出显示，则为空数组。

参数：

返回值：

17.getHighlighter

public getHighlighter(): IHighlighter | null;
1

返回当前高亮显示条目接口。

返回值：

18.getLegend

public getLegend(): Legend | null ;
1

获取图例对象。

返回值：

19.getLegendRenderer

public getLegendRenderer(): LegendRenderer | null;
1

获取图例渲染器。

返回值：

20.getRenderer

public getRenderer(): DataRenderer | null;
1

获取图表数据渲染器。

返回值：

21.getXAxis

public getXAxis(): XAxis | null;
1

获取X轴对象。

返回值：

22.invalidate

public abstract invalidate();
1

重绘图表。

23.notifyDataSetChanged

public abstract notifyDataSetChanged();
1

图表数据刷新。

onChartSizeChanged

public abstract onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number): void;
1

更新图表正确Size。

参数：

24.onDraw

protected onDraw(c: CanvasRenderingContext2D): void ;
1

图表绘制方法。

参数：

25.setContext2D

public abstract setContext2D(context2d: CanvasRenderingContext2D);
1

参数：

26.setData

public setData(data: T) : void;
1

参数：

二、BarLineChartBaseModel

柱状图基础类

1.calcMinMax

protected calcMinMax(): void;
1

计算坐标的最大最小值。

2.calculateOffsets

public calculateOffsets(): void;
1

计算图表offset。

3.drawGridBackground

protected drawGridBackground(c: CanvasRenderingContext2D): void;
1

绘制图表背景。

参数：

4.getAxis

public getAxis(axis: AxisDependency): YAxis | null;
1

根据Y轴位置获取Y轴对象。

参数：

返回值：

5.getAxisLeft

public getAxisLeft(): YAxis | null;
1

获取左Y轴对象。

返回值：

6.getAxisRight

public getAxisRight(): YAxis | null;
1

获取右Y轴对象。

返回值：

7.getMinOffset

public getMinOffset(): number;
1

获取最小Offset值。

返回值：

8.getRendererLeftYAxis

public getRendererLeftYAxis(): YAxisRenderer | null;
1

获取左Y轴渲染器。

返回值：

9.getRendererRightYAxis

public getRendererRightYAxis(): YAxisRenderer | null;
1

获取右Y轴渲染器。

返回值：

10.XAxisRenderer

public getRendererXAxis(): XAxisRenderer | null;
1

获取X轴渲染器。

返回值：

11.setLongPressCursorEnabled

public setLongPressCursorEnabled(enabled: boolean): void;
1

设置长按游标能力标识。

参数：

返回值：无

12.getLongPressCursorEnabled

public getLongPressCursorEnabled(): boolean;
1

获取长按游标能力标识。

参数：无

返回值：

13.setLongPressDuration

public setLongPressDuration(duration: number): void;
1

设置长按响应时长。

参数：

返回值：无

14.getLongPressDuration

public getLongPressDuration(): number;
1

获取长按响应时长。

参数：无

返回值：

15.setSwipeEnabled

public setSwipeEnabled(enabled: boolean): void;
1

设置手势滑动响应能力（结合长按游标能力使用）。

参数：

返回值：无

16.getSwipeEnabled

public getSwipeEnabled(): boolean;
1

获取手势滑动响应能力标识（结合长按游标能力使用）。

参数：无

返回值：

三、ComponentBase

图表部件基础类。

1.setTextColor

public setTextColor(color: string | number | CanvasGradient | CanvasPattern): void;
1

设置部件文本渲染颜色。

参数：

2.getTextColor

public getTextColor(): string | number | CanvasGradient | CanvasPattern;
1

获取部件文本渲染颜色。

返回值：

3.setTextSize

public setTextSize(size: number): void;
1

设置部件文本Size，需要转化为vp单位。

参数：

4.getTextSize

public getTextSize(): number;
1

返回值：

5.setXOffset

public setXOffset(xOffset: number): void;
1

设置X轴距离图表内容区域的Offset。

参数：

6.getXOffset

public getXOffset(): number;
1

获取X轴距离图表内容区域的Offset。

返回值：

7.setYOffset

public setYOffset(yOffset: number): void;
1

设置Y轴距离图表内容区域的Offset。

参数：

8.getYOffset

public getYOffset(): number;
1

获取Y轴距离图表内容区域的Offset。

返回值：

四、AxisBase

坐标轴基类。

1.addLimitLine

public addLimitLine(limitLine: LimitLine): void;
1

为坐标轴添加限制线对象。

参数：

2.calculate

public calculate(dataMin: number, dataMax: number): void;
1

计算预期坐标轴的最大最小值，用于自定义坐标轴使用。

参数：

3.setAxisMaximum

public setAxisMaximum(max: number): void;
1

设置自定义的轴的最大值。

参数：

4.setAxisMinimum

public setAxisMinimum(min: number): void;
1

设置自定义的轴的最小值。

参数：

5.setDrawAxisLine

public setDrawAxisLine(enabled: boolean): void;
1

设置是否绘制轴线。

参数：

6.setDrawGridLines

public setDrawGridLines(enabled: boolean): void;
1

设置是否绘制网格线。

参数：

7.setDrawGridLinesBehindData

public setDrawGridLinesBehindData(enabled: boolean): void;
1

设置是否在数据后绘制网格线。

参数：

8.setDrawLimitLinesBehindData

public setDrawLimitLinesBehindData(enabled: boolean): void ;
1

设置是否在数据后绘制限制线。

参数：

9.setValueFormatter

public setValueFormatter(formatter: IAxisValueFormatter): void ;
1

设置数据的格式转换器。

参数：

五、XAxis

X轴对象。

1.setPosition

public setPosition(pos: XAxisPosition): void;
1

设置X轴显示位置。

参数：

2.getPosition

public getPosition(): XAxisPosition;
1

获取X轴显示位置。

返回值：

3.setLabelRotationAngle

public setLabelRotationAngle(angle: number): void;
1

设置X轴标签旋转角度。

参数：

4.getLabelRotationAngle

public getLabelRotationAngle(): number;
1

获取X轴标签旋转角度。

返回值：

5.setLabelXOffset

public setLabelXOffset(xOffset: number): void
1

获取X轴标签偏移量

返回值：无

参数：

6.getLabelXOffset

public getLabelXOffset(): number
1

获取标签在 X 轴上的偏移量

返回值：

参数：无

7.setXAxisLabelPosition

public setXAxisLabelPosition(position: XAxisLabelPosition): void
1

设置X轴标签位置

返回值：无

参数：

8.getXAxisLabelPosition

public getXAxisLabelPosition(): XAxisLabelPosition
1

获取X轴标签位置

返回值：

参数：无

9.setCustomLabels

public setCustomLabels(numbers: number\[\]): void
1

设置x轴自定义Labels

返回值：无

参数：

10.getCustomLabels

public getCustomLabels(): number\[\]
1

获取自定义Labels

返回值：

参数：无

11.setDrawCustomLabels

public setDrawCustomLabels(flag: boolean): void
1

设置是否使用自定义Labels

返回值：无

参数：

12.isDrawCustomLabels

public isDrawCustomLabels(): boolean
1

检查是否正在使用自定义Labels

返回值：

参数：无

六、YAxis

Y轴对象。

1.calculate

public calculate(dataMin: number, dataMax: number): void;
1

计算轴上的预期的最大最小值。

参数：

2.getAxisDependency

public getAxisDependency(): AxisDependency;
1

获取Y轴位置。

返回值：

3.setPosition

public setPosition(pos: YAxisLabelPosition): void;
1

设置Y轴标签的位置。

参数：

4.getLabelPosition

public getLabelPosition(): YAxisLabelPosition;
1

获取Y轴标签的位置。

返回值：

5.setLabelXOffset

public setLabelXOffset(xOffset: number): void;
1

设置Y轴标签的X轴方向上的Offset。

参数：

6.getLabelXOffset

public getLabelXOffset(): number;
1

获取Y轴标签的X轴方向上的Offset。

返回值：

7.setDrawZeroLine

public setDrawZeroLine(mDrawZeroLine: boolean): void;
1

设置是否绘制0线。

参数：

8.EventControl事件控制类

EventType 为枚举类型(单击、双击、长按)

enum EventType { SingleTap, DoubleTap, LongPress }
1

9.setEventEnable

public setEventEnable(evType: EventType): EventControl
1

启用事件

参数：

10.setEventDisable

public setEventDisable(evType: EventType): EventControl
1

禁用事件

参数：

11.eventIsEnable

public eventIsEnable(evType: EventType): boolean;
1

事件是否启用。

参数：

12.eventIsDisable

public eventIsDisable(evType: EventType): boolean;
1

事件是否被禁用。

参数：

13.setYAxisExtensionLine

public setYAxisExtensionLine(opt: boolean): void
1

设置y轴延伸线

参数：

14.addGridLine

public addGridLine(customLine: GridLineConfig): void
1

自定义网格线

参数：

15.getGridLines

public getGridLines(): JArrayList
1

获取自定义网格线

返回值：

// 示例代码参见 CustomGridLineChartPage
export interface GridLineConfig {
 position: number;
 lineWidth?: number;
 lineColor?: number;
 dashPathEffect?: DashPathEffectConfig
}
export interface DashPathEffectConfig {
 lineLength: number;
 spaceLength: number;
 phase: number
}
1
2
3
4
5
6
7
8
9
10
11
12

六、自定义MarkerView传入

@State customUiInfo: CustomUiInfo \= new CustomUiInfo(90, 50);
  
@Builder customUi() {
 // 是否在图表content内
 if (this.customUiInfo.isInbounds && this.customUiInfo.data) {
 Column() {
 Text(\`2023-12-15\`).fontColor(Color.Gray).fontSize(12).fontWeight(FontWeight.Bold)
 Text(\`X: ${this.customUiInfo.data.getX()}\`).fontColor(Color.Gray).fontSize(12)
 Text(\`Y: ${this.customUiInfo.data.getY()}\`).fontColor(Color.Gray).fontSize(12)
 }
 .padding(4)
 .borderRadius(6)
 .border({ width: 1, color: Color.Orange})
 .backgroundColor(0xf0f0f0)
 .width(this.customUiInfo.width)
 .height(this.customUiInfo.height)
 .margin({ left: this.customUiInfo.x, top: this.customUiInfo.y })
 .alignItems(HorizontalAlign.Start)
 .onClick(ev \=> {
 this.customUiInfo.showUi \= false;
 })
 }
}
BarChart({ model: this.model,
 // 自定义 ui: 传入 builder
 customUiBuilder: this.customUi,
 // 通过什么事件触发
 customUiTriggerEvent: EventType.SingleTap,
 // 自定义ui的位置信息
 customUiInfo: this.customUiInfo,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

七、WaterfallDataSet

瀑布图数据类

1.setDotsColors

public setDotsColors(color: number | string): void;
1

瀑布图设置所有高亮点的颜色。

参数：

2.getDotsColors

public getDotsColors(): Array<string | number> {
1

获取瀑布图所有高亮点的颜色。

返回值：

八、ChartData

图表数据类

1.setHighlightByXDistance

public setHighlightByXDistance(highlightByXDistance: boolean): void;
1

设置是否仅通过X轴距离来判断是否高亮点。

参数：

2.isHighlightByXDistance

public isHighlightByXDistance(): boolean
1

检查是否仅通过X轴距离来判断是否高亮点。

返回值：

约束与限制

在下述版本验证通过：

• DevEco Studio: 4.1 (4.1.3.521), SDK: API11 (4.1.0.65)

目录结构

|---- ohos-MPChart
|     |---- entry  # 示例代码文件夹
|     |---- library  # mpchart库文件夹
|           |---- index.ets  # 对外接口
│           ├----components # 框架代码目录
│                 ├----animation # 动画目录
│                 │ 
│                 ├----buffer # 缓存相关目录
│                 │ 
│                 ├----chartcomponents # 各类型图表目录
│                 │ 
│                 ├----charts # 各类型图表Model类目录
│                 │ 
│                 ├----components   # 自定义组件目录
│                 │ 
│                 ├----data   # 数据实体目录
│                 │ 
│                 ├----formatter # 各种数据格式化目录
│                 │ 
│                 ├----highlight # 各种图表中高亮显示操作目录
│                 │ 
│                 ├----interfaces   # 对外接口目录
│                 │ 
│                 ├----jobs   # 动画工作线程目录
│                 │ 
│                 ├----listener  # 手势监听目录
│                 │ 
│                 ├----renderer  # 各种图表绘制属性设置目录
│                 │ 
│                 └----utils  # 工具类目录
│ 
└─resources # 资源文件
|     |---- README.md  # 安装使用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向