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

news2024/9/20 5:41:24

左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数据,并将其传递给model
    let 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)
      }
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2109679.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

navigator.mediaDevices.getUserMedia检查用户的摄像头是否可用,虚拟摄像头问题

在Web开发中&#xff0c;检查用户的摄像头是否可用是一个常见的需求&#xff0c;尤其是在需要视频聊天或录制视频的应用程序中。navigator.mediaDevices.getUserMedia() API 提供了这一功能&#xff0c;它允许你请求访问用户的媒体设备&#xff0c;如摄像头和麦克风。虽然这个A…

【PPT学习笔记】使用PPT制作动画/手书/视频等作品的适配性和可能性?

【PPT学习笔记】使用PPT制作动画/手书等作品的可能性&#xff1f; 背景前摇&#xff1a;&#xff08;省流可不看&#xff09; 最近找到另外一份新的实习工作&#xff0c;有很多需要用到PPT动画的地方。 然而&#xff0c;我们之前制作的理工科PPT全是摒弃了形式主义的艰苦朴素…

AUSD稳定币正式在Sui上线

继Agora在五月份的早期公告之后&#xff0c;AUSD稳定币现已正式在Sui上线。AUSD为Sui日益增加的原生资产列表增添了关键的一环。 Agora此前在以太坊和Avalanche上取得成功&#xff0c;迄今为止已铸造了近6000万美元的稳定币。如今&#xff0c;AUSD集成到Sui网络中&#xff0c;…

C语言基础——⑩③数据结构——②栈和队列

一、栈(Stack) 1、基本概念 栈是一种逻辑结构&#xff0c;是特殊的线性表。特殊在&#xff1a; 只能在固定的一端操作 只要满足上述条件&#xff0c;那么这种特殊的线性表就会呈现一种“后进先出”的逻辑&#xff0c;这种逻辑就被称为栈。栈 在生活中到处可见&#xff0c;比…

使用Python进行数据可视化:让你的数据“活”起来

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 安装与导入 要使用Matplotlib&#xff0c;首先需要安装。可以使用pip进行安装&#xff1a; pip install matplotlib安装完成后&#xff0c;可以在Python代码中导入Matplotlib库&#xff1a; import matplotlib.py…

2024跨境旺季营销:哪个平台是流量之王?

跨境电商的旺季即将来临&#xff0c;对于卖家们来说&#xff0c;如何进行有效的营销推广至关重要。在多渠道广告覆盖的策略下&#xff0c;选择合适的平台成为关键。那么&#xff0c;哪些平台是跨境旺季营销的首选呢&#xff1f; 一、社交媒体平台 1、Instagram 以图片和短视频…

华为达芬奇人像引擎2.0,人像体验有哪些升级

对于年轻人而言&#xff0c;拍照已成为生活中不可或缺的一部分&#xff0c;不仅是为了记录世界、更重要的是成为生活的主角&#xff0c;大胆表达自己。然而很多喜欢使用手机记录生活的人&#xff0c;既希望能够实现媲美单反的影像实力&#xff0c;同时还想呈现出真实、更具自然…

内存管理篇-21 虚拟内存管理:线性映射区

1.线性映射区的定义 这部分讲线性映射区的内容。一般老的嵌入式平台&#xff0c;它内存很小只有几百兆&#xff0c;都会直接把整个物理内存映射到线性映射区了&#xff0c;只有当物理内存大于1GB以上&#xff0c;线性映射区无法cover的时候就把剩下的放到高端内存。所以这个区域…

CST软件如何仿真Total Scan方向图的

本期将介绍如何在CST软件中得到Total Scan方向图。 CASE1 首先以两个dipole天线为例&#xff0c;如下图所示&#xff1a; 我们完成这个两单元阵的仿真&#xff0c;可以在远场结果看到各个频点的结果如下图所示&#xff1a; 我们可以在combine按钮下任意合成不同幅度相位下的结…

SpringBoot中实现全局异常处理,统一返回错误信息给前端

