鸿蒙图表MPChart自定义样式(五)左y轴显示数值,右y轴显示百分比

2024-09-06 15:52

本文主要是介绍鸿蒙图表MPChart自定义样式(五)左y轴显示数值,右y轴显示百分比,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

左y轴数值不变,右y轴改成百分比,需要通过自定义RightAxisFormatter实现IAxisValueFormatter接口,将右y轴的数值改成百分比文本,RightAxisFormatter类如下:

class RightAxisFormatter implements IAxisValueFormatter {maxNumber: number = 0;constructor(maxNumber: number) {this.maxNumber = maxNumber;}getFormattedValue(value: number, axis: AxisBase): string {switch (value) {case this.maxNumber:return "100%";case this.maxNumber * 4 / 5:return "80%";case this.maxNumber * 3 / 5:return "60%";case this.maxNumber * 2 / 5:return "40%";case this.maxNumber * 1 / 5:return "20%";case 0:return "0%";}return "";}
}

使用方法如下:

//设置标签文本转换器
rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber));

完整代码如下:

import {JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel,Mode,LineDataSet,XAxisPosition,IAxisValueFormatter,AxisBase,
} from '@ohos/mpchart';class RightAxisFormatter implements IAxisValueFormatter {maxNumber: number = 0;constructor(maxNumber: number) {this.maxNumber = maxNumber;}getFormattedValue(value: number, axis: AxisBase): string {switch (value) {case this.maxNumber:return "100%";case this.maxNumber * 4 / 5:return "80%";case this.maxNumber * 3 / 5:return "60%";case this.maxNumber * 2 / 5:return "40%";case this.maxNumber * 1 / 5:return "20%";case 0:return "0%";}return "";}
}@Entry
@ComponentV2
struct LeftRightAxisPage {private model: LineChartModel = new LineChartModel();minNumber: number = 0;maxNumber: number = 500;@Local dataReady: boolean = false;setData() {// 创建一个 JArrayList 对象,用于存储 EntryOhos 类型的数据let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();// 循环生成 1 到 20 的随机数据,并添加到 values 中for (let i = 1; i <= 20; i++) {values.add(new EntryOhos(i, Math.random() * 500));}// 创建 LineDataSet 对象,使用 values 数据,并设置数据集的名称为 'DataSet'let dataSet = new LineDataSet(values, 'DataSet');dataSet.setMode(Mode.CUBIC_BEZIER);dataSet.setDrawCircles(false);let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();dataSetList.add(dataSet);// 创建 LineData 对象,使用 dataSetList数据,并将其传递给modellet lineData: LineData = new LineData(dataSetList);let leftAxis = this.model.getAxisLeft();let rightAxis = this.model.getAxisRight();leftAxis?.setAxisMinimum(this.minNumber);leftAxis?.setAxisMaximum(this.maxNumber);//设置有6个标签leftAxis?.setLabelCount(6, true);rightAxis?.setAxisMinimum(this.minNumber);rightAxis?.setAxisMaximum(this.maxNumber);//设置有6个标签rightAxis?.setLabelCount(6, true);//设置标签文本转换器rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber));this.model.getXAxis()?.setPosition(XAxisPosition.BOTTOM);this.model.getDescription()?.setEnabled(false);this.model?.setData(lineData);this.dataReady = true;}aboutToAppear() {// 模拟网络请求,延时1秒获取数据setTimeout(() => {this.setData()}, 1000);}build() {Column() {if (this.dataReady) {LineChart({ model: this.model }).width('100%').height('50%').backgroundColor(Color.White)} else {LoadingProgress().color(Color.Blue)}}}
}

这篇关于鸿蒙图表MPChart自定义样式(五)左y轴显示数值,右y轴显示百分比的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1142454

相关文章

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

你的华为手机升级了吗? 鸿蒙NEXT多连推5.0.123版本变化颇多

《你的华为手机升级了吗?鸿蒙NEXT多连推5.0.123版本变化颇多》现在的手机系统更新可不仅仅是修修补补那么简单了,华为手机的鸿蒙系统最近可是动作频频,给用户们带来了不少惊喜... 为了让用户的使用体验变得很好,华为手机不仅发布了一系列给力的新机,还在操作系统方面进行了疯狂的发力。尤其是近期,不仅鸿蒙O

电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

《电脑显示hdmi无信号怎么办?电脑显示器无信号的终极解决指南》HDMI无信号的问题却让人头疼不已,遇到这种情况该怎么办?针对这种情况,我们可以采取一系列步骤来逐一排查并解决问题,以下是详细的方法... 无论你是试图为笔记本电脑设置多个显示器还是使用外部显示器,都可能会弹出“无HDMI信号”错误。此消息可能

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中,开发图表功能的控件是Char

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问