【OpenHarmony】 鸿蒙 UI开发之MpChart（一）_鸿蒙开发mpchart导入失败

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

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

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

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

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

简介

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

效果展示：

安装教程

 ohpm install @ohos/mpchart

使用说明

柱状图

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 = new JArrayList(); 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 = new JArrayList(); dataSetList.add(dataSet); let barData: BarData = new BarData(dataSetList); //设置柱状图宽度 barData.setBarWidth(0.85); //设置顶部圆角半径 barData.setTopRadius(5); return barData; } private getGradientData(): BarData { let values: JArrayList = new JArrayList(); 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 = new JArrayList(); 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 = new JArrayList(); dataSetList.add(dataSet); let barData: BarData = new BarData(dataSetList); barData.setBarWidth(0.85); return barData; } private getStackData(): BarData { let values: JArrayList = new JArrayList(); 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 = new JArrayList(); dataSets.add(set1); let data: BarData = new BarData(dataSets); data.setValueTextColor(Color.White); return data; }

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

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

线形图

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 = new JArrayList(); 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(); 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 = new JArrayList(); dataSetList.add(this.dataSet); let lineData: LineData = new LineData(dataSetList); return lineData }

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

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

饼状图

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 = new JArrayList(); // 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 = 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); }

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

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

气泡图

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 = new JArrayList(); 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 = new JArrayList(); 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(); let values2 = new JArrayList(); let values3 = new JArrayList(); // 创建图标绘制对象 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(); 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); } } 

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

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

蜡烛图

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 = new JArrayList(); 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. 组合图数据初始化：

 // 导入一些图表相关的组件和类 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 = 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 = new JArrayList(); let entries2: JArrayList = new JArrayList(); for (let index = 0; index  interval per \"group\" let set: JArrayList = 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 = 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 = 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 = 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; }

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

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

雷达图

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 = new JArrayList(); let entries2: JArrayList = new JArrayList(); // 注意: 将数据点添加到数据点数组中的顺序决定它们在图表中心周围的位置。 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 = new JArrayList(); 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); }

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

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

散点图

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 = new JArrayList(); 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 = new JArrayList(); 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 = new JArrayList(); 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 { let values = new JArrayList(); // 循环生成随机数据 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; }

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

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

瀑布图

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.log(\"SimpleWaterfallChartPage onValueSelected: \" + e.getX()); }, onNothingSelected: () => { LogUtil.log(\"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 = new JArrayList(); // 设置标记点位置及颜色 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 = new JArrayList(); 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 = new JArrayList(); 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 = new JArrayList(); dataSetList.add(this.dataSet); let barData: BarData = new BarData(dataSetList); barData.setBarWidth(0.3); return barData; } private getTopAndBottomHighlightData(): BarData { let values: JArrayList = new JArrayList(); 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 = new JArrayList(); dataSetList.add(this.dataSet); let barData: BarData = new BarData(dataSetList); barData.setBarWidth(0.3); return barData; }

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

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

添加自定义图标(以柱状图为例)

 let charPixelMap: ChartPixelMap = new ChartPixelMap(); let fileData = resourceMgr.getMediaContentSync($r(\'app.media.star\').id) const buffer:ArrayBuffer =fileData.buffer.slice(0,fileData.buffer.byteLength); const imageSource = image.createImageSource(buffer) let pixelMap=await imageSource.createPixelMap() //设置自定义图标资源 PixelMap charPixelMap.setIcon(pixelMap) //设置自定义图标资源 resId //charPixelMap.setIcon($r(\'app.media.star\').id) //设置自定义图标宽度 charPixelMap.setWidth(20) //设置自定义图标高度 charPixelMap.setHeight(20); let values: JArrayList = new JArrayList(); for (let i = startAxis; i < endAxis; i++) { values.add(new BarEntry(i, Math.random() * range,charPixelMap)) } let dataSet: BarDataSet = new BarDataSet(values, \'DataSet\'); dataSet.setHighLightColor(Color.Black); //设置显示自定义图标 dataSet.setDrawIcons(true); //设置自定义图标偏移量 dataSet.setIconsOffset(new MPPointF(0, 40)); dataSet.setColorsByVariable(ColorTemplate.VORDIPLOM_COLORS); dataSet.setDrawValues(false)

自定义图表

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; }

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

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

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

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

 public invalidate(): void { if (this.context2d) { super.onDraw(this.context2d); } }

• 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); } }

• 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); }

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); }

• 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);  } }) )) } } }

6. 图表显示

初始化数据，设置UI显示。

 aboutToAppear() { this.model = new CustomModel(); // ... 配置各部件样式 // ... 初始化数据 } build() { Column() { CustomChart({ model: this.model }) .width(\'100%\') .height(\'100%\') } }