背景引入&#xff1a;最近实现了一个限流切面类&#xff0c;但是在限流方法中throw异常&#xff0c;会直接打印到控制台&#xff0c;报错500&#xff0c;对前端很不友好。因为是注解&#xff0c;又没办法捕获再处理。那么怎么才能将错误码返回给前端呢&#xff1f;原来是全局异…

linux下的Socket网络编程教程

套接字概念 Socket本身有“插座”的意思&#xff0c;在Linux环境下&#xff0c;用于表示进程间网络通信的特殊文件类型。本质为内核借助缓冲区形成的伪文件。与管道类似的&#xff0c;Linux系统将其封装成文件的目的是为了统一接口&#xff0c;使得读写套接字和读写文件的操作…

什么是边缘计算?边缘计算网关有什么作用?

边缘计算是一种分布式计算范式&#xff0c;它将计算、存储和网络服务靠近数据源或用户的位置&#xff0c;以减少延迟、提高响应速度&#xff0c;并减轻中心数据中心的负担。边缘计算网关在这一过程中扮演着至关重要的角色。边缘计算网关的主要作用包括&#xff1a;1. 数据的收集…

问题合集更更更之cssnano配置导致打包重新计算z-index

前言 &#x1f44f;问题合集更更更之cssnano配置导致打包重新计算z-index~ &#x1f947;记得点赞关注收藏&#xff01; 1.问题描述 代码中写了样式代码&#xff0c;z-index层级关系 z-index&#xff1a;2029;进行打包之后&#xff0c;发布到环境中&#xff0c;发现层级变…

《机器学习》PCA数据降维 推导、参数讲解、代码演示及分析

目录 一、主成分分析 1、什么是主成分分析&#xff1f; 2、什么是降维&#xff1f; 3、如何进行主成分分析 1&#xff09;数据标准化 2&#xff09;计算协方差矩阵 3&#xff09;计算特征值和特征向量 4&#xff09;选择主成分 5&#xff09;构建投影矩阵 6&#xff09;数据…

中学理化生实验室如何建设及配置

近年来&#xff0c;各地教育部门陆续出台“关于推进普通中小学校科学类实验室建设”的相关要求&#xff0c;针对小学、初中、高中学段的实验室等设施设备配备提出了标准指引&#xff0c;提升教育装备水平&#xff0c;助力打造品质教育。本文就中学理化生实验室建设要求及配置进…

【ant-design】Table如何设置Empty文案并保留图标

如果只设置了文案&#xff0c;那么为空的时候&#xff0c;并不会有图标 这时候我们可以设置emptyText: <Empty image{Empty.PRESENTED_IMAGE_SIMPLE} description{"没有数据"}/> 即可保留图标

产品经理入门基础

什么是产品&#xff1f; 什么是产品经理&#xff1f; 想清楚产品怎么做的人 1.什么是产品?区别是? 能够解决某个问题的东西就是产品有形的产品、无形的产品2.什么是产品经理? 想清楚产品怎么做的人就是产品经理3.合格的产品经理需要关注哪些核心问题? 用户、场景、需求功能…

k8s工作负载控制器--Statefulset

文章目录 一、概述二、引入"有状态"需求1、管理无状态服务的 Deployment 实现了什么1.1、创建 Deployment1.2、验证 Pod 数量1.3、配置更新策略&#xff08;更新镜像版本&#xff09;1.4、观察更新过程1.5、验证更新后 Pod 的状态1.6、回滚 Deployment 2、新需求分析…

iptable 理解

iptable 理解 这个当初我理解不了&#xff0c;主要是没把netfilter理解清楚。 Netfilter是集成在内核中的&#xff0c;用来定义存储各种规则的。Iptalbe是修改这些规则的工具&#xff0c;修改后存在netfilter里面。 数据包进入LINUX服务器时&#xff0c;先进入服务器的netfilt…

Leetcode 72. 编辑距离 动态规划 优化 C++实现

Leetcode 72.编辑距离 问题&#xff1a;给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a;插入一个字符&#xff0c;删除一个字符&#xff0c;替换一个字符。 算法1&#xff1a;递…