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

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

TypeScript 复制代码
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 "";
  }
}

使用方法如下:

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

完整代码如下:

TypeScript 复制代码
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)
      }
    }
  }
}
相关推荐
枫叶丹45 小时前
【HarmonyOS之旅】HarmonyOS开发基础知识(三)
华为od·华为·华为云·harmonyos
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
AORO_BEIDOU13 小时前
单北斗+鸿蒙系统+国产芯片,遨游防爆手机自主可控“三保险”
华为·智能手机·harmonyos
博览鸿蒙15 小时前
鸿蒙操作系统(HarmonyOS)的应用开发入门
华为·harmonyos
Damon小智1 天前
HarmonyOS NEXT 技术实践-基于基础视觉服务的多目标识别
华为·harmonyos
匹马夕阳1 天前
华为笔记本之糟糕的体验
华为·笔记本电脑
egekm_sefg1 天前
华为、华三交换机纯Web下如何创关键VLANIF、操作STP参数
网络·华为
岳不谢2 天前
华为DHCP高级配置学习笔记
网络·笔记·网络协议·学习·华为
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
K.P2 天前
鸿蒙元服务从0到上架【第三篇】(第二招有捷径)
华为·harmonyos·鸿蒙系统