【OpenHarmony】 鸿蒙 UI开发之MpChart（一）
<hr> 往期笔录记录：鸿蒙应用开发与鸿蒙体系开发哪个更有远景？
嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
对于大前端开发来说，转鸿蒙开发毕竟是福还是祸？
鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
记录一场鸿蒙开发岗位口试履历~
连续更新中……
<hr> 简介
mpchart是一个包含各种范例图表的图表库，重要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart重要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
结果展示：
https://i-blog.csdnimg.cn/direct/22e002688f0f4c0f8083675fbfa03aff.gif#pic_center
安装教程
ohpm install @ohos/mpchart
使用说明
柱状图
[*]柱状图数据初始化：
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, ));
values.add(new BarEntry(2, ));
let set1: BarDataSet | null = null;
set1 = new BarDataSet(values, "Statistics Vienna 2014");
set1.setDrawIcons(false);
// 为柱体添加指定分段的颜色信息
set1.setColorsByArr();
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;
}
[*]添加数据到自定义竖向柱状图表组件
// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建
// 如果在之后通过事件触发，
// 可通过barData.notifyDataSetChanged();来触发数据更新，
// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新，
// 可通过this.model.invalidate();来触发绘制更新。
BarChart({ model: this.model })
.width('100%')
.height('30%')
线形图
[*]线形图数据初始化：
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.setVisibleXRangeMa
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